この記事では、HTMLとCSSを使って、ウェブページ上でテキスト要素を特定のデザインに配置する方法について解説します。 具体的には、2つのテキスト要素を中央に配置し、左側要素の文字は右寄せに、もう一方はまた要素と逆寄せにする方法です。
ウェブサイトやアプリケーションのユーザーエクスペリエンスを向上させるために、クリック可能な要素をユーザーに効果的にアピールする方法があります。この記事では、CSSを使用してクリックされた場所に波紋効果を追加する手法を詳しく説明します。
この記事では、はてなブログの「月別アーカイブ」をウェブサイトの任意の場所に配置する方法を解説します。 具体的には、Ajaxを使用した非同期呼び込みの仕様と、HTML・CSSを活用したカスタマイズが可能になるメリットについての内容です。 この手法を利用し…
HTMLエンティティは、ウェブ開発者にとって不可欠なツールです。HTMLエンティティはアンパサンド(&)で始まりセミコロン(;)で終わるテキストの一固まりで、特殊文字や予約済み文字の表示に使用されます。 さらに、HTMLエンティティはセキュリティ上も重要です…
ふしぎな錯覚現象をいろいろ紹介
この記事では、Webデザインにおけるおしゃれな検索ボックスの実装方法について詳しく解説します。 検索ボックスは右上に固定され、クリックするとスムーズに表示されます。 簡単なCSSとJavaScript（JQuery）を活用して、右上に固定されたおしゃれで可愛らし…
ウェブサイトで一般的に使用されているフォント色について表にまとめました。デザインの参考になるカラースキームを見つけるのに役立つ情報です。
i.fa-solid.fa-bars.fa-spin { color: snow; background: #2287f4; width: 28px; height: 28px; padding: 5px 6px 0px 6px; margin: 0px 5px; border-radius: 5px; border: solid 1px; border-color: darkblue; /* box-shadow: 0px 0px 5px 1px rgba(19, 21,…
Font Awesome - よく利用するアイコンだけまとめ
var noindex=document.createElement("meta");noindex.name="robots",noindex.content="noindex";var head=document.getElementsByTagName("head")[0];head.appendChild(noindex); .post-category { top: 30px;left: -10px;} WebサイトにYouTube動画を埋め込…
var noindex=document.createElement("meta");noindex.name="robots",noindex.content="noindex";var head=document.getElementsByTagName("head")[0];head.appendChild(noindex); .post-category { top: 30px; } WebサイトにYouTube動画を埋め込むことは、…
var noindex=document.createElement("meta");noindex.name="robots",noindex.content="noindex";var head=document.getElementsByTagName("head")[0];head.appendChild(noindex); .post-category { top: 30px;left:-10px} WebサイトにYouTube動画を埋め込む…
この記事では、YouTube動画をウェブサイトに埋め込み、ページアクセス時に音声をONにして自動再生させる方法について詳しく説明します。埋め込みの基本手順から、プロパティ・パラメータの設定カスタマイズ、さらにはiframe APIとJavaScriptを使用して動画プ…
Markdown記法の基本から応用まで詳しく解説。引用、改行、コード挿入、表作成、リンク、画像挿入、脚注、装飾、打消し線、エスケープ文字、HTML、CSS、TEXなどを網羅。手軽ながら柔軟性に欠ける一面もあるMarkdownのメリット・デメリットも考察。記事を通じ…
この記事では、ウェブサイトやブログに「トップへ戻るボタン」を実装する方法とそのメリットについて詳しく解説しています。最新のWebデザインにおいて、ページをスクロールした際に画面右下に表示されるこのボタンは、ユーザーエクスペリエンス向上やSEO対…
ブログに音楽を埋め込む方法を詳しく解説。DropboxなどのクラウドドライブやYoutube等を利用した音声ファイルの埋め込みから、ブログ記事内でのプレイヤー設置まで、手順を分かりやすく説明します。
この記事は、JSFiddleを使用してWeb開発プロジェクトを共有または埋め込む際に、デフォルトの表示タブを"Result"に変更する方法について詳しく説明しています。また、埋め込み後のダークモード⇔ライトモード切り替え方法も。 読者は、このガイドを通じて、JS…
この記事では、HTMLとCSSを使用して、魅力的なキラキラエフェクトを持つボタンを作成する方法を詳しく解説します。アニメーションやスタイリングの手法を組み合わせ、ユーザーエクスペリエンスを向上させる効果的なボタンのデザイン手法を紹介します。また、…
この記事では、HTMLとCSSを使用して、魅力的なキラキラエフェクトを持つボタンを作成する方法を詳しく解説します。アニメーションやスタイリングの手法を組み合わせ、ユーザーエクスペリエンスを向上させる効果的なボタンのデザイン手法を紹介します。また、…
この記事では、HTMLとCSSを使用して、魅力的なキラキラエフェクトを持つボタンを作成する方法を詳しく解説します。アニメーションやスタイリングの手法を組み合わせ、ユーザーエクスペリエンスを向上させる効果的なボタンのデザイン手法を紹介します。また、…
この記事ではWebアプリケーションのUX(ユーザエクスペリエンス)向上のために重要なクリップボードへのコピー機能を取り上げます。Async Clipboard APIを活用し、JavaScriptを使用した実装手順やコード例を通じて、初心者でも理解しやすくお届けします。さら…
CSS備忘録です。
この記事では、基本的なウェブサイトのトップページのデザインを紹介します。ヘッダー、セクション、フッターなどの要素を使ったシンプルなレイアウトの例を掲載し、各セクションの役割やコンテンツについても解説します。
Web ページにソース コードを表示する場合は、読みやすさとアクセシビリティの両方を考慮することが重要です。 この記事では、jQuery を使用してコードの折り返し表示を切り替える方法を紹介します。 コードが画面内に収まりきらない場合でも、スクロールバ…
この記事では、CSSのみを使用して作成された吹き出しデザインとアイコンの組み合わせバリエーションをご紹介します。 かわいらしい要素を取り入れ、軽量でありながらも魅力的な吹き出しのスタイリング方法を学び、レスポンシブな設計にも対応させるテクニッ…
HTMLの「details」タグを使用して、長いコードやテキスト部分を簡単に折りたたむ方法をいっしょに学びましょう。コーディングブログやカスタマイズに最適な、シンプルなアコーディオンメニューを作成できます。 複雑なJavaScriptやCSSは不要です。必要なのは…
1日1優。ポチっ、が支えです 小さなひとこと、お待ちしてます(≧◡≦)❤️ 読者登録もいただけますとうれしいです～ class「r-fuki piyo」のなぞ 捜査は難航 事件の全貌 気を取りなおして ここで問題が 強引に解決 今回のコード HTML CSS こんばんは、暑さもすこ…
寄せたい画像の位置と書き方 真ん中 上のコード [f:id:画像:plain:h240] の解説 右寄せ（さらに左側に文字を回り込ませる） 左寄せ（さらに右側に文字を回り込ませる） 横並び 寄せたい画像の位置と書き方 真ん中 <center>[f:id:画像:plain:h240]</center> 上のコード [f:id:…
やりたいこと できるかな？ URLの違い JavaScriptで特定のURLを識別 やりたいこと サイドバーの目次タイトルを、表示するページによって変更したい できるかな？ URLの違い https://rubirubi.hateblo.jp/entry/～ https://rubirubi.hateblo.jp/archive/～と…
Syntax Highlighting of Source Code with Hatena Notation スーパーpre記法 html css javascript python sh ruby hatena おまけ 表組 項目名ありの表 引用記法 Syntax Highlighting of Source Code with Hatena Notation スーパーpre記法 >|| ～～ || 整形…
