HPBUILD

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を使った横並びや、要素の中央寄せなど、さらに実践的なテクニックを紹介していきます。お楽しみに！

HTMLとCSSでWebページのデザインを整えるとき、どの要素にどんなスタイルを適用するのかを指示する必要があります。 そのときに使うのがCSSセレクタです。この記事では、初心者でも理解しやすいように、基本のセレクタとその使い方を丁寧に解説します。 CSSセレクタとは？ CSSセレクタは「どのHTML要素にスタイルを当てるか」を指定するための仕組みです。 たとえば、すべての<p>タグの文字色を青くしたいときは、以下のように書きます。 コピー p { color: blue; } よく使うCSSセレクタ一覧 CSSセレクタにはさまざまな種類があります。ここでは、Web制作の現場で特によく使われるものを紹介します。 セレクタの種類例説明 タグセレクタp特定のHTMLタグすべてにスタイルを適用 クラスセレクタ.boxclass属性が「box」の要素に適用 IDセレクタ#mainid属性が「main」の要素に適用（ページ内1つ限定） 子孫セレクタdiv pdiv内のすべてのp要素に適用 子セレクタul > liul直下のli要素だけに適用 具体的な使い方とコード例 ① タグセレクタで段落の文字色を変更 ページ内の<p>要素すべてに色を適用します。 コピー p { color: #333; } ② クラスセレクタで共通デザインを指定 複数の要素に共通のデザインを当てたいときに便利です。 コピー .box { background-color: #f0f0f0; padding: 20px; } ③ IDセレクタで特定エリアを装飾 idは1ページに1回だけ使える、ユニークな識別子です。 コピー #main { max-width: 800px; margin: 0 auto; } ④ 子孫セレクタで特定の範囲内だけに適用 例えば<article>内の<p>タグだけにスタイルを当てたい場合。 コピー article p { line-height: 1.8; } ⑤ 子セレクタで第一階層だけに適用 入れ子のリスト構造の中で、最上位の項目だけにスタイルを当てたい場合に使います。 コピー ul > li { list-style-type: square; } 補足：セレクタの使い分けのコツ クラスセレクタは複数要素に適用できるため、もっとも汎用性が高い IDセレクタは1ページに1回だけ使うルールを守る タグセレクタは指定範囲が広すぎると意図しない影響を与えることも おわりに CSSセレクタは、Webデザインの基本中の基本です。 しっかり理解しておくことで、スタイルの管理がしやすくなり、保守性の高いCSSが書けるようになります。 次回は、:hoverや:first-childなどの「疑似クラス」や、「属性セレクタ」といった応用的なセレクタにもチャレンジしてみましょう！

Webページをデザインするとき、「平坦な見た目から少しだけ立体感を出したいな」と感じたことはありませんか？ そんなときに便利なのが、CSSのbox-shadowプロパティです。 カードやボタンなどに影をつけることで、見た目に深みや奥行きを持たせることができます。 box-shadowとは？ box-shadowは、HTML要素に影（シャドウ）を加えるためのCSSプロパティです。 とくに、カードデザインやマテリアルデザイン、ホバーボタンの装飾などによく使われます。 基本構文と意味 box-shadowの書き方は次のようになります： コピー box-shadow: 水平距離 垂直距離 ぼかし 拡がり 色; 例えば、以下のように記述すると影が表示されます。 コピー .box { box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3); } 各値の役割 5px（水平距離）：右方向に影をずらす距離 5px（垂直距離）：下方向に影をずらす距離 10px（ぼかし半径）：影のぼけ具合（大きいほど柔らかい影に） 0（拡がり）：影の広がり（数値が正なら拡大、負なら縮小） rgba(0, 0, 0, 0.3)：影の色と透明度 応用：複数の影を重ねる方法 box-shadowは1つだけでなく、カンマで区切って複数指定することも可能です。 コピー .card { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.1); } このようにすると、手前と奥に2種類の影が重なり、より自然な立体感を演出できます。 実用例：ボタンのホバー演出に活用 影の変化は、マウスホバー（hover）時のインタラクションとしてもよく使われます。 コピー .button { background: #007bff; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; transition: box-shadow 0.3s ease; } .button:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } ボタンに影をつけるだけで、クリックしたくなるような印象になります。 便利なテクニック：内側に影をつける（inset） 影を内側に表示するには、insetキーワードを使います。 コピー .inner-shadow { box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2); } 内向きの影は、入力欄やパネル内の凹み表現などに便利です。 おわりに box-shadowは、ちょっとしたCSSの工夫でWebデザインにプロっぽさを加えることができる便利なプロパティです。 初心者でも扱いやすく、ボタン・カード・メニューなど、あらゆる場面で活躍します。 次回は、text-shadowによる文字の影表現や、影を活用したアニメーションテクニックについてもご紹介します！

プロフィール画像やアイコンを丸く表示したいと思ったことはありませんか？ CSSのborder-radiusを使えば、画像を簡単に円形にすることができます。 本記事では、画像を丸く見せるための基本テクニックと、見た目を整えるコツをわかりやすく紹介します。 border-radiusとは？ border-radiusは、HTML要素の角を丸くするためのCSSプロパティです。 数値や割合を指定することで、角を少しだけ丸くしたり、完全な円形にすることができます。 画像を円形にする基本の方法 次のように、画像にborder-radius: 50%;を指定することで、画像を丸く表示できます。 コピー <img src="example.jpg" class="circle-image" alt="プロフィール写真"> コピー .circle-image { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; } ポイント解説 widthとheightを同じ値（＝正方形）に設定すること border-radius: 50%;で円形に object-fit: cover;で画像を歪ませずに中央トリミング 枠線や影をつけて装飾する 円形画像は、見た目が単調になりがちです。borderやbox-shadowを加えると、より目立つデザインになります。 コピー .circle-image { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 4px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } 影の色や枠線の太さは、サイトの雰囲気に合わせて調整しましょう。 よくある失敗例と対処法 画像が楕円になる → 横幅と高さが不一致のままborder-radius: 50%を適用している可能性があります。正方形にしましょう。 画像が引き伸ばされる → object-fit: cover;を忘れずに指定します。 枠線だけ丸くならない → 親要素でなく<img>タグ自体にborder-radiusをつけてください。 応用：ホバーでアニメーションを加える ユーザーが画像の上にマウスを乗せたときに、少し拡大する演出をつけるとインタラクティブになります。 コピー .circle-image { transition: transform 0.3s ease; } .circle-image:hover { transform: scale(1.05); } ちょっとした動きがあるだけで、より現代的な印象になります。 まとめ border-radius: 50%で画像をまん丸にできる 画像は正方形＋object-fit: coverで整える 枠線や影をつければより洗練されたデザインに ホバーで拡大などの演出も可能 おわりに CSSだけでアイコンやプロフィール画像を美しく丸く表示することができるborder-radiusは、初心者にもおすすめのプロパティです。 Webサイトの印象をぐっとよくしてくれるテクニックなので、ぜひいろいろな場面で活用してみてください。 次回は、「画像の角を少しだけ丸くする方法」や「円形画像に文字を重ねる方法」など、さらに発展的な表現も紹介予定です！

HTMLとCSSでレイアウトを整えるとき、要素を特定の位置に配置したい場面がありますよね。 そんなときに使えるのが positionプロパティ です。この記事では、positionの基本と使い分けをやさしく解説します。 positionとは？ positionは、要素の配置方法を指定するCSSプロパティです。位置を調整するには、top、left、right、bottomと組み合わせて使用します。 主なpositionの種類と特徴 種類特徴 static初期値。通常の文書の流れに従って配置 relative元の位置を基準にして移動可能 absolute親要素（positionを持つ）を基準にして配置 fixed画面の表示位置に固定（スクロールしても動かない） stickyスクロール位置によって切り替わる 基本パターン例 ① relativeで少しだけずらす コピー .box { position: relative; top: 10px; left: 20px; } ② absoluteで親要素を基準に配置 コピー <div class="parent"> <div class="child">ここに固定</div> </div> コピー .parent { position: relative; } .child { position: absolute; top: 0; right: 0; } ③ fixedでページ右下に固定ボタン コピー .fixed-button { position: fixed; bottom: 20px; right: 20px; } ④ stickyでスクロール時に固定される見出し コピー .sticky-header { position: sticky; top: 0; background: white; z-index: 100; } おわりに positionプロパティを理解すると、自由なレイアウトが可能になります。初めはrelativeとabsoluteの違いから試してみるのがおすすめです。 次回は「positionとz-indexの関係」「レスポンシブ対応での注意点」など、さらに深掘りした内容を紹介します！