CATEGORY

コーディング

  • 2025年6月24日

viewportとは？HTMLでの設定方法についてまとめてみた！

はじめに viewportとは、PCやスマホ、タブレットなどのデバイスごとにコンテンツの表示領域を指定するためのHTMLのmeta要素（name属性に指定する値）です。直訳すると「表示領域」を意味し、「ビューポート」と読みます。このmeta viewportを正しく設定することで、レスポンシブデザインがうまく機能し、SEOにも良い影響を与えることが期待できます。 逆に、viewportを設定しない […]

続きを読む
  • 2025年6月12日

WordPressでソースコードを美しく表示・埋め込むプラグイン調べてみた！※自動でコードを書けるプラグインではない

WordPressでソースコードを美しく表示・埋め込むプラグイン6選 WordPressでは標準のコードブロックを使ってHTMLやCSSなどのソースコードを表示できます。ただし、キーワードの色分けや特定の行だけを目立たせるシンタックスハイライト機能は標準では備わっていません。ソースコードをより見やすく、読みやすく埋め込みたい場合は、専用プラグインの活用がおすすめです。 今回は実際に6つのプラグイン […]

続きを読む
  • 2025年6月10日

Flexboxの使い方についてまとめてみた！

Flexbox（フレックスボックス）の使い方まとめ 一見便利そうで、実際には少しややこしい…そんなCSSの「Flexbox（フレックスボックス）」について、使い方をわかりやすく整理しました。 Flexboxの基本的な考え方 Flexboxは、要素を効率よく並べたいときに使えるCSSのレイアウト手法です。特に「横並び」にしたい場面でよく使われます。 使うときはまず、並べたい子要素（item）を一つの […]

続きを読む
  • 2025年6月6日

ロード中の画面をアニメーション表示させるには？調べてみた！

ページ読み込み中の白い画面、気になりませんか？ ローディングアニメーションの導入でユーザーの不安を解消！ Webページを開いたとき、数秒間真っ白な画面が続くと「ちゃんと読み込まれているのかな？」と不安になることはありませんか？そんなときに役立つのがローディングアニメーション（ローダー）です。 ローダーを設置することで、ユーザーに「ページを読み込み中です」ということを明確に伝えることができます。また […]

続きを読む
  • 2025年6月4日

スクロールした時に特定の要素だけ固定するには？方法についてまとめてみた！

【CSS入門】スクロール時に要素を固定するには？ positionプロパティの2つの指定方法を解説 Webサイトを閲覧していると、スクロールしてもヘッダーが常に画面の上部に表示されているサイトを見かけたことがあるのではないでしょうか。「自分のサイトにも取り入れてみたいけど、どうやって実装するのかわからない」「CSSだけでできるの？」そんな疑問をお持ちの方も多いと思います。 このような固定表示は、C […]

続きを読む
  • 2025年5月30日

position: sticky; の使い方と 注意点についてまとめてみた！

はじめに パララックス・追従ヘッダー・固定サイドバーに便利！ かつてはInternet Explorer（IE）非対応のため、position: sticky; を使うにはポリフィルを入れるか、position: fixed; で代用するしかありませんでした。しかし、IEのサポートが終了した今、stickyは安心して使えるプロパティになっています。 この記事では、position: sticky; […]

続きを読む