カテゴリー: HTML
  • CSSグリッドの使い方|初心者でも簡単にできるレイアウト基礎と応用

    「もっと自由に、きれいにレイアウトしたい!」と思ったことはありませんか? そんなときに役立つのが、CSSグリッドレイアウトです。 グリッドは、要素を“行と列”に分けて、キレイに並べることができるレイアウト方法です。 難しそうに見えるかもしれませんが、ポイントを押さえれば初心者でもすぐ使えるようになります! CSSグリッドとは? CSSグリッドは、ページ内の要素を縦と横のグリッド状に配置できるレイアウト手法です。 Flexboxとの違いは、「2次元で制御できる」点です。 たとえば、3つのカードを均等に並べたり、複数行を自動で整列させたいときにとても便利です。 基本のグリッドレイアウト 以下のコードで3列レイアウトを作れます。 <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> </div> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; } grid-template-columns: repeat(3, 1fr); で、3列が均等に分割されます。 応用1:高さがそろわない問題を解決! グリッドの各行で高さがバラバラになる問題は、grid-auto-rows で解決できます。 .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; grid-auto-rows: 1fr; } これで、すべての行の高さがそろい、見た目も美しくなります。中身の量が違っても安心です。 もっと柔軟にしたい場合は以下もおすすめ: grid-auto-rows: minmax(auto, 1fr); この指定なら、必要に応じて伸びるのでテキストのあふれも防げます。 応用2:アイテムを中央に配置 グリッド内のアイテムを縦横中央にしたい場合は place-items を使います。 .grid-container { place-items: center; } これは align-items + justify-items を一括で書ける便利プロパティです。 応用3:レスポンシブ対応も簡単 画面幅に応じて自動的に列数を増減するには、以下のように指定します。 .grid-container { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } auto-fit や minmax を使えば、スマホ〜PCまで柔軟に対応できます。 grid-template-areas で意味のある配置に 以下のようにエリアに名前をつけて配置すれば、意味のあるコードになります。 .grid-container { grid-template-areas: "header header" "sidebar main"; grid-template-columns: 1fr 3fr; } 子要素には grid-area: header; のように対応づけるだけでOK。 初心者がつまずきやすいポイント 子要素が自動で高さを揃えるには grid-auto-rows を忘れずに! 余白調整は gap を使うと簡単 スマホ対応は minmax + auto-fit が便利 おわりに CSSグリッドは、見た目を揃えるだけでなく、構造も分かりやすくなります。 高さの揃ったカードや料金表など、実務にもとても役立つので、ぜひ活用してみてください!

  • JavaScript不要のハンバーガーメニュー|HTMLとCSSだけでスマホ対応ナビを作る方法

    「できるだけコードをシンプルにしたい」「JavaScriptなしでメニューを切り替えたい」そんな方におすすめなのが、CSSだけで作れるハンバーガーメニューです。今回は、HTMLとCSSだけで完結する実装方法を紹介します。 HTML構造を用意する チェックボックスとラベルを活用して、クリック時の状態を制御します。 コピー <input type="checkbox" id="menu-toggle" hidden> <label for="menu-toggle" class="hamburger"> <span></span> <span></span> <span></span> </label> <nav class="nav-menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> CSSで表示・非表示を切り替える ラベルがクリックされるとチェック状態が変わり、それに応じてメニューの表示を切り替えます。 コピー .hamburger { display: flex; flex-direction: column; width: 30px; height: 22px; justify-content: space-between; cursor: pointer; } .hamburger span { height: 4px; background: #333; border-radius: 2px; } .nav-menu { display: none; } #menu-toggle:checked + .hamburger + .nav-menu { display: block; } レスポンシブ対応 PC画面では常にメニューを表示し、スマホではハンバーガーに切り替えます。 コピー @media (min-width: 768px) { .hamburger { display: none; } .nav-menu { display: block !important; } } 初心者が気をつけたいポイント labelとinputのid・forの対応:一致していないとクリックが効かない 選択状態を使うため、必ずinputはhiddenで保持:画面に表示しないよう注意 +セレクタの順番:input + label + navの順でないと動作しません おわりに JavaScriptなしでも、CSSの工夫でメニュー開閉を実現できます。アニメーションやスライド効果を加えれば、より洗練された印象に。次回はCSSトランジションやtransformを使ったアニメーションバージョンも紹介予定です!

  • ハンバーガーメニューの作り方|HTML・CSS・JavaScriptでスマホ対応ナビを簡単実装!

    スマホサイトでよく見る「三本線アイコン」。それが、ハンバーガーメニューと呼ばれるナビゲーションメニューです。今回は、HTML・CSS・JavaScriptを使って、シンプルに作る方法を初心者向けに解説します。 基本となるHTML まずは、メニューアイコンとメニューリストのHTML構造を用意します。 コピー <header> <div class="hamburger"> <span></span> <span></span> <span></span> </div> <nav class="nav-menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> CSSで見た目を整える 三本線の見た目と、メニューの非表示をCSSで調整します。 コピー .hamburger { width: 30px; height: 22px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } .hamburger span { display: block; height: 4px; background-color: #333; border-radius: 2px; } .nav-menu { display: none; } .nav-menu.active { display: block; } JavaScriptで開閉を制御 クリックイベントでクラスを付け替え、メニューを開閉します。 コピー const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu'); hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); }); レスポンシブ対応を加える PC画面では常にメニューを表示し、スマホではハンバーガー形式に切り替えるようにしましょう。 コピー @media (min-width: 768px) { .hamburger { display: none; } .nav-menu { display: block !important; } } 応用:開閉にアニメーションをつける CSSのtransitionを使えば、メニューがふわっと開くような演出もできます。 コピー .nav-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .nav-menu.active { max-height: 300px; /* 適切な高さに調整 */ } 初心者が気をつけたいポイント class名のミスに注意:JavaScriptとHTMLで同じクラス名を使っているか確認 クリックが反応しないとき:scriptが正しく読み込まれているか、エラーがないか確認 スマホ表示確認:開閉動作やレイアウト崩れがないか実機でも確認しましょう おわりに ハンバーガーメニューはモバイル対応の基本機能。HTML・CSS・JavaScriptの基礎を組み合わせれば、簡単に作れるようになります。自分のサイトにあわせてアニメーションやデザインをカスタマイズするのも楽しいですよ! 次回は、CSSだけで作れる「JavaScript不要のハンバーガーメニュー」も紹介予定です。お楽しみに!

  • Prism.jsの使い方と導入手順|初心者向けコード装飾の決定版ガイド

    ブログや技術記事でコードを読みやすく美しく表示したいときに活躍するのが、Prism.jsという軽量ライブラリです。 HTML・CSS・JavaScriptなどのコードをカラフルにハイライト表示でき、テーマ変更や行番号の追加も簡単。 この記事では、Prism.jsを実際に入手して使う具体的な手順を、初心者向けに丁寧に解説します。 Prism.jsとは? Prism.jsは、コードにシンタックスハイライト(構文色付け)を加えるための軽量かつ高機能なJavaScriptライブラリです。 公式サイトでは、使いたい言語・テーマを選んで必要最小限の構成を自分で作成できます。 Prism.jsを入手する手順 以下の手順で、自分専用のPrism.jsファイルを入手できます。 以下のURLにアクセス: https://prismjs.com/download.html 使いたい言語(例:HTML、CSS、JavaScriptなど)にチェック プラグイン(任意):行番号、行ハイライトなどを選択 テーマを選択(おすすめ:Tomorrow、Okaidia など) 「Download JS」ボタンをクリックしてJavaScriptファイルを保存 「Download CSS」ボタンでテーマのCSSも保存 これで自分だけのPrism.js構成が完成します。 CDNで簡単に使いたい場合 まずは試してみたいという方は、CDN経由で読み込むのがおすすめです。 コピー <!-- Prism CSS(テーマ) --> <link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css" rel="stylesheet" /> <!-- Prism.js本体 --> <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script> <!-- 必要な言語(例:CSS、JS) --> <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-css.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script> WordPressの場合:header.phpまたはfooter.phpに貼り付けます。 コードの書き方 記事内で表示したいコードは、<pre><code>タグで囲い、クラスにlanguage-○○を付けます。 コピー <pre><code class="language-html"> <div class="box">Hello!</div> </code></pre> これだけで、ハイライト表示が自動的に適用されます。 人気テーマの一覧 Prismには多数のテーマが用意されています: prism.css(標準) prism-tomorrow.css(ダーク) prism-okaidia.css(黒×紫系) prism-coy.css(明るめポップ) 行番号を表示したい場合 以下を追加することで行番号を表示できます: コピー <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet" /> <pre class="line-numbers"><code class="language-css"> body { margin: 0; } </code></pre> 注意点とアドバイス ビジュアルエディターでは崩れやすい:テキストモードでの入力推奨 多くの言語を読み込むと重くなる:必要なものだけに絞る WordPressテーマのCSSと干渉する場合:Prismのスタイルが優先されるように工夫が必要 おわりに Prism.jsは、軽量・シンプル・美しいという3拍子揃ったコード装飾ライブラリです。 特に技術系ブログやポートフォリオにおいて、読みやすさや信頼感を高めてくれます。 ぜひPrism.jsを導入して、あなたの記事やサイトの魅力をさらに引き立てましょう!

  • CSSでマーカー風に文字を装飾する方法|注目を集めるデザインテク

    Webサイトで目立たせたい言葉があるとき、「マーカーで引いたような演出」があると便利ですよね。 実はこれ、CSSだけで簡単に実装できるんです。この記事では、CSSでマーカー風の文字装飾を作る方法を紹介します。 基本:背景色でマーカー風にする まずは一番シンプルな方法。backgroundプロパティで文字の背景に色をつけます。 コピー .marker { background: yellow; } この方法は簡単ですが、マーカーのような「下線寄りの塗り」は難しく、行の高さによって見た目が不自然になることもあります。 発展:linear-gradientで下部だけ塗る マーカーっぽい下部だけの装飾は、linear-gradientを使うと実現できます。 コピー .marker-gradient { background: linear-gradient(transparent 60%, #fce38a 60%); } 透明部分と色付き部分を60%ずつに区切り、文字の下半分だけを塗るような演出が可能になります。 複数行対応のマーカースタイル 複数行にまたがるテキストでマーカーを使いたい場合、少し工夫が必要です。 コピー .marker-multiline { background: linear-gradient(transparent 60%, #f9f871 60%); background-repeat: no-repeat; background-size: 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0.2em; } box-decoration-break: cloneを使うことで、行が折り返された場合でもマーカーが綺麗に続きます。 応用:選択時だけマーカー風にする テキスト選択時(ドラッグして反転したとき)にマーカー風の色を出すこともできます。 コピー ::selection { background: #ffe666; color: #000; } デフォルトの青い反転を、自サイトのカラーに合わせたマーカー風にカスタマイズ可能です。 初心者が気をつけたいポイント 背景色とのバランス:背景色と文字色が近すぎると読みにくくなるため、コントラストに注意 多用しすぎない:強調しすぎると読者がどこを見ればいいか迷ってしまう フォントサイズとの調整:小さすぎる文字だとマーカーが強すぎて不自然に見えることも おわりに CSSを使えば、シンプルなテキストでも強調演出や視線誘導が可能です。 マーカー風の装飾は、ちょっとした工夫で印象を変えられる便利なテクニック。ぜひ、見出しや注目キーワードに活用してみてくださいね。

  • Font Awesomeの使い方入門|アイコンの表示方法・サイズ変更・色の指定も解説

    Webサイトにアイコンを使いたいときに便利なのがFont Awesome(フォントオーサム)です。 矢印・電話・SNSロゴなど、豊富なアイコンを簡単に使える人気のライブラリです。この記事では、Font Awesomeの導入方法と基本的な使い方を初心者向けにわかりやすく解説します。 Font Awesomeとは? Font Awesomeは、WebサイトにアイコンフォントやSVGアイコンを追加できる無料のライブラリです。 多くの開発者やデザイナーに利用されており、以下のようなアイコンを簡単に表示できます: ソーシャルメディア(Twitter, Instagram, Facebook など) UIアイコン(ハンバーガーメニュー、検索、ゴミ箱など) 視覚的な補助アイコン(チェック、注意、ハートなど) CDNでFont Awesomeを導入する 公式サイトから提供されているCDNを使えば、HTMLファイルに1行追加するだけでアイコンが使えるようになります。 コピー <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> </head> ※最新版のURLはFont Awesome公式サイト(fontawesome.com)で確認しましょう。 基本的なアイコンの使い方 アイコンを表示するには、<i>タグまたは<span>にクラス名を追加します。 コピー <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-phone"></i> <i class="fa-brands fa-twitter"></i> クラスの種類: fa-solid:実線アイコン fa-regular:線画スタイル fa-brands:ブランドロゴ(Twitter, YouTubeなど) アイコンサイズを変更する サイズを変更したいときは、クラスで指定することができます。 コピー <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-3x"></i> <i class="fa-solid fa-star fa-5x"></i> サイズ指定クラス(例:fa-2x, fa-3x)は、通常サイズの2倍・3倍…を意味します。 アイコンに色をつける アイコンは通常のテキストと同じようにCSSで色を変えられます。 コピー .fa-heart { color: red; } .fa-twitter { color: #1da1f2; } よく使うアイコン一覧 fa-solid fa-magnifying-glass(検索) fa-solid fa-envelope(メール) fa-brands fa-facebook(Facebook) fa-brands fa-line(LINE) 詳しくは公式の「アイコン一覧」を参照してください。 おわりに Font Awesomeを使えば、サイトに視覚的なアクセントを加えたり、ナビゲーションをわかりやすくできます。 無料で手軽に導入できるので、ぜひ積極的に使ってみてください。 次回は「SVG版Font Awesomeの使い方」や「WordPressでの導入方法」も紹介していきます!

  • WordPressオリジナルテーマでできる!基本のSEO対策10選【初心者向け】

    WordPressでオリジナルテーマを使うと、SEO対策も自分で自由に調整できます。 今回は、基本的かつ効果の高いSEO対策10項目と、それぞれの具体的な実装方法を紹介します。 SEO対策10項目とその実装例 ① タイトルタグの自動出力 functions.php に以下を追加することで、<title>が自動出力されるようになります。 コピー add_theme_support('title-tag'); ② メタディスクリプションの追加 header.php 内の <head> タグ内に、以下のように記述します。 コピー <meta name="description" content="このサイトは、初心者向けにHTMLとCSSを解説しています。"> ③ セマンティックなHTML構造 セクションやコンテンツの役割ごとに適切なHTML5タグを使用します。 コピー <main> <section> <h2>サービス紹介</h2> <p>...</p> </section> </main> ④ hタグの適切な使い分け <h1>はページに1つだけ。見出し階層は論理的に。 コピー <h1>サイトのタイトル</h1> <h2>サービス紹介</h2> <h3>トリミングについて</h3> ⑤ 画像にalt属性を追加 画像の内容を伝えるテキストをalt属性に記述します。 コピー <img src="dog.jpg" alt="元気な保護犬の写真"> ⑥ パンくずリストの設置 ナビゲーションの一部として以下のように記述。構造化データにも使えます。 コピー <nav class="breadcrumb"> <a href="/">ホーム</a> > <a href="/blog/">ブログ</a> > <span>この記事のタイトル</span> </nav> ⑦ JSON-LD構造化データの追加 header.php に以下を挿入して、検索結果に情報を渡します。 コピー <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "HPBUILD", "url": "https://www.hpbuild.net" } </script> ⑧ 表示速度の改善(画像の遅延読み込み) functions.php に以下を追加して、画像のLazyLoadを有効にします。 コピー add_filter('wp_lazy_loading_enabled', '__return_true'); ⑨ モバイル対応 <head>内に以下のviewportタグを記述し、レスポンシブ対応をします。 コピー <meta name="viewport" content="width=device-width, initial-scale=1.0"> ⑩ SEOプラグインの導入 All in One SEOやYoast SEOをインストールすると、タイトル・メタ情報・構造化データなどをGUIで設定可能になります。 コピー プラグイン > 新規追加 > 「All in One SEO」または「Yoast SEO」で検索してインストール まとめ オリジナルテーマだからこそ、SEO対策も自分の手で柔軟に調整できます。まずは①〜⑤の基本対策から着手し、⑥〜⑩へと段階的に進めていくと無理なく実装できます。 次回は「SEOスコアを上げるLighthouse対策」や「検索結果に目立つ構造化データ活用法」について解説予定です。

  • CSSだけで作るアコーディオンメニュー|チェックボックスで簡単実装!

    JavaScriptを使わずに、CSSだけでアコーディオンメニューを実装できるって知っていましたか?この記事では、チェックボックス(input)を使ったシンプルで軽量なアコーディオンの作り方をご紹介します。 アコーディオンメニューとは? クリックするとメニューの中身が表示・非表示に切り替わるUIのことです。FAQやサイドメニュー、スマホナビゲーションなどによく使われます。 HTML構造 コピー <div class="accordion"> <input type="checkbox" id="toggle1"> <label for="toggle1">項目1</label> <div class="content"> 内容がここに入ります。 </div> </div> CSSで開閉の制御を実装 :checked疑似クラスと兄弟セレクタ(+)を使って表示を切り替えます。 コピー .accordion .content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .accordion input:checked + label + .content { max-height: 200px; /* 必要に応じて調整 */ } スタイル調整例 コピー .accordion label { display: block; background: #f0f0f0; padding: 10px; cursor: pointer; font-weight: bold; } .accordion .content { padding: 10px; background: #fff; border: 1px solid #ccc; } チェックボックスの非表示化 チェックボックスそのものは非表示にして、ラベルだけをクリック可能にします。 コピー .accordion input[type="checkbox"] { display: none; } おわりに JavaScript不要でアコーディオンを実装できるこの方法は、表示速度や保守性の面でも有利です。シンプルなUIを作りたいときにぜひ活用してみてください。 次回は「CSSだけで作るタブ切り替え」もご紹介予定です!

1 2 3 7