メインカテゴリーを選択しなおす
僕が作ったHTMLポーカーゲームを公開！プログラム解説と画像の挿入方法も紹介 皆さま、こんにちは！TUMUPIRO管理人のうえでございます。いつも当ブログをご覧いただき、ありがとうございます。今回は、僕が趣味で作ったHTMLポーカーゲームを皆さまにご紹介しようと思います！その名も「TUMUPIROポーカー」！シンプルながらも本格的なポーカーゲームを、HTMLとJavaScriptで作ってみました。せっかくなので、プログラムの解説や...
【Vue.js＋TypeScript】デジタル時計を作ってみた
こんにちはです。あっちのそららです。最近勉強しているTypeScriptのアウトプットとして、デジタル時計を作ってみました。 デモページ acchinosorara.github.io「Vue.js」というフレームワークを使用。ディスプレイの文字がリアルタイムで更新される、ありきたりな時計です。 文字のデザイン カクカクしたデジタル時計らしさを出すため、文字はCSSでデザインしました。 参考記事 ja.wikipedia.org HTMLで各セグメントを生成し、A～Gの連番を振って配置しました。数字に応じて個々の表示・非表示が切り替わる仕組みです。例えば、 「2」→ C、Fを非表示 「4」→ …
初心者から上級者まで こんにちは、TUMUPIRO管理人のうえです！いつもブログをご覧いただき、ありがとうございます。今回は、プログラミングを学びたい皆さんにぴったりのテーマ「JavaScript」について、どこよりも詳しく解説します！💻 JavaScriptは、ウェブページに動きをつけたり、ユーザーとの対話を可能にする、とても便利なプログラミング言語です。初心者の方でもわかりやすく、上級者の方にも役立つ内容を目指して、...
初心者にもやさしい 簡単HTML作成がFC2WEBのサービス終了に伴い移転
以前から、Webサイト(HTMLタグ, JavaScript, CSS)の勉強のために作成した初心者にもやさしい 簡単HTML作成ですが、FC2WEBのサービス終了を受けて、移転が必要となりました。 現在は、もっと便利なWebサイトも
ショッピングカートがなぜか検索にヒットしなくてHTMLとWebと睨めっこしながら奮闘してました奮闘した甲斐がありやっと検索にヒットしましたよかった。ほんとに、ショッピングカートを変えなきゃならないかな？思ってました私がやった方法はGoogle Search Console にサイトを登録登録の際に出たHTMLをサイトに登録Google Search Consoleにちゃんとヒットするかチェックヒットするのに1週間ぐらいかかったかな？それまでヤキモキし...
線形グラデーション 1 2 3 4 5 6 7 8 9 10 .linear-1 { /* orangeからblueにグラデする。orange 0%, blur 100% と同じ挙動 */ background: linear-gradient(orange, blue); } .linear-2 { /* 左から右にグラデする。to right = 90deg or 0.25turn と同じ挙動 */ background: linear-gradient(to right, orange, blue); } .linear-3 { /* 45度回転した状態でグラデする。45deg = to…
はじめに n 番煎じ感が否めない記事だけど、ワイの知らない間に scroll-snap-type とかいう知らないプロパティくんがシゴデキらしいと聞いたのでまとめておく コード <div class="container"> <div class="items"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> </div> :root { --width: 300px; } /* カルーセルのcontainerの領域を指定 */ .conta…
input type="range"でつまみのない丸っこいスライダーを作る
作りたいもの つまみを非表示もどきにして丸っこくしたい 動作確認環境 Google Chrome コード まずは HTML と CSS でできるところまで作るゾ1 <input type="range" value="0" min="0" step="1" max="5" /> input[type="range"] { -webkit-appearance: none; /* デフォルトのCSSをリセット */ --range-height: 20px; --range-width: 250px; width: var(--range-width); height: var(--range-…
最近は、Youtubeが多いので、たまにアップした動画を埋め込む際、動画の埋め込みタグって何だっけ？とど忘れしてしまうこともあったりします。 そんな時に、サクッと調べられるように...
PHPとHTMLは、ウェブ開発において密接に関連しています。以下にその関係性を説明します： 1. **PHPとHTMLの統合**: - PHPは、HTML内に埋め込んで使用されることが一般的です。PHPコードは、HTMLファイルの中に直接挿入され、サーバーで処理された後にHTMLとしてクライアントに送信されます。 - 例えば、PHPを使用して動的なコンテンツを生成する場合、HTML内にPHPコードを埋め込んでそのコンテンツを表示します。 …
FastAPIでファイルダウンロードのAPIを作成するコードのメモ
お疲れ様です。 業務内でFastAPIを使ってcsvファイルやexcelファイルをダウンロードするAPIを作成したので、忘れないうちにメモ。 最近はWeb系のコード作成も増えていて使いどころも多くなってくるのかなと思っています。 作成コード（GitHub） 実装 FileResponseを使用したパターン StreamingResponseを使用したパターン 作成コード（GitHub） github.com 実行して立ち上がったサーバにアクセスすると下記のようなWebUIが表示されます。 ボタンを押すと適当な内容が記載されたサンプルのcsvファイルかexcelファイルがダウンロードされます。 …
アップロードされたファイルのデータをFastAPIで処理するコードのメモ
お疲れ様です。 以前FastAPIでファイルダウンロードをするAPIを作成しました。 fallpoke-tech.hatenadiary.jp 逆にフロントエンドからアップロードしたものをFastAPIでデータとして受け取るというのも使いどころが多そうに感じたので、今回はそのAPIを作成してみました。 作成コード（GitHub） github.com 前回同様main.pyを実行するとFastAPIから下記のようなUIが表示されます。 上側のUIが今回作成のファイルアップロードの部分になります。ファイル選択のボタンでエクスプローラーからファイルを選択し、アップロードボタンでFastAPIと通信…
テキスト整形ツール紹介 こんにちは！ 今回は、テキストを簡単に整形することができる「テキスト整形ツール」を公開しました。被リンクの増加やSEO対策に、便利なツールを作成して公開すればいいという記事を見つけたので普段記事作成の際に使っている、文字カウントやテキストの整形のツールを公開すればいいのではということで勉強がてら作ってみました。 プログラミングは初心者のため絶対にバグがあると思いますが お許しください(´・ω・｀) このツールを使えば、入力したテキストをさまざまな形式に変換できます。 以下の機能を備えています。 主な機能 大文字・小文字変換: テキストを大文字または小文字に変換できます。…
このツールは、テキストを簡単に整形できる「テキスト整形ツール」を紹介します。ユーザーが入力したテキストを、大文字や小文字に変換したり、全角と半角を切り替えたり、ひらがなとカタカナに変換することができます。また、空白を削除する機能や、リアルタイムで文字数をカウントする機能も搭載しています。 使い方は非常にシンプルで、必要なオプションを選んで「実行」ボタンを押すだけ。整形された結果はすぐに表示され、コピーも簡単です。このツールを利用して、テキストの整形を手軽に行いましょう！
少し前に通信教育で、プログラミングを勉強していました。 ユーキャンのプログラミング講座で、期間は一応3ヶ月となっていましたが、私は4ヶ月くらいかかって、なんとか終了しました。申し込み先はユーキャンだったのですが、実際には、コードキャンプというところで勉強する形で、受講は全てオンラインでした。自分でネット上の教科書を読み、課題をやって、分からないところは、講師の先生にオンラインで直接聞くことができる仕組みです。 普通はSEさんなどを目指して、こういう講座を受ける方が多いと思うのですが、私の場合は、単に知的好奇心を満たしたい、という変わった動機でした。 なぜかと言うと、以前、職場でホームページの担…
WordPress：ページの表示速度改善｜Autoptimizeの設定注意点
「Autoptimize」は、WordPressのプラグイン。HTMLやCSS、JavaScript、画像を最適化し、サイトの表示速度を高速化するもの。Autoptimize不具合時の対処法。
【デイトラ初級編】jQuery実践課題②モーダルで画像の拡大表示
デイトラWeb制作コース初級編【調べながら実装しよう】jQuery実践課題②「モーダルで画面の拡大表示」を終えたので、復習のために記事にしました。HTML、CSS、jQueryを載せています。
【デイトラ初級編】jQuery実践課題①ページトップへ戻るボタンを付ける
デイトラWeb制作コース初級編【調べながら実装しよう】jQuery実践課題①「ページトップへ戻るボタンを付ける」を終えたので、復習のために記事にしました。HTML、CSS、jQueryを載せています。
【デイトラ初級編】調べながら実装しようjQuery実践課題①
2024年8月から、デイトラでWeb制作コースを学んでいます。 今回は初級編DAY21「調べながら実装しよう」で、jQueryを使って自分でサイトの動きを実装する課題です。 初級編で構築したスイーツサイトに動きをつける課題が2つ出ました。
そう、これがまたやりたかった。 囲み記事って色もついて、なんだか見やすいですよね。 さて、これってブログの編集画面で簡単にでてくるものだったっけ？となりまして。 そういうサイトからコピペして持
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰ここでは今までおすすめしたアプリを…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己…
アクセスカウンターを強化！PVに対応したテキストグラフを簡単に表示する方法 スズシンラボ
アクセスカウンターを強化するために、PVに応じたテキストグラフを簡単に表示する方法を解説します。JavaScriptを使って、アクセス数をグラフで可視化する方法を紹介します。アクセスカウンターを強化して、見た目をより楽しくしてみませんか？
自作のKotlin製静的サイトジェネレーターKraftをGitHubに公開！ スズシンラボ
自作のKotlin製静的サイトジェネレーターKraftをGitHubに公開しました！Kraftは、MarkdownファイルをHTMLファイルに変換することができます。Kraftの概要や使い方、ライセンスなどについて紹介します。
ブログリニューアル進捗状況【4】：WordPress用phpファイル、9割移行終了
テーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その4」をご報告します。今回はphpのテンプレートがほぼ完成したお話になります！
自作ブログのカスタマイズ：タグ検索機能の実装方法 スズシンラボ
自作ブログにタグ検索機能を追加しました。キーワードを入力すると、そのキーワードに一致するタグの記事を検索できるようになりました。この記事では、そのタグ検索機能の実装方法を紹介します。一般的な方法とは若干異なりますが、参考にしていただければ幸いです。
ブログリニューアル進捗状況【3】：全テンプレートのhtml/css/jsのコーディングが完了
テーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その3」をご報告します。今回はコーディング完了記念にデモサイトを一時公開。リニューアル後は消えてしまうので、今だけ特別に！
ブログリニューアル進捗状況【2】：汎用ページhtml/cssのコーディングが8割完了しました
ブログオープンして数か月。ユーザー様に共有したい記事の方向性も徐々に明らかになってきました。かくなる上はテーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その2」をご報告します。
ブログリニューアル進捗状況1：Web設計と画像の書き出し完了しました
ブログオープンして数か月。ユーザー様に共有したい記事の方向性も徐々に明らかになってきました。かくなる上はテーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その1」をご報告します。
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、太陽を描画してみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Untitled by あっちのそらら (@acchinosoraranocode) on CodePen. 静止画だとシンプルすぎて味気なかったので、遊び心でアニメーションも加えました。ギザギザ部分は、複数の正方形をつなげて再現。円周上に並べるため、三角関数を使用したので、ざっくり解説します。 正方形を描画する spanタグで正方形を作ります。数が多いほどギザギザが細かくなりますが、見た目のバランス…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己紹…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己紹…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己紹…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己紹…
【JavaScript】パスワードを入力してページ遷移をさせる方法
この記事ではJavasscriptでパスワードを入力してページ遷移をさせる方法についてご紹介しています。特定のユーザーのみに表示を許可したい場合に、ベーシック認証等を設定する事が多いですが、サイト規模や場合によってはJavasscriptで簡単に実装できる事もありますので、是非一度試してみてください！
