HPBUILD

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の関係」「レスポンシブ対応での注意点」など、さらに深掘りした内容を紹介します！

HTMLとCSSでレイアウトを組むとき、「要素を横並びにしたい」「中央寄せにしたい」と思ったことはありませんか？ そんなときに便利なのが Flexbox（フレックスボックス） です。この記事では、初心者の方でもすぐに使えるように、Flexboxの基本とよく使うレイアウトパターンをやさしく紹介します。 Flexboxとは？ Flexboxは、親要素にdisplay: flex;を指定することで、子要素を柔軟に配置できるCSSの仕組みです。 コピー <div class="flex-container"> <div>子1</div> <div>子2</div> <div>子3</div> </div> コピー .flex-container { display: flex; } よく使うFlexboxの基本プロパティ プロパティ意味 display: flex;フレックスレイアウトにする justify-content横方向の配置（左寄せ・中央・右寄せ） align-items縦方向の揃え方 flex-direction並び方向（横 or 縦） gap子要素の間隔 基本パターン例 ① 横並び＆中央揃え コピー .flex-container { display: flex; justify-content: center; align-items: center; } コピー <div class="flex-container"> <div>BOX1</div> <div>BOX2</div> </div> ② 縦並びにしたい（カラム方向） コピー .flex-container { display: flex; flex-direction: column; justify-content: center; } ③ 間隔をあけて均等に並べたい コピー .flex-container { display: flex; justify-content: space-between; } ④ 子要素の幅を均等にしたい コピー .flex-container > div { flex: 1; } ⑤ 子要素を折り返す コピー .flex-container { display: flex; flex-wrap: wrap; } おわりに Flexboxは「パッと並べたい！」を簡単に叶えてくれる強力なツールです。初めての方は、今回紹介した基本パターンをベースに、少しずつ応用を試してみてください。 今後は「Flexbox × レスポンシブデザイン」「Gridとの違いと使い分け」など、さらに実践的な内容も紹介していきます！

HTMLとCSSでWebページを作っていると、「なんでこの余白が入ってるの？」「ブラウザによって見え方が違う！」といった経験はありませんか？ それは、ブラウザごとに用意されている初期スタイルが原因かもしれません。そんなときに役立つのがリセットCSSです。 リセットCSSとは？ リセットCSSとは、各ブラウザにあらかじめ用意されているデフォルトのスタイル（User Agent Stylesheet）を初期化するためのCSSです。これを適用することで、すべてのブラウザでほぼ同じ見た目をスタートラインにでき、デザインのズレを防ぐことができます。 なぜ必要なの？ ブラウザによって初期マージン・パディングが違う フォームやリストなどの表示が環境によって異なる 余計なスタイルを消して、自分のスタイルを正しく適用したい リセットCSSを使うことで、どのブラウザでも一貫性のあるデザインが実現しやすくなります。 代表的なリセットCSS ここでは、有名な2つのリセットCSSをご紹介します。 1. Meyer’s Reset CSS Web制作者の間では定番のリセットCSSです。 コピー /* https://meyerweb.com/eric/tools/css/reset/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } かなり強力にスタイルを初期化するため、必要な要素の装飾まで消えてしまうこともあります。 2. Normalize.css リセットではなく「標準化」に近いアプローチを取っているのがNormalize.cssです。 フォームや見出しなどの基本スタイルを整えつつ、見た目を揃えてくれます。過剰なリセットを避けたい場合におすすめです。 自作リセットCSSの例 必要最低限のリセットだけを使いたい場合、自分でカスタムするのもよい方法です。 コピー *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: sans-serif; line-height: 1.6; background-color: #fff; color: #333; } img { max-width: 100%; height: auto; display: block; } box-sizing: border-boxは特に便利で、レイアウト崩れを防ぐために多くの現場で採用されています。 導入のタイミングと方法 リセットCSSは、プロジェクトのCSSの一番最初に読み込むのが基本です。ファイルを分ける場合は以下のように読み込みます。 コピー <link rel="stylesheet" href="reset.css"> CDNを利用する場合は、Normalize.cssのように直接読み込むこともできます。 まとめ リセットCSSは、Web制作において見た目のズレや意図しないスタイルを防ぐための大事な下準備です。 シンプルなサイト → 自作リセットCSSでOK 大規模・チーム開発 → Normalize.cssやMeyer’s CSSを利用 一度導入しておけば、余計なトラブルも減り、開発がスムーズになります。ぜひあなたのプロジェクトにも取り入れてみてください！

HTMLではdivタグで囲まれたブロックや、aリンクで作成したボタンといった要素に対して、CSSでpaddingやmarginを指定することで”余白”を設けることができます。   この記事では初心者向けに   paddingとは何か？ marginとは何か？ padding、marginの使い方 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！   目次 1paddingについて解説 2marginについて解説 paddingについて解説 paddingを指定すると、要素の内側に余白を設けることができます。「要素の内側」という表現がイメージ付きづらいと思うため、以下の具体例を見てみて下さい。 paddingを用いた具体例 (1)最初に、以下の様なdivタグで囲まれたaリンクを3つ用意します。 HTML <div class="btn1_area"> <a href="#" class="btn1">これはボタン1です</a> </div> <div class="btn2_area"> <a href="#" class="btn2">これはボタン2です</a> </div> <div class="btn3_area"> <a href="#" class="btn3">これはボタン3です</a> </div> CSS a.btn1{ display:inline-block; } a.btn2{ display:inline-block; } a.btn3{ display:inline-block; } (2)WEBページでは以下の様に表示されます（出力イメージ） (3)aリンクのbtn1クラスに対してpaddingを指定します CSS a.btn1{ display:inline-block; padding:10px 30px 10px 30px;/*上に10px、右に30px、下に10px、左に30pxの余白を設定する*/ } a.btn2{ display:inline-block; } a.btn3{ display:inline-block; } (4)WEBページでは以下の様にpaddingが反映されます（出力イメージ） つまりaリンクの例で言うと、paddingを指定することでボタンの内側の上下左右に余白を設けることが出来ます。 marginについて解説 marginを指定すると、要素の外側に余白を設けることができます。「要素の外側」という表現についても分かりづらいと思うため、まずは先の例と同様に具体例を見て下さい。 marginを用いた具体例 (1)前提として、以下の様にdivタグで囲まれたaリンクを3つ用意します。 HTML <div class="btn1_area"> <a href="#" class="btn1">これはボタン1です</a> </div> <div class="btn2_area"> <a href="#" class="btn2">これはボタン2です</a> </div> <div class="btn3_area"> <a href="#" class="btn3">これはボタン3です</a> </div> CSS a.btn1{ display:inline-block; } a.btn2{ display:inline-block; } a.btn3{ display:inline-block; } (2)WEBページでは以下の様に表示されます（出力イメージ） (3)aリンクのbtn2クラスに対してmarginを指定します CSS a.btn1{ display:inline-block; } a.btn2{ display:inline-block; margin:10px 30px 50px 30px;/*上に10px、右に30px、下に50px、左に30pxの余白を設定する*/ } a.btn3{ display:inline-block; } (4)WEBページでは以下の様にmarginが反映されます（出力イメージ） つまりmarginを指定すると、ボタンの外側の上下左右に余白を設けることが出来ます。これはmarginおよびpadding共に、divタグなどの他の要素にも同様の効果があります。   以上となります。

Webサイトでよく見かける、「マウスを乗せたときに色が変わる」「画像がふんわり拡大する」といった演出。これらは、CSSの:hover（ホバー）という仕組みを使えば簡単に実装できます。 JavaScriptを使わずに、HTMLとCSSだけで視覚的な変化を加えることで、ユーザーの操作感を高めたり、クリック誘導率（CTR）をアップさせたりすることが可能です。 今回は、初心者でもわかりやすいように、:hoverの基本から応用まで、ステップごとに解説します。 :hoverとは？ :hoverは、CSSで使える疑似クラスの1つで、「ユーザーが要素にマウスカーソルを重ねた時」にスタイルを変更できる機能です。 主に以下のような場面で利用されます： ボタンの色を変える 画像を拡大・回転させる リンクテキストに下線やアニメーションを加える これにより、Webページ全体にインタラクティブな印象を与えることができます。 基本的な使い方（背景色の変化） まずは最も基本的な例として、リンクボタンの背景色をマウスホバー時に変更する方法を紹介します。 コピー <a href="#" class="btn">マウスを乗せてね</a> コピー .btn { display: inline-block; background: #3498db; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px; transition: background 0.3s; } .btn:hover { background: #2980b9; /* ホバー時の色 */ } transitionプロパティを使うことで、色の変化がスムーズに見えるようになり、ユーザー体験も向上します。 画像を拡大させるアニメーション 次に紹介するのは、画像をhoverで少しだけ拡大するアニメーションです。ギャラリーや商品画像の演出にも活用できます。 コピー <img src="sample.jpg" class="zoom" alt="画像拡大例"> コピー .zoom { transition: transform 0.3s ease; } .zoom:hover { transform: scale(1.1); /* 1.1倍に拡大 */ } transformとtransitionを組み合わせることで、視覚的な印象が自然でやわらかくなります。 透明度でフェード効果をつける リンクやボタンをホバーしたときに、少し透明にすることで、「押せそうな雰囲気」を演出できます。 コピー .fade:hover { opacity: 0.6; transition: opacity 0.3s; } このようにすることで、クリック可能な要素であることを直感的にユーザーに伝えることができます。 hoverの注意点とベストプラクティス スマートフォンなどのタッチデバイスでは:hoverが効かないこともある 目立たせたい要素（CTAボタンなど）には必ずhover効果を付けるのが◎ transitionで自然な動きを加えるとユーザーにとってやさしい おわりに :hoverは、CSSの中でも基本かつ強力な機能の一つです。マウスを乗せたときの見た目の変化だけでなく、ユーザーの視線誘導や操作性の向上にもつながります。 今回紹介した基本例（背景色変更・拡大・透明化）をベースに、アニメーションやレスポンシブ対応などの応用もぜひ挑戦してみてください。 次回は「クリック時に動作を変える:activeの使い方」や「CSSアニメーションとの組み合わせ」など、もう一歩進んだ活用法をご紹介予定です！