HPBUILD

HTMLとCSSでレイアウトを組んでいると、「ボタンが後ろに隠れてクリックできない」「画像がポップアップの前に表示されてしまう」といった、要素の重なり順で困ることがありますよね。 そんなときに役立つのが z-index（ゼットインデックス）です。このプロパティを使えば、要素の「重なり順」をコントロールできます。 z-indexとは？ z-indexは、要素の前後の重なり順を決めるCSSプロパティです。数値が大きいほど前面、小さいほど背面に表示されます。 ただし、positionプロパティ（relative, absolute, fixed, sticky）とセットで使う必要があります。 基本パターン例 ① 要素を前面に出すz-indexの基本 コピー .box1 { position: relative; z-index: 1; } .box2 { position: relative; z-index: 10; } この場合、.box2は.box1よりも手前に表示されます。 ② 実践例：重なるボックスの順番を制御 コピー <div class="red-box">赤</div> <div class="blue-box">青</div> コピー .red-box { position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: red; z-index: 5; } .blue-box { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background: blue; z-index: 10; } このようにz-indexの値で「どちらが前に表示されるか」を明確にできます。 z-indexの注意点 positionが未指定の場合、z-indexは無効になります。 親要素のz-indexが低いと、子要素のz-indexが高くても前面に出ないことがあります。 要素が重なっていてクリックできないときは、z-indexだけでなくpositionやoverflowの設定も確認しましょう。 おわりに z-indexを使いこなすと、ポップアップ、ドロップダウンメニュー、モーダルなどの実装がとてもスムーズになります。 まずは「position + z-index」の組み合わせを試しながら、重なり順の制御に慣れていきましょう！ 次回は「z-indexのスタッキングコンテキスト」や「親子関係による影響」など、さらに深い内容を解説予定です！

「テキストを真ん中に表示したいのに、なかなか思い通りにならない…」 そんな悩みは、Web制作初心者にとってあるあるのひとつです。CSSには、横・縦・上下の中央寄せを行うためのいくつかのテクニックがあります。 この記事では、テキストを中央に配置するための基本的な方法と、それぞれの違いや使いどころを、やさしく丁寧に解説していきます。 横方向の中央寄せ：text-alignが基本 テキストだけを中央に寄せたい場合、もっともシンプルでよく使われる方法がtext-align: center;です。 <div style="text-align: center;"> <p>横方向に中央寄せされたテキスト</p> </div> この方法は、段落や見出しなどのインライン要素やテキストに有効です。 ただし、中央に寄せたいものがボタンや画像、ブロック要素であれば、margin: auto;やFlexboxのほうが柔軟に使えます。 縦・横を同時に中央寄せ：Flexboxが最強 縦と横の両方を中央にしたいときは、Flexboxを使うと簡単です。 <div style="display: flex; justify-content: center; align-items: center; height: 200px;"> <p>上下中央のテキスト</p> </div> justify-contentは横方向、align-itemsは縦方向の揃え方を指定します。 コンテナに高さが必要なので、heightの指定も忘れずに。 transformで中央寄せする方法（旧来の手法） positionとtransformを使って、中央に配置することも可能です。 <div style="position: relative; height: 200px;"> <p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> 中央のテキスト </p> </div> この方法は、Flexboxよりも少し複雑ですが、古いブラウザにも対応しているという利点があります。 ただし、要素が絶対配置になるため、親要素との位置関係に注意が必要です。 どれを使えばいい？用途別に選ぼう テキストだけを横に中央寄せしたい → text-align: center; 要素を縦横どちらも真ん中に配置したい → Flexbox（おすすめ） 古いレイアウトで位置を細かく調整したい → transform + position 注意点とアドバイス Flexboxは親要素にdisplay: flex;を指定しないと効果が出ません。 上下中央寄せは、親要素の高さが明示されている必要があります。 transformを使う場合、ブラウザによって細かな違いが出ることがあります。 おわりに テキストの中央寄せは、見た目のバランスや読みやすさを大きく左右します。 レイアウトの状況や要素の種類によって、最適な方法を選ぶことが大切です。 今回紹介した3つの方法（text-align・Flexbox・transform）を覚えておけば、ほとんどの中央寄せには対応できます。ぜひ実際のWeb制作で試してみてくださいね！

HTMLとCSSでレイアウトを整えようとするとき、よくわからなくなるのがdisplayプロパティ。 「なぜ要素が横並びにならない？」「marginを指定しても効かない？」といった悩み、実はこのプロパティと深く関係しています。 この記事は、初心者の方向けに「displayって何？」「どんな種類がある？」「どう使い分ける？」をやさしく解説します。 displayとは？ displayは、HTML要素がどんな「箱」になって表示されるかを指定するCSSプロパティです。 例えば段落（p）や見出し（h1）は**ブロック要素**、リンク（a）やspanは**インライン要素**として振る舞うよう、ブラウザが初めから決めています。 よく使われるdisplayの種類 block：横幅いっぱいに広がり、上下で改行される inline：テキストと同じ行に収まり、サイズ指定が効かない inline‑block：インラインのように並ぶが、width／height指定も可能 flex：子要素を柔軟に並べる（行・列・間隔の制御が得意） grid：行と列で複雑なレイアウトが組める（高度な配置に最適） ① blockの例 display: block;は改行されて縦に要素が並ぶので、段落やボックス系に使われることが多いです。 コピー <div style="background: lightblue;">ブロック1</div> <div style="background: lightgreen;">ブロック2</div> → 「ブロック1」「ブロック2」が縦に並びます。 ② inlineの例 spanやリンク（a）などのインライン要素はテキストと同じ行に並び、横方向に収まります。ただしwidth／height指定は効きません。 コピー <span style="background: pink;">インライン1</span> <span style="background: yellow;">インライン2</span> ③ inline‑blockの例 セパレートなボックスを横に並べたいけど、幅・高さ指定もしたいときに便利です。 コピー <span style="display: inline-block; width:100px; height:50px; background: lightcoral;">箱1</span> <span style="display: inline-block; width:100px; height:50px; background: lightseagreen;">箱2</span> ④ flexの例 display: flex;を指定すると、子要素が横並びになり、gapで簡単に間隔も取れます。レイアウトの柔軟性が高いです。 コピー <div style="display: flex; gap: 10px;"> <div style="background: salmon; padding: 10px;">アイテム1</div> <div style="background: skyblue; padding: 10px;">アイテム2</div> </div> ⑤ gridの紹介 複雑な配置や2次元レイアウトを行うならdisplay: grid;も強力です。別の記事で詳しく解説予定！ 用途・使い分けのポイント 横並びだけなら → inline‑blockやflex 幅／高さを指定したい → inline‑blockかflex 余白や位置調整もしたい → flexが最も扱いやすい 複雑なグリッド配置 → gridを使いましょう 注意点 標準の要素（p, h1, spanなど）はデフォルトdisplayがあることを覚えておくと理解しやすい display: inlineではwidth／heightが効かないので注意 flexでは親要素にdisplay: flex;が必要です おわりに displayはWebレイアウトの基本中の基本です。 block／inlineの違い、inline‑blockで箱を並べる方法、flexで柔軟に扱う方法をしっかり押さえておけば、多くのレイアウトに対応できます。 次回は、display: grid;を使った**2列・3列のカードレイアウト**の作り方も紹介する予定ですので、お楽しみに！

HTMLでコーディングしていると、「後で修正する場所をメモしておきたい」、「一時的に特定のパーツを非表示にしたい」といった場面によく出会います。 そんなときに便利なのが <!-- コメント --> 構文です。 コメントを使えば、HTMLの中にメモや説明を書いたり、コードの一部を簡単に「無効化」したりすることができます。 HTMLコメントの基本構文 HTMLでは、以下のような書き方でコメントを挿入します。 コピー <!-- ここにコメントを書く --> この内容はブラウザには表示されず、HTMLのソースコード上でのみ確認できます。 HTMLコメントの主な使い方 ① コードに説明やメモを残す 今後の修正やチーム開発での共有のために、コメントを残しておくと便利です。 コピー <!-- このセクションは後日差し替える予定 --> <section class="news"> <h2>お知らせ</h2> </section> ② 一時的にコードを無効にする（コメントアウト） 一部のHTMLを一時的に非表示にしたいときに使います。コードを削除せずに「保留」できます。 コピー <!-- <div class="banner"> キャンペーン情報 </div> --> ③ セクションごとに区切りを入れる HTMLが長くなってきたとき、構造をわかりやすく整理するために区切りを入れると、メンテナンスが楽になります。 コピー <!-- ▼ ヘッダーエリア開始 --> <header> <h1>サイトタイトル</h1> </header> <!-- ▲ ヘッダーエリア終了 --> HTMLコメントの注意点 コメントの中に --（ハイフン2つ）は入れないようにする 例：<!-- 誤：--ダメ --> → 正常に動かないことがあります。 SEOや表示速度には基本的に影響しません ただしコメントが多すぎると、ソースコードが読みにくくなる可能性があります。 パスワードや機密情報は絶対に書かない コメントは開発者ツールなどから誰でも見られるため、セキュリティに注意しましょう。 HTMLコメントは表示される？ コメントは、ユーザーが通常見るページ上には表示されませんが、右クリック→「ページのソースを表示」などで確認可能です。 つまり、内部的な開発メモや非公開の情報のように見えても、誰でも見ることができる点には注意してください。 おわりに HTMLコメントはとてもシンプルな機能ですが、開発効率や保守性を大きく向上させてくれます。 個人開発でもチーム制作でも、丁寧なコメントは信頼されるコーディングの第一歩です。 次回は、CSSやJavaScriptでのコメントの書き方についても紹介する予定です。どうぞお楽しみに！

Webサイトで「名前」や「メールアドレス」を入力してもらいたいときに欠かせないのが HTMLフォーム です。 この記事では、初心者の方でもすぐに理解できるように、<form> を中心に、<input>・<label>・<button> の使い方を基礎から解説していきます。 フォームの基本構造 以下のコードが、もっとも基本的なフォームの形です。 コピー <form action="/submit" method="post"> <label for="name">お名前：</label> <input type="text" id="name" name="name"> <label for="email">メールアドレス：</label> <input type="email" id="email" name="email"> <button type="submit">送信</button> </form> action属性には「送信先のURL」を指定し、methodには「送信方式（通常はpost）」を指定します。 よく使うinputタイプ <input>タグは入力フィールドを作るために使われます。type属性を変えるだけでさまざまな入力が可能です。 type属性用途・特徴 text1行のテキストを入力（例：名前） emailメールアドレス入力用。形式が違うとエラーになります password入力文字が「●」で隠れる checkboxチェックボックス（複数選択可） radioラジオボタン（単一選択） labelタグの役割とは？ <label>タグは、入力欄に説明を添えるためのタグです。 for属性にinputのidを指定することで、ラベルをクリックしたときに対応する入力欄が選択状態になります。 これはアクセシビリティ（画面読み上げなど）にも効果的なので、なるべく使うのがおすすめです。 フォームのボタン <button>タグには主に次の2種類があります。 type="submit"：フォームを送信する type="reset"：入力内容をすべてリセットする コピー <button type="submit">送信</button> <button type="reset">リセット</button> フォーム作成のポイント それぞれのinputにname属性を必ずつけましょう（データ送信に必要） labelで説明をつけると、ユーザーに優しい 複数の入力項目を含む場合はfieldsetやlegendタグの使用もおすすめ おわりに HTMLフォームは、ユーザーから情報を受け取るために欠かせない要素です。 今回紹介した form・input・label・button を組み合わせることで、基本的な入力フォームはすぐに作成できます。 次回は、select・textarea・fieldsetといったより応用的なフォーム部品についても詳しく紹介していきます！

Webページで画像を表示させたいときに使うのが <img>タグ です。 この記事では、画像を表示するための基本的な構文と、よく使う属性、SEO対策としても重要なポイントを初心者向けにやさしく解説します。 <img>タグの基本構文 画像を表示する最もシンプルな構文は以下のようになります。 コピー <img src="画像のURL" alt="画像の説明文"> <img>は終了タグ（</img>）が不要な「空要素」です。1行で完結するのが特徴です。 主な属性とその役割 <img>タグにはいくつかの属性を指定することで、画像の表示方法を細かく調整できます。 属性意味・使い方 src画像のファイルパス。絶対パス・相対パスどちらも使用可能。 alt画像の代替テキスト。画像が表示できないときの補足情報として表示される。 width画像の横幅（px または %）。 height画像の縦幅（px または %）。 画像を表示してみよう 実際に画像を表示する例を見てみましょう。 コピー <img src="images/sample.jpg" alt="サンプル画像" width="300" height="200"> このコードでは、幅300px・高さ200pxの画像がページ上に表示されます。 CSSで画像サイズを調整する方法 HTML属性の代わりに、CSSでサイズを制御するのも一般的です。特にレスポンシブ対応（スマホでの見た目調整）にはCSSのほうが柔軟です。 コピー <img src="images/sample.jpg" alt="スタイル付き画像" class="responsive-img"> コピー .responsive-img { width: 100%; height: auto; } このようにすると、画面の幅に合わせて画像が自動調整されます。 alt属性の重要性とSEO alt属性は、画像の意味を説明するためのテキストです。 スクリーンリーダーが内容を読み上げてくれるため、アクセシビリティの向上につながります。 Googleのクローラーが画像内容を理解するヒントになるため、SEO対策としても重要です。 altの内容は、画像の「意味」を簡潔に説明するのが理想です（例：alt="店舗外観の写真"）。 画像が表示されないときのチェックポイント srcのパスが間違っていないか確認（大文字・小文字や拡張子にも注意） ファイルがサーバー上にアップされているか alt属性で代替テキストが表示されるか おわりに <img>タグは、Webページで画像を表示するための基本中の基本ですが、正しい書き方や属性の使い方を意識するだけで、見た目や使いやすさが大きく変わります。 次回は、レスポンシブ画像対応やWebP形式の活用など、より実践的な画像テクニックもご紹介していきます。ぜひお楽しみに！

Webサイトを作るとき、商品一覧や手順の説明などを「箇条書き」で見せたい場面は多いですよね。 そんなときに役立つのが HTMLのリストタグです。この記事では、<ul>・<ol>・<li> それぞれの役割や使い分け、装飾のコツまで初心者向けにやさしく解説します。 リストタグの基本 <ul>：順序なしリスト（unordered list）… 点（●）で箇条書き <ol>：順序ありリスト（ordered list）… 数字で並ぶ手順や工程 <li>：リスト項目（list item）… 個別の内容を囲む 順序なしリスト（ul）の使い方 買い物リストや特徴の列挙に適しています。 コピー <ul> <li>パン</li> <li>チーズ</li> <li>ワイン</li> </ul> 表示例： パン チーズ ワイン 順序ありリスト（ol）の使い方 ステップや優先順位があるものに向いています。 コピー <ol> <li>下準備をする</li> <li>材料を混ぜる</li> <li>焼き上げる</li> </ol> 表示例： 下準備をする 材料を混ぜる 焼き上げる 入れ子（ネスト）リストで階層化 リストの中にリストを作って、項目を分類することもできます。 コピー <ul> <li>フルーツ <ul> <li>りんご</li> <li>バナナ</li> </ul> </li> </ul> CSSでリストの見た目を変える 初期状態では「●」や「数字」が表示されますが、CSSでカスタマイズ可能です。 コピー ul { list-style-type: square; /* 四角い点に変更 */ } ol { list-style-type: upper-roman; /* ローマ数字に変更 */ } その他にも disc（黒丸）、circle（白丸）、decimal-leading-zero（01, 02…）など、種類は豊富です。 実用上のポイント 視認性が高く、情報が整理されるのでユーザーにとって親切 音声読み上げにも対応しやすく、アクセシビリティが高い CSSで装飾すればオリジナルデザインのメニューにも応用可能 おわりに HTMLのリストタグは、ただの箇条書きだけでなく、手順・ナビゲーション・FAQ構造など、さまざまな場面で活躍します。 <ul>と<ol>を使い分けて、読みやすく整理されたWebページを作っていきましょう。 次回は、<dl>タグを使った「定義リスト」や、「カスタムアイコンでの装飾」についても解説予定です。お楽しみに！

CSSでWebページのレイアウトを整えるとき、必ず知っておきたいのがボックスモデルです。 「余白の調整がうまくいかない」「要素が想定より大きく表示される」…そんな悩みも、ボックスモデルを理解すればスッキリ解決できます。 ボックスモデルとは？ HTMLの要素は、すべて「四角い箱（ボックス）」として表示されます。このボックスは、次の4つの層でできています。 Content（内容）：テキストや画像などの中身 Padding（内側の余白）：内容と枠線の間のスペース Border（枠線）：ボックスの外枠 Margin（外側の余白）：他の要素との間隔 ボックスモデルのイメージと基本コード 以下のようなコードで、各部分の違いが実際に確認できます。 コピー .box { width: 300px; padding: 20px; border: 2px solid #333; margin: 30px; } それぞれの役割を詳しく解説 ① padding（内側の余白） コンテンツと枠線の間にスペースを作るプロパティです。 コピー .example { padding: 20px; } 背景色をつけたとき、この余白部分も塗りつぶされます。 ② border（枠線） ボックスの外枠を線で囲むためのプロパティです。線の太さ・色・種類を組み合わせて指定できます。 コピー .example { border: 1px dashed #999; } ③ margin（外側の余白） 隣り合う要素との間にスペースを確保するためのプロパティです。 コピー .example { margin: 30px; } 上下左右個別に設定するには、margin-topやmargin-leftなどを使います。 box-sizingでサイズのズレを防ごう デフォルトの状態では、指定したwidthは「contentの幅」だけを指します。つまり、paddingやborderの分だけボックスは大きくなってしまいます。 これを避けるためには、以下のようにbox-sizing: border-box;を指定すると便利です。 コピー * { box-sizing: border-box; } この指定をすると、widthにpaddingとborderも含めて計算されるため、サイズ調整が簡単になります。 実用上のポイントと注意点 paddingとmarginは、レイアウトや余白を決めるための基本操作 borderは視覚的な区切りや装飾にも使える box-sizing: border-box;はほぼすべての案件で推奨 おわりに ボックスモデルを理解すると、要素の表示崩れやサイズのズレを防ぎやすくなります。 padding、border、marginの違いをきちんと押さえておくことで、CSSレイアウトがぐっとやりやすくなります。 次回は、Flexboxを使った横並びや、要素の中央寄せなど、さらに実践的なテクニックを紹介していきます。お楽しみに！