HPBUILD

「ページ内リンクをクリックしたとき、ふわっと目的地までスクロールさせたい」──そんなときに便利なのがスムーススクロールです。jQueryを使わなくても、JavaScriptだけで簡単に実装できます。 スムーススクロールとは？ スムーススクロールとは、ページ内リンクをクリックした際に、瞬間的に移動するのではなく、ゆっくりと滑らかにスクロールするアニメーションを指します。 HTMLの基本構造 まずはページ内リンクの例を確認しましょう。 コピー <a href="#section2">セクション2へ移動</a> <div id="section2"> ここが目的地！ </div> JavaScriptでスムーススクロールを実装 scrollIntoView()を使うと、スムースに目的地へ移動できます。 コピー document.addEventListener("DOMContentLoaded", () => { const links = document.querySelectorAll('a[href^="#"]'); links.forEach(link => { link.addEventListener("click", e => { e.preventDefault(); const targetId = link.getAttribute("href").substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth" }); } }); }); }); ポイント解説 e.preventDefault()：通常のジャンプ挙動を止める scrollIntoView({ behavior: "smooth" })：スムーススクロールを実行 古いブラウザに対応するには？ 古いブラウザ（IEなど）では scrollIntoView の behavior: "smooth" が効かないことがあります。その場合は polyfill や requestAnimationFrame を使った自作スクロール関数を使う方法もありますが、近年はモダンブラウザ中心なので基本は不要です。 おわりに スムーススクロールは、ユーザーにとって自然で心地よい体験を提供できます。jQueryを使わず、軽量な実装を目指すなら、今回の方法がおすすめです。 次回は「ページ上部に戻るボタンのスムーススクロール実装」など、応用テクニックも紹介します！

Webサイトを高速表示させるために効果的な方法のひとつが、画像の軽量化と遅延読み込み（Lazy Loading）です。この記事では、その基本的な考え方と実装方法をわかりやすく解説します。 画像の軽量化とは？ 画像の軽量化とは、見た目の品質を保ちつつ、ファイルサイズをできるだけ小さくすることです。表示速度の向上やデータ通信量の削減につながります。 主な方法 画像フォーマットを見直す（例：JPEG → WebP） 画像サイズを適切にリサイズ 圧縮ツールを使う（TinyPNG, Squoosh など） Lazy Loading（遅延読み込み）とは？ Lazy Loadingは、ページを開いた直後には見えない画像を、スクロールして見えるタイミングで読み込む手法です。 HTMLだけで実装する例 コピー <img src="example.jpg" loading="lazy" alt="サンプル画像"> loading="lazy"属性を追加するだけで、対応ブラウザでは自動的に遅延読み込みされます。 JavaScriptで実装する方法（より細かく制御したい場合） Intersection Observer APIを使うと、画像がビューポートに入ったタイミングで読み込むことができます。 コピー document.addEventListener("DOMContentLoaded", () => { const images = document.querySelectorAll("img[data-src]"); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); images.forEach(img => observer.observe(img)); }); HTML例（data-srcを使う） コピー <img data-src="image.jpg" alt="遅延画像"> 注意点 loading="lazy"は一部の古いブラウザで非対応 重要な画像（ファーストビューにあるロゴなど）は即時読み込みのままでOK SEOへの影響が出ないよう、alt属性は適切に記述 おわりに 画像の軽量化とLazy Loadingを組み合わせることで、サイトのパフォーマンスを大きく改善できます。ぜひ一度、ご自身のサイトでも導入してみてください。 次回は「動画やiframeの遅延読み込み」や「画像CDN活用による最適化」についてご紹介します！

文字に線をつけたり、色を変えたり──こうした装飾をするのに使えるのが CSS の text-decoration プロパティです。この記事では、基本的な使い方から応用、注意点までを初心者にもわかりやすく解説します。 text-decorationって何？ text-decorationは、文字に「下線（underline）」「上線（overline）」「取り消し線（line-through）」などを付けたり、その色やスタイル（実線・点線など）を設定できるCSSのプロパティです。リンクや強調を視覚的にわかりやすく表示するのに使われます。 基本の使い方 コピー /* 下線をつける */ a { text-decoration: underline; } /* 取り消し線 */ del { text-decoration: line-through; } /* 複数指定もOK */ p { text-decoration: overline underline; } 色やスタイルも変えられる！ 下線の色や見た目も指定可能です： コピー a { text-decoration-line: underline; text-decoration-color: #ff0000; /* 赤い線 */ text-decoration-style: dotted; /* 点線 */ } まとめて短く書く方法もある CSS3からはショートハンドでまとめて指定ができます： コピー a { text-decoration: underline red dotted; } 初心者が注意すべきポイント リンクに装飾を付けすぎると、読みづらくなることがある アクセシビリティ対応では「色だけでなく線の種類も区別できるように」するのが望ましい 古いブラウザではショートハンドに対応していない場合もあるので、必要に応じて分けて書くと安心 応用テクニック ホバー時に線の色やスタイルを変えて動きをつける リスト項目に装飾線を追加してデザイン性を高める SVG や Webフォントと組み合わせてオリジナル装飾を作る HTMLでの使い方例（ホバー時） コピー a:hover { text-decoration: underline solid #0000ff; } おわりに text-decorationはシンプルに見えてデザインに役立つ便利プロパティです。初めはリンクや強調だけに使い、慣れてきたら色や線のスタイルにも挑戦してみましょう。 次回は「text-decoration-skip-ink」や「text-underline-offset」を紹介して、よりおしゃれで読みやすいテキストデザインに深掘りしていきますので、お楽しみに！

Webサイトに画像を載せるだけだと、ちょっと物足りなく感じることってありませんか？ そんなときに役立つのが、CSSによる画像の装飾テクニックです。ほんの少し手を加えるだけで、ぐっと見た目が洗練され、プロっぽく仕上がります。 画像を丸く切り抜く プロフィール画像やスタッフ紹介などでは、丸い写真がよく使われます。border-radius: 50%で簡単に丸くできます。 コピー .circle-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; } object-fit: coverを加えることで、画像の比率を保ちつつ、はみ出さないようトリミングされます。 画像に影をつける 写真に影を加えると、立体感が出て「浮き上がった」ような印象を作れます。 コピー .shadow-img { box-shadow: 0 4px 8px rgba(0,0,0,0.3); } 影の濃さや角度を調整すれば、やわらかい印象やしっかりした強調など自由に演出できます。 画像に枠線をつける 画像に境界をつけると、全体のデザインにメリハリが出ます。特に背景が白や淡い色のときに効果的です。 コピー .border-img { border: 3px solid #3498db; padding: 4px; background-color: #fff; } paddingとbackground-colorを組み合わせることで、額縁のような見た目にもできます。 応用：丸くて影付きの画像 複数の装飾を組み合わせれば、より印象的な見せ方ができます。たとえば、丸く切り抜いた上で影を加えた例はこちら。 コピー .circle-shadow-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 8px rgba(0,0,0,0.3); } 初心者が気をつけたいポイント 装飾しすぎない：影・枠・丸形をすべて使うと逆にゴチャつく可能性も 画像サイズを明示：ブラウザのレイアウト崩れ防止のためwidthとheightは明示するのが安心 スマホ表示に対応：レスポンシブ対応としてmax-width: 100%;などの工夫も必要 おわりに CSSを使えば、画像にほんの少し手を加えるだけで、デザイン性をぐっと高めることができます。とくにプロフィール写真や製品写真など「見た目の印象が重要」な場面では、これらの装飾が大きな効果を発揮します。 次回は、filterを使った色調補正や、ホバー時のアニメーションといった、さらに発展的なテクニックも紹介していきますのでお楽しみに！

Webサイトを作るとき、クリックできる「ボタン」はユーザーに行動を促す重要なパーツです。 例えば「送信」「購入」「もっと見る」など、目的に合わせて見た目を変えることで、操作性も大きくアップします。 この記事では、HTMLとCSSを使ったボタンの基本的な作り方から、よく使われるデザインのバリエーションまでを、初心者の方にもわかりやすく解説します。 基本のボタン まずはシンプルなスタイルのボタンから始めましょう。 コピー <button class="basic-btn">送信</button> コピー .basic-btn { padding: 10px 20px; background-color: #3498db; color: #fff; border: none; border-radius: 5px; cursor: pointer; } 色は青系で明るく、角を少し丸くすることでやわらかい印象になります。 ホバーで色が変わるボタン ユーザーに「押せるボタン」だと認識してもらうには、マウスを乗せたときに変化をつけると効果的です。 コピー .basic-btn:hover { background-color: #2980b9; } 少し濃い色に変わるだけでも、操作しやすさがアップします。 枠線だけの「アウトラインボタン」 最近では、背景色を使わず「枠線だけ」で構成されたアウトライン型ボタンも人気です。 コピー .outline-btn { padding: 10px 20px; background-color: transparent; color: #3498db; border: 2px solid #3498db; border-radius: 5px; cursor: pointer; } .outline-btn:hover { background-color: #3498db; color: white; } シンプルで洗練された印象を与えるので、CTA（行動喚起）の場面などにもよく使われます。 初心者が気をつけたいポイント 文字が読みにくくならないように、背景と文字色のコントラストを意識 スマホ対応： タッチしやすいサイズ（最低でも高さ40px程度）を確保 フォームやリンクとの違いを明確にして、誤操作を防ぐ 応用アイデア（発展編） アイコン（Font Awesomeなど）を一緒に表示 アニメーション（ボタンを押したときの波紋や拡大）を加える グラデーションや透明感をつけて高級感を出す ちょっとした装飾を加えるだけで、Webサイト全体の雰囲気にも統一感が生まれます。 おわりに ボタンは「クリックしてもらう」ための大事な要素です。CSSだけでもさまざまなスタイルが作れるので、デザインの意図やページの目的に合わせて工夫してみてください。 次回は「ボタンにアイコンをつける方法」や「アニメーション付きのホバーデザイン」など、もう一歩進んだボタンデザインにチャレンジしていきましょう！

「要素を横に並べたい」「中央に揃えたい」「すき間を等間隔にしたい」そんなときに便利なのが CSSのflex（フレックスボックス） です。 レイアウトを簡潔に記述できるため、近年では多くのWebサイトで活用されています。この記事では、flexの基本から便利なレイアウト例までをやさしく解説します。 flexとは？ flexは、CSSのレイアウトモードの一つで、親要素にdisplay: flex;を指定することで、子要素（flex item）の配置や並び方を柔軟に制御できます。 主なプロパティ display: flex; – flexレイアウトを開始する親要素に指定 justify-content – 横方向（主軸）の揃え方 align-items – 縦方向（交差軸）の揃え方 flex-direction – 子要素を横並び（row）か縦並び（column）にするか gap – 要素間のすき間を一括指定 よく使うパターン ① 要素を横に並べる コピー .container { display: flex; } ② 横中央揃え・縦中央揃え コピー .center-box { display: flex; justify-content: center; align-items: center; } ③ 要素間を均等に並べる（横並び） コピー .space-between { display: flex; justify-content: space-between; } 補足：よく使うjustify-contentの値 flex-start：左寄せ（初期値） center：中央揃え flex-end：右寄せ space-between：両端揃え、間が等間隔 space-around：すべての間が均等 注意点 親にdisplay: flexを指定しないと子要素は影響を受けない align-itemsは、親要素の高さが必要な場合がある 複雑なレイアウトはGridとの併用もおすすめ おわりに flexを使いこなすと、横並び・中央揃え・等間隔といった基本レイアウトが非常に簡単に書けるようになります。 初心者の方は、まずdisplay: flexとjustify-contentから試してみましょう！

リンクの下線を消したい、文字に取り消し線を入れたい──そんなときに活躍するのがCSSの text-decoration プロパティです。 見た目だけでなく、情報の伝達にも役立つ便利なプロパティなので、初心者の方にもぜひ覚えてほしい内容です。 text-decorationとは？ text-decorationは、文字に下線・上線・取り消し線などの装飾を付けるためのCSSプロパティです。 通常、HTMLの<a>タグ（リンク）には下線が自動的に表示されますが、このプロパティを使えば装飾を自由にカスタマイズできます。 例えば「キャンペーン価格の取り消し線」「注目テキストへの下線」など、意味を視覚的に伝える演出として活用できます。 主な指定値 値効果 none装飾を削除（リンクの下線を消すなど） underline下線（テキストの下に線） overline上線（テキストの上に線） line-through取り消し線（テキスト中央に線） よく使うパターン ① リンクの下線を消す デザインによっては、リンクの下線が不要な場合もあります。 コピー a { text-decoration: none; } ② 強調テキストに下線をつける 重要なワードに下線を加えて、目を引くようにします。 コピー .important { text-decoration: underline; } ③ セール価格の取り消し線 旧価格や終了したプランなどに使われる取り消し線の例です。 コピー .old-price { text-decoration: line-through; } 応用：色やスタイルも指定できる text-decorationは、CSS3以降で詳細な指定ができるようになりました。たとえば、線の色やスタイルを変えることで、よりデザイン性の高い表現が可能になります。 コピー .custom-link { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; } wavyは波打つような下線です。他にもdashed（破線）、dotted（点線）なども選べます。 初心者が気をつけたいポイント リンクの識別性を保つ：下線を消す場合はホバー時の色変化などで「リンクだと分かる工夫」を アクセシビリティ：色だけでなく、線の種類でも意味が伝わるようにする 複数指定のときはtext-decorationショートハンドの順番に注意（例：underline red solid） おわりに text-decorationは、テキストに意味や装飾を加える重要なプロパティです。リンクの見た目を整えたり、取り消し価格を表示したりと、実務でも頻繁に使われます。 基本の使い方に慣れてきたら、色・スタイルの指定やホバー時の変化など、より多彩な演出にもチャレンジしてみましょう。 次回は、下線の位置を調整できるtext-underline-offsetや、インクのかすれを回避するtext-decoration-skip-inkについても解説していきます！

「文章が読みにくい」「文字が詰まって見える」そんなときに役立つのが CSSのline-height（ラインハイト）です。 行間を調整することで、テキストの可読性や印象が大きく変わります。 この記事では、line-heightの基本的な使い方から、実践的な活用例・注意点までを初心者にもわかりやすく解説します。 line-heightとは？ line-heightは、テキストの「行の高さ（行間）」を指定するCSSプロパティです。 デフォルトではフォントサイズに応じた行間が設定されていますが、読みやすさやデザインに応じて自分でコントロールすることが大切です。 行間が狭すぎると窮屈に、広すぎると文のまとまりがなくなるため、適切なバランスが重要です。 主な指定方法 指定方法例特徴 数値（単位なし）line-height: 1.6;フォントサイズに対する倍率で指定。最も汎用性が高く、レスポンシブにも強い パーセントline-height: 160%;見た目は数値指定と同じ。慣れていればOK 固定の長さline-height: 24px;文字サイズに関係なく一定の高さ。レイアウト調整に便利だが注意が必要 基本的な使い方と例 ① 標準的な行間（1.6倍） 本文に最もよく使われる行間です。見やすく、Webデザインの基本値としても採用されることが多いです。 コピー p { line-height: 1.6; } ② やや詰めた行間（1.2倍） 見出しや小さめの補足文など、強くまとまりを見せたいときに使います。 コピー .compact-text { font-size: 14px; line-height: 1.2; } ③ 固定ピクセルでの指定（例：24px） コンポーネント間の位置を揃えたいときに便利。デザインの一貫性を保つために使われますが、フォントサイズが変わると崩れる可能性もあるので注意。 コピー .fixed-line { font-size: 16px; line-height: 24px; } おすすめのline-height値 本文： 1.5〜1.8（読みやすさ重視） 見出し： 1.2〜1.4（インパクト重視） モバイル：画面が狭いため、やや広めの1.6〜1.8が適しています 行間の違いだけで、文章の印象や「読み疲れしない感覚」が大きく変わります。 初心者が気をつけたいポイント フォントサイズとバランスを取る：大きい文字に狭い行間だと詰まり、小さい文字に広い行間だと間延びします 単位なしの指定が基本：相対的に計算され、レスポンシブでも崩れにくい 1.0以下の値は注意：文字が重なりやすく、読みづらくなる可能性があります おわりに line-heightを正しく使えば、読みやすく、すっきりとしたレイアウトのWebサイトを実現できます。 特に文章中心のページでは、行間の設定がユーザー体験を大きく左右する要素のひとつです。 今後は、letter-spacing（文字間）やfont-sizeとの組み合わせで、より快適なタイポグラフィ設計にもチャレンジしてみてください！