HTML/CSS &#8211; ケケンタの独学ITブログ

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【動作確認】スムーススクロールのトップへ戻るボタン

まずは実際の動作をご確認いただけるように、codepenで用意したデモをお見せします。

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

ケケンタ

ご覧いただいたように、Javascriptを使用しなくても、「スムーススクロール」のトップへ戻るボタンは簡単に実装することが可能です！

【解説】ソースコード

以下が「スムーススクロール」のトップへ戻るボタンを実装したソースコードです。







トップへ戻る

html {
  scroll-behavior: smooth; /* スムーススクロールを有効にする */
}

/*** 以下は見た目や動作確認用のCSS ***/

body {
    height: 150vh; /* 長いページを生成 */
    margin: 0;
    padding: 0;
}
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
}
.scroll-to-top:active {
    background-color: #0056b3;
}

ポイントは、CSSでhtml自体にscroll-behavior: smooth;を指定している点です。

こうすることで、アンカータグによる画面内の移動がスムーススクロールになります。

ケケンタ

通常どおりにアンカータグを設定し、html自体にscroll-behavior: smooth;を指定するだけでいいのでとっても簡単です！

【注意点】スムーススクロールが上手く機能しない場合

スムーススクロールが上手く機能しない場合、いくつかの原因が考えられます。

1. ブラウザの互換性

scroll-behavior: smooth;がサポートされていないブラウザを使用している可能性があります。

scroll-behavior: smooth;は最新のブラウザでサポートされていますが、古いブラウザでは動作しないことがあります。

互換性の問題をチェックするには、Can I Useをご参照ください。

2. 正しいセレクタに適用されていない

scroll-behavior: smooth;が正しいセレクタに適用されていない可能性があります。

通常はhtmlまたはbodyに適用しますが、特定のスクロールコンテナに適用したい場合は、そのコンテナに適用する必要がある点にご注意ください。

3. CSSの競合

他のCSSがscroll-behaviorプロパティと競合している可能性があります。

例えば、特定のフレームワークやリセットCSSが影響している場合があります。

4. HTML構造の問題

アンカーリンクが正しく設定されていない場合、スムーススクロールが機能しないことがあります。

例えば、ターゲット要素が存在しない、IDが正しく設定されていないなどです。

ケケンタ

基本的にはhtml要素にscroll-behavior: smooth;を付与するだけでスムーススクロールになるばずですが、もしも上手く行かない場合は様々な原因が考えられので、これらの内容を参考に、ソースコードをご確認いただければと思います。

まとめ

以上がJavascriptを使用せずに「スムーススクロール」のトップへ戻るボタンを作成する方法でした。

いかがだったでしょうか。

通常のアンカータグの設定に加えて、htmlにscroll-behavior: smooth;を付与するだけで簡単に実装することができました。

ケケンタ

実装コストが削減できるだけでなく、Javascriptの管理コストも減らすことができるためぜひご活用いただければ幸いです！

それでは、最後までご覧いただきありがとうございました！

当ブログではWeb制作やPHPなどWebアプリに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では業界最安値でWeb制作を...

【Googleマップ】レスポンシブ対応させる方法｜縦横比の指定も簡単！

ケケンタ — Thu, 05 Sep 2024 02:35:35 +0000

ケケンタ

Googleマップをレスポンシブ対応させる方法が知りたい……

ケケンタ

縦横比も簡単に指定できると良いんだけど……

今回はこのようなお悩みをお持ちの方へ向けて

Googleマップをレスポンシブ対応させる方法
＋
縦横比を簡単に指定する方法

をご紹介します。

この記事で分かること

GoogleマップをWebサイトへ埋め込む基本的な手順
Googleマップに「建物」や「場所」の名称を表示する方法
埋め込んだGoogleマップをレスポンシブ対応＋縦横比を簡単に指定する方法

あわせて読みたい

【基本】GoogleマップをWebサイトへ埋め込む

まずはGoogleマップをWebサイトへ埋め込む基本的な方法から簡単にご説明します。

STEP

Googleマップを開く

Googleで「Googleマップ」と検索してGoogleマップを開きます。

STEP

Googleマップで表示したい場所の「名称」や「住所」を検索する

Googleマップで場所の「名称」や「住所」を検索する

「名称」で検索すると、埋め込んだGoogleマップ上にもその名称が表示されて分かりやすくなります。

STEP

「共有」をクリックする

STEP

「地図を埋め込む」→「HTMLをコピー」をクリックする

「共有」をクリックするとモーダルウィンドウが表示されます。
その中の「地図を埋め込む」→「HTMLをコピー」をクリックします。

「地図を埋め込む」→「HTMLをコピー」をクリックする

STEP

コピーしたHTMLをサイト上の表示したい箇所に貼りつける


    Googleマップ

Googleマップ（日本語表記）

ケケンタ

以上がGoogleマップの基本的な埋め込み方法です！

【結論】Googleマップをレスポンシブ対応させる（縦横比も指定）

Googleマップをレスポンシブ対応させる場合、コピペしたiframeコードを別の要素（divタグがおすすめ）で囲う必要があります。

コピペしたiframeコードをdivタグで囲う


    Googleマップ

埋め込みコードを取得するときの「サイズ」はどれを選んでもOKです。

Googleマップをレスポンシブ対応させるためのCSS

/* Google Mapをレスポンシブ対応 */
.google-map {
    position: relative;
    width: 100%;
    height: 0;
    /* 比率調整  公式：calc((100% / 横幅) * 高さ) */
    padding-top: calc((100% / 375) * 450);
}

.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

上記のCSSの内、編集しなければいけないのはハイライト行（７行目）のみです。

「公式：calc((100% / 横幅) * 高さ)」に、Googleマップの「横幅」と「高さ」を設定していただくことで、その縦横比を維持したままレスポンシブ対応させることが可能です。

ケケンタ

縦横比の手計算をする必要が無いので非常に便利です！

calc()関数を使用するときは「演算子の前後に『半角スペース』を入れなければエラーになる」ためご注意ください。
—————————
calc((100%/375)*450)　　→　× NG
calc((100% / 375) * 450)　→　◯ OK

【補足】Googleマップ上に建物や場所の名称を表示する方法

埋め込んだGoogleマップ上に、建物や場所の名称を表示することが可能です。

やり方はいたって簡単で、Googleマップで地図検索するときに、住所ではなく建物や場所の名称で検索をするだけです。

「住所」ではなく「名称」で検索する

「住所」ではなく「名称」で検索する

たったこれだけで埋め込んだGoogleマップ上にも「建物」や「場所」の名称が表示されて分かりやすくなります。

まとめ

以上が

Googleマップをレスポンシブ対応させる方法
＋
縦横比を簡単に指定する方法

でした。

Googleマップを埋め込むときは、ほとんどの場合レスポンシブ対応が必須かと思います。

ケケンタ

書き方さえ分かってしまえばコピペで簡単に実装できます！

この記事がお役に立ったなら何よりです。

当ブログではWeb制作やWordPress、PHPに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです！

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

【超簡単！】liタグの点の大きさや色などを変える方法【HTML/CSS】

ケケンタ — Wed, 04 Sep 2024 01:51:34 +0000

ケケンタ

liタグの「点」の見た目って変えられないのかな……

今回はこのようなお悩みをお持ちの方へ向けて

liタグの点の大きさや色、フォントなどを変える方法

をご紹介します。

liタグは箇条書きの項目を記述するときに利用するHTMLタグですが、デフォルトで表示される「点」をそのままの見た目で使用することはあまり無いのではないかと思います。（特に実務では）

ケケンタ

liタグの点の見た目を変えたいときは、ぜひこの記事でご紹介する方法をご活用ください！

ちなみにこの記事でご紹介する方法はolタグでも有効です。

この記事でわかること

liタグの点の見た目（大きさ・色など）を調整する方法
liタグの点の大きさを変えたときの注意点と解決方法

あわせて読みたい

【結論】liタグの点の大きさや色、フォントを変える方法

liタグの「点」の大きさなどを調整する際は、疑似要素のひとつ「::marker」を使用します。

疑似要素とは、簡単に言うとCSSだけでHTML要素の記述・styleの指定ができる要素です。

言葉では上手く伝わらないかもしれませんが、liタグにデフォルトで表示される「点」も「::marker」という疑似要素です（「点」自体はHTMLに記述されていないのに、ブラウザには表示されていますね）

（例）liタグの「点」の色・大きさを変える



    サンプル１
    サンプル２
    サンプル３

表示結果

サンプル１
サンプル２
サンプル３

ケケンタ

このように「::marker」にCSSプロパティを指定することで簡単にliタグの点の見た目を調整することが可能です！

上記の例では、点とテキストの位置が水平中央揃えになっていません。
この解決方法については、後述の【注意点①】liタグの点の大きさを変えたときは調整が必要でお伝えします。

::markerに指定できるCSSプロパティ

::markerに指定できるCSSプロパティのは以下の５種類だけです。

::markerに指定できるCSSプロパティ

color（色）
font-size（大きさ）
font-family（書体）　→　olタグの連番のフォント調整に有効
font-weight（太さ）
line-height（行間）

ケケンタ

上記以外のCSSプロパティは指定することができないため注意しましょう！

【注意点①】liタグの点の大きさを変えたときは調整が必要

【結論】liタグの点の大きさや色、フォントを変える方法でご覧いただいたように、liタグの点の大きさを変えた場合、テキストと水平中央揃えではなくなってしまいます。

ケケンタ

以下はその解決方法です。

解決方法



    サンプル１
    サンプル２
    サンプル３

表示結果

サンプル１
サンプル２
サンプル３

ポイントは、ハイライト行です。

具体的におこなっていることは以下の２つです。

liタグ内のテキストをspanタグで囲う
liタグ内のspanタグへ「vertical-align」を指定　→　高さ調整する

vertical-alignとは？

vertical-alignは要素の縦位置を調整するCSSです。

ケケンタ

細かな数値は、実際に調整する中で決めていく必要がありますが、vertical-alignを使用することで「点」と「テキスト」を水平中央揃えに戻すことが可能です。

【注意点②】liがdisplay:blockになっているときは使用できない

liタグの「点」=疑似要素::markerは、liタグがdisplay:list-itemになっているからこそ表示される要素です。

そのため、liタグにdisplay:blockなどの指定をしてしまうと、::markerが消えてしまうため、先ほどご紹介した方法は使用することができません。

「list-style:none」を指定した場合も同様です。

まとめ

以上がliタグの点の大きさや色、フォントなどを変える方法でした。

ケケンタ

最後に記事の内容をまとめます！

記事のまとめ

liタグの点の見た目を変えたいときは「::marker」疑似要素にCSSプロパティを指定する
「::marker」に指定できるCSSプロパティは全部で５種類のみ（それ以外は指定不可）
liタグの「点」の大きさを変えたら高さ調整が必要
「::marker」が適用されるのは「display:list-style」の要素のみ

liタグの「点」の見た目調整を行う機会は多いかと思いますが、

この記事でご説明した、「::marker」にCSSプロパティを指定すればいいということだけ覚えておけば、調整は簡単にできます。

ケケンタ

それでは、最後までご覧いただきありがとうございました！

このブログではWeb制作やWordPress、PHPに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです！

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

【超簡単！】Googleマップの表記を日本語から「英語」にする方法【Web制作】

ケケンタ — Tue, 13 Aug 2024 01:53:36 +0000

Web制作をしているとGoogleマップをサイト内へ埋め込むことが度々あります。

英語圏向けのサイトであればGoogleマップ上の表記も「英語」の方が適しています。

そこで今回は

Googleマップの表記を日本語から「英語」にする方法

をご紹介します。

ケケンタ

難しいことはまったくなく、誰でも簡単にできます！

あわせて読みたい

GoogleマップをWebサイトへ埋め込む

まずはGoogleマップをWebサイトへ埋め込む基本的な方法から簡単にご説明します。

STEP

Googleマップを開く

Googleで「Googleマップ」と検索してGoogleマップを開きます。

STEP

Googleマップで表示したい場所の「名称」や「住所」を検索する

Googleマップで場所の「名称」や「住所」を検索する

STEP

「共有」をクリックする

STEP

「地図を埋め込む」→「HTMLをコピー」をクリックする

「共有」をクリックするとモーダルウィンドウが表示されます。
その中の「地図を埋め込む」→「HTMLをコピー」をクリックします。

「地図を埋め込む」→「HTMLをコピー」をクリックする

STEP

コピーしたHTMLをサイト上の表示したい箇所に貼りつける




    
    
    Googleマップ


    Googleマップ

Googleマップ（日本語表記）

ケケンタ

以上がGoogleマップの基本的な埋め込み方法です！

Googleマップを「英語」表記にする

先ほど貼りつけたコードでは表記は日本語のままですので、ここから実際にGoogleマップを「英語」表記に変更します。

具体的には、先ほどGoogleマップからコピーしてきたHTMLコードの「src」属性を修正します。

「src」属性の末尾にある「1sja」→「1sen」に修正

一番最後の「jp」ではなく、そのひとつ前の「ja」を修正する点に注意してください。

上記のように修正するだけで、Googleマップの表記が「英語」に変わります。

Googleマップ（英語表記）

まとめ

以上がGoogleマップの表記を「英語」にする方法でした。

ケケンタ

この記事が少しでもお役に立ったなら何よりです！

このブログでは、Web制作やWordPress、PHPに関する情報を発信しています。

ご興味のある方はぜひほかの記事もご覧いただけるとうれしいです。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

aタグを左右中央寄せや上下左右中央寄せにする４つの方法【HTML/CSS】

ケケンタ — Wed, 10 Jul 2024 07:16:23 +0000

ケケンタ

aタグを「左右」や「上下左右」中央寄せにしたいんだけど、なんだか上手く行かない……

今回はそのようなお悩みをお持ちの方に向けて

aタグを「左右」中央寄せや「上下左右」中央寄せにする方法

をご紹介します。

aタグを「左右」中央寄せや「上下左右」中央寄せにするための方法は実を言うといくつかあり、特に初心者の方がつまずきやすいところでもあるかと思います。

ケケンタ

この記事が少しでもお役に立てば何よりです！

あわせて読みたい

【超簡単！】liタグの点の大きさや色などを変える方法【HTML/CSS】 liタグの「点」の見た目って変えられないのかな…… 今回はこのようなお悩みをお持ちの方へ向けて liタグの点の大きさや色、フォントなどを変える方法をご紹介します。 l…

あわせて読みたい

【超簡単】Javascript無しで「スムーススクロール」のトップへ戻るボタンを実装この記事では Javascriptを使用せずに「スムーススクロール」のトップへ戻るボタンを実装する方法について解説します。スムーススクロールのトップへ戻るボタンは、も…

あわせて読みたい

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE Web制作を仕事にしたいけど、プログラミングスクールに通うには費用がかかりすぎる……けど、独学だと相談相手もいないから、挫折しないか心配…… こうした悩みをお持ちの…

【全体像】aタグを「左右」中央寄せや「上下左右」中央寄せにする方法

aタグを「左右」中央寄せや「上下左右」中央寄せにする方法には、具体的に以下のようなものがあります。

aタグを「左右」中央寄せにする方法

text-align: cetnterを使用する
aタグをブロック要素にする

aタグを「上下左右」中央寄せにする方法

flex-boxを使用する
positionを使用する

ケケンタ

以下より、それぞれの方法についてご紹介します！

前提として、この記事では以下のようなHTML構造を元にaタグを「左右」、「上下左右」中央寄せにする方法を解説します。

この記事で使用するHTML構造


    aタグ

aタグを「左右」中央寄せにする方法

【方法①】text-align: cetnterを使用する

div {
    text-align: center;  /* テキストが左右中央揃えになる */
}

text-align: center;で左右中央寄せ

親要素（divタグ）にtext-align: center;を設定する
text-align: center;により、div要素内のテキストが左右中央寄せになる

【方法②】aタグをブロック要素にする

div a {
    display: block;      /* １．aタグをブロック要素にしてmarginが効くようにする */
    width: fit-content;  /* ２．ブロック要素になり親要素いっぱいになった横幅をテキスト幅に合わせる */
    margin: 0 auto;      /* ３．左右中央寄せにする */
}

ブロック要素にして左右中央寄せ

aタグをブロック要素にする（marginが効くようにするため）
ブロック要素になったaタグは親要素（div要素）いっぱいに広がるため、横幅をテキスト幅に合わせる
margin: 0 auto;で左右中央寄せにする

aタグを「上下左右」中央寄せにする方法

【方法①】flex-boxを使用する

div {
    display: flex;           /* １．aタグをflex要素にする */
    justify-content: center; /* ２．左右中央 */
    align-items: center;     /* ３．上下中央 */
}

flex-boxを使用する

aタグをflex要素にする
flex要素専用のプロパティ「justify-content」、「align-items」で上下左右中央寄せにする

【方法②】positionを使用する

div {
    position: relative;
}

div a {
    position: absolute;
    /* 上下左右中央寄せ */
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

positionを使用する

親要素（div要素）にposition: relative;を設定する
　⇒　これにより子要素の「position: absolute;の基準」が親要素の「左上」になる
aタグにposition: absolute;を設定する
aタグをtop: 50%;とleft: 50%;で中央に寄せる
ただし、それだけだと完全な「上下左右中央寄せ」にはならないため、transformで位置を調整する

aタグを「左右」、「上下左右」中央寄せにする方法は他にもある

以上がこの記事でご紹介する

aタグを「左右」中央寄せや「上下左右」中央寄せにする方法

でした。

実を言うとこれ以外にも方法はあるのですが、今回はその中でも比較的取り入れやすく、また他の要素にも活用しやすいと思うものをご紹介しました。

CSSは簡単なように思えて少し複雑な側面も持ち合わせています。

経験が浅い内はその都度方法を調べることになるとは思うのですが、コーディング経験を積むうちに「パターン」や「法則」のようなものが見えてきます。

今回ご紹介した方法も、まさにその内のひとつです。

ケケンタ

この記事が少しでもお役に立ったなら何よりです。

それでは、また別の記事でお会いできれば光栄です。

最後までご覧いただきありがとうございました。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

【Web制作】PHPのinclude関数でヘッダーやフッターをパーツ化する

ケケンタ — Fri, 05 Jul 2024 06:01:33 +0000

Web制作をしていると

ヘッダーやフッターなどの共通部分をパーツ化したい

という場面が時折でてきます。

今回はその方法についてご紹介していきます。

この記事で分かること

HTMLファイル（.html）のままPHPを使用できるようにする方法
PHPのinclude関数でヘッダーやフッターなどの共通部分をパーツ化する方法
パーツの呼び出し元のファイルの階層が異なるときでもパスの「ズレ」を無くして読み込む方法

当記事は以下の記事を参考に執筆させていただきました。
参考：https://yusk.org/memo/php-memo/php_include_001.html

あわせて読みたい

HTMLファイルでもPHPを使用できるようにする方法

今回ご紹介する「共通部分のパーツ化」を行うにあたり、PHPのinclude関数を使用します。

そのため、前提条件として

パーツを読み込みたいファイル内でPHPが使用できることが必須

です。

ケケンタ

具体的には下記２つのいずれかの方法によって、そのファイル内でPHPが使用できるようになります。

ファイル内でPHPを使用できるようにする方法

拡張子を「.php」にする
.htaccessファイルにコードを記述して「.html」ファイル内でもPHPを使用できるようにする

①の方法では、単純に拡張子を「.php」に変更するだけでOKですが

②の方法については、サーバー内に設置されている.htaccessファイルに以下のコードを記述する必要があります。

以下の一文を.htaccessファイルに記述することで
HTMLファイルでもPHPが使用できるようになる

AddType application/x-httpd-php .html

サーバーによって記述内容が異なる場合があります。

PHPのinclude関数で共通パーツを呼び出す

この記事では拡張子を「.php」にする方法を採用しています。

それでは以下より、具体的にPHPのinclude関数を用いて共通パーツを呼び出す方法を解説していきます。

include関数とは

PHPのinclude関数は、外部ファイルを読み込むための関数です。
今回の例で言うと、外部ファイルとして作成してある「ヘッダー」や「フッター」を任意のファイルに読み込むために使用します。

注意点として、
ヘッダーやフッターなどの共通パーツ内で読み込む画像などのパスは、あくまでも「読み込んでいる側の階層」が「基点」となる
ことが挙げられます。
この記事では、そちらを考慮した読み込み方法もご紹介します。

ケケンタ

「パーツを呼び出すファイル同士の階層」が「同じ」か「異なる」かによって記述内容が微妙に変わってくるため、それぞれのパターンについてご紹介します。

【パターン①】呼び出し元のファイルの階層がすべて同じ場合

今回想定するファイルの階層

ファイル構成【パターン①】

各ファイル内で共通パーツを読み込む

共通パーツ内で各種ファイルを読み込む

【パターン①】のように呼び出し元のファイルがすべて同じ階層に設置されている場合、

「呼び出し元のファイルを起点とした相対パス」を記述することで「共通パーツ」も「各種ファイル」も問題なく呼び出すことが可能です。

【パターン②】呼び出し元のファイルの階層が異なる場合

呼び出し元のファイル階層がそれぞれ異なる場合はひと工夫必要になります。

今回想定するファイルの階層
※呼び出し元のファイルが２・３階層目に存在する点がポイント

ファイル構成【パターン②】

各ファイル内で共通パーツを読み込む

共通パーツ内で各種ファイルを読み込む


logo.svg"

include関数で共通パーツを読み込む前に「$Path」という変数（一時的な入れ物のようなもの）に「自分自身から見たときの『相対パスの基点』」を格納しています。
共通ファイル内でパスを指定するときは、この「相対パスの基点」を元に相対パスを記述しているという状態になっています。

ここで最も重要なのが「共通パーツから見たときの『相対パスの基点』を正確に設定できているかどうか」です。

これを間違えてしまうと、各種ファイルの読み込みが上手くいかなくなってしまいます。

ケケンタ

ご自身の各ファイルの階層に合わせて「相対パスの基点」を設定してみて下さい。

共通部分をパーツ化することでメンテナンス性が向上する

いかがだったでしょうか。

WordPressなどのCMSを使用しているときは特別な工夫をしなくてもヘッダーやフッターを簡単にパーツ化できます。

しかし、静的サイトで共通パーツを読み込む際には、「読み込み元のファイルの階層」を正しく理解して対応することが必要になってきます。

ケケンタ

最初は慣れないかもしれませんが、ご自身であれこれ試すことで理解が進むかと思います。

共通部分をパーツ化するメリットとして「メンテナンス性の向上」が挙げられます。

メンテナンス性が向上すればその後の修正作業も効率化されて工数も削減できます。

この記事がその一助となったなら何よりです。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

【Font Awesome】背景画像として使用する方法【CSS】

ケケンタ — Sat, 01 Jun 2024 03:13:07 +0000

ケケンタ

Font Awesomeって簡単にアイコンを挿入できて便利だけど、背景画像として使う方法って無いのかな……？

今回はこのようなお悩みにお答えします。

この記事を読むとわかること

Font Awesomeを背景画像として使用する方法

【超簡単】Javascript無しで「スムーススクロール」のトップへ戻るボタンを実装

あわせて読みたい

Font Awesomeとは？

そもそもFont Awesomeとは？について解説をします。

Font Awesomeとは？

Font Awesomeとは、Web上から好きなアイコン（Webアイコン）を簡単にWebサイトに挿入することができるサービスです。

使い方はいたってシンプルです。

Font Awesomeの基本的な使用方法

STEP

headタグにCDN読み込み用のコードを記述

以下のコードをheadタグに記述します。

最新バージョンはこちらからご確認いただけます。
https://cdnjs.com/libraries/font-awesome

STEP

公式サイトでアイコンを検索する

Font Awesomeの公式サイトでアイコンを検索します。

STEP

表示されているHTMLを任意の箇所に記述する

アイコンをクリックすると表示されるHTMLコードを任意の箇所に記述します。

実際の使用例

See the Pen fontawesome（背景画像） by ケケンタ (@lgshifbg-the-looper) on CodePen.

ケケンタ

このように使用することで、簡単にWebサイトに好きなアイコンを挿入することができ、Font Awesomeは非常に便利です。

Font Awesomeを背景画像として使用する方法

それでは本題の「Font Awesomeを背景画像として使用する方法」についてですが、こちらは基本的な使用方法とは少しやり方が変わってきます。

Font Awesomeを背景画像として使用する方法

STEP

Font Awesomeのアイコンを設定するための疑似要素（beforeやafter）を用意する

STEP

疑似要素に以下の３行の記述を入れる

.sample::before{
  content:"\文字コード";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

ハイライト箇所１行目の「文字コード」はFont Awesome公式サイトの以下の部分で確認ができます。

実際の使用例

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

Font Awesomeを背景画像として設定するときのポイント

① 疑似要素を用意する

② 以下の３行を疑似要素に記述する

content:”\文字コード”;　※「『\』はバックスラッシュです」
font-family: “Font Awesome 6 Free”;
font-weight: 900;

ケケンタ

このように使用することでFont Awesomeを背景画像として設定することが可能です。

まとめ

以上が、Font Awesomeを背景画像として設定する方法でした。

Font AwesomeはそのままHTMLに記述することも可能ですが、疑似要素を用意することで背景画像として利用することも可能です。

そうするメリットとしては

HTMLの構造を変えずに済む
SEO的にHTMLとして認識させる必要がないアイコンを設定できる

といったことが挙げられます。

ケケンタ

それでは、最後までご覧いただきありがとうございました！

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

iframeタグの使い方｜セキュリティ対策で必須のsandbox属性とは？

ケケンタ — Thu, 30 Nov 2023 11:56:57 +0000

ケケンタ

今回はHTMLタグの１つであるiframeタグの基本的な使い方と使用する際の注意点について解説していきます。

後半ではiframeを使用する上で非常に重要となるセキュリティに関する内容や使用上の注意点も解説しているので、ぜひ最後までご覧ください。

この記事を読むと分かること

iframeタグの概要や過去に非推奨となった理由
iframeタグの使い方
iframeタグにおけるセキュリティリスクとその対策方法
sandbox属性について
iframeタグを使用する上での注意点

セキュリティ対策についてしっかり学ばれたい方にはこちらの書籍がおすすめです。
（通称：徳丸本と呼ばれる「Webアプリ開発者必読」とまで言われている書籍です）

体系的に学ぶ安全なWebアプリケーションの作り方第2版脆弱性が生まれる原理と対策の実践
徳丸浩／著　SBクリエイティブ／出版│Amazon

【HTML】パスとは？CSSが反映されない原因｜相対パスと絶対パス【初心者】

あわせて読みたい

iframeタグとは？

iframeタグとは、現在のWebページに別のサイトの情報をそのまま掲載したい（埋め込みたい）ときに使用するHTMLタグです。

iframeタグの主な使用例

Googleマップ
Youtube動画
Twitterのタイムライン

ケケンタ

サイト上にYoutube動画がそのまま掲載されているのを見たことがある方もいるかと思いますが、あれもiframeタグを使用することで実装をしています！

また、iframeタグは使用する際に表示領域（幅と高さ）を指定します。

その中に、表示対象のコンテンツが埋め込まれる形で表示される、という仕組みになっています。

iframeはInline Frameの略称で「インラインフレーム」や「アイフレーム」と呼ばれています。

iframeタグの基本的な使い方

基本構文

iframeタグの基本的な書き方は以下の通りです。

iframeタグの基本的な書き方

いくつか属性が登場していますが、iframeタグで設定可能な属性には主に以下のようなものがあります。

iframeタグで設定可能な属性

属性名	説明
src	iframeタグで読み込むコンテンツをパスで指定する ※パスは絶対パスもしくは相対パスでの指定が可能
width, height	iframeを表示する領域の幅と高さをそれぞれ指定する。 ※CSSでの指定も可能
title	読み上げソフトなどを利用している人向けに、iframe内のコンテンツの説明を記述する
allow	iframeで読み込むコンテンツを制御するための属性。読み込むコンテンツに対してどのような動作を許可するかを指定できる
sandbox	iframeに埋め込んでいるコンテンツ内で実行されるプログラム処理に対する制御の指定ができる ※詳細は項目「セキュリティ対策」で説明しています

iframeタグで設定可能な属性

ケケンタ

この他にも指定できる属性はありますが、その中にはHTML5では禁止（非推奨）となっているものも存在します。

例えば、iframeの枠を表示するためのframeborder属性は現在非推奨となっており、枠を表示したい際はCSSのborderプロパティを使用することが推奨されています。

使用例

基本構文の紹介だけではイメージが湧きづらいかと思いますので、実際の使用例を以下に提示します。

今回は本ブログのトップページを「横幅：画面サイズ, 高さ：400px」としてiframeで表示しています。

See the Pen iframe sample by ケケンタ (@lgshifbg-the-looper) on CodePen.

パスは絶対パス（URL）で指定し、title属性でiframeのサンプルコードである旨を説明しています。

ケケンタ

ちなみにここでは使用していませんが、allow属性を使用すると、例えばYoutube動画を埋め込んだ際に自動再生を許可するかどうかなどを設定することが可能です。

【注意点】iframeタグが非対応のブラウザ対策

基本構文ではご紹介しませんでしたが、上記の使用例のHTMLコードをご覧いただくと、の間に「これはiframeタグのサンプルです」という記述があります。

実は

iframeタグには、対応していないブラウザが存在します。

そのようなブラウザ上ではiframeタグによる表示が行われないため、の間に説明文を記載することでサイト閲覧者に「iframeタグがここにある」ということを伝えています。

（imgタグのalt属性と同じ役割を果たしていると捉えていただいて問題ありません）

iframeタグのセキュリティについて

前述の通り、iframeタグを使用することで他のサイトのコンテンツやYoutube動画などを簡単に埋め込むことができます。

しかし実は、iframeタグは過去にセキュリティ上の理由によって非推奨タグに登録されたことがあります。

結局その後は、Youtubeの動画埋め込みやWeb広告表示など多くのサイトがiframeを利用し、利便性が高かったという理由から、HTML5で非推奨が解除されました。

が、しかし、iframeタグには依然としてセキュリティ上の問題があり、それを正しく理解した上で使用をしなければ閲覧者に被害が及んでしまう恐れもあります。

本章では以下のようなセキュリティに関する内容を解説していきます。

iframeタグにどのようなセキュリティリスクがあるのか
iframeタグのセキュリティ対策としてどのような方法があるのか

ケケンタ

セキュリティ対策はWeb制作・アプリ開発者ならば必須の対応事項です！
今回ご紹介しているiframeタグに関わるセキュリティ事情をきちんと把握し、正しい使用方法を身に付けましょう。

セキュリティリスク

iframeタグの最大の問題点は埋め込んだコンテンツ内で実行されるプログラムが、埋め込んでいるWebサイト上でも同様に実行可能ということです。

例えば、埋め込んだURL先のサイトに悪意のあるプログラムが設置されていた場合、iframeを使用しているサイト上でもそれが実行されてしまい、サイト閲覧者に被害が及ぶ恐れがあるということです。

これによって、クロスサイトスクリプティング（XSS）やクリックジャッキングなどのセキュリティリスクが高まります。

上記２つのセキュリティ攻撃については以下の記事が参考になりましたのでご紹介させていただきます。

クロスサイト・スクリプティング
参考：https://www.hitachi-solutions.co.jp/security/sp/words/xss.html

クリックジャッキング
参考：https://www.hitachi-solutions-create.co.jp/column/security/click-jacking.html

あわせて読みたい

【XSS】クロスサイト・スクリプティングとは？対策方法も解説【PHP】今回はWebアプリにおけるセキュリティ攻撃の１つであるXSS（クロスサイト・スクリプティング）について解説をしていきます。この記事を読むと分かること XSS（クロス…

セキュリティ対策

iframeのセキュリティ対策として以下の2点が挙げられます。

iframeのセキュリティ対策

信頼性が低いサイトのコンテンツは埋め込まない
sandbox属性を使用して埋め込みコンテンツが実行可能なプログラムに制限をかける

特に、後者のsandbox属性による対策が確実かつ有効なため以下より詳しく解説をしていきます。

sandbox属性

sandbox属性についてお話しする前に、そもそもsandbox（サンドボックス）が何かをご説明します。

sandbox（サンドボックス）とは？

サンドボックスとは「砂場」が由来となっている、「コンピュータ上で構築された安全な仮想環境」のことです。
このサンドボックス内で実行されたプログラムはその外側へは影響を及ぼすことが無く、外部と完全に隔離された環境となっています。

sandbox属性の役割

これを踏まえた上で、iframeにおけるsandbox属性の役割とは、

iframeで埋め込んだコンテンツ内のプログラムが何でもかんでも実行されてしまわないように制御すること

です。

sandbox属性を使用することで、例えば本来であれば実行されてしまうはずだったjavascriptプログラムを「実行禁止」とし、iframeを使用しているサイト側への被害を防ぐことが可能となります。

sandbox属性の使い方

sandbox属性の基本的な書き方は以下の通りです。

このようにiframeタグ内に「sandbox」と書くだけで、埋め込んだコンテンツによる様々な挙動を制御することができ、セキュリティ対策になります。

以下はiframeタグ内にsandboxと記述することで制御される挙動の一例です。

sandbox属性により制御される挙動（例）

フォームからのデータ送信
ポップアップ・ウィンドウの表示
javascriptプログラムの実行

使用可能な主要プロパティ

反対に、一部の挙動は許可したいという場合にはsandbox属性に対してプロパティを記述します。

例えば、「フォームの送信だけは許可したい」という場合は以下のように記述をします。

ここではsandboxに「allow-forms」というプロパティを指定しています。

主要なプロパティとしては以下のようなものがあります。

sandbox属性の主要なプロパティ

属性名	説明
allow-forms	埋め込んでいるページ上におけるフォームからのデータ送信を許可（これを指定しなくてもフォーム自体は通常通り表示されるが、フォーム送信処理は実行されない）
allow-popups	ポップアップ・ウィンドウの表示を許可
allow-same-origin	埋め込み閲覧コンテキストに、通常のオリジンと同じポリシーを適用。親ドキュメントで利用できる機能が利用可能になる
allow-scripts	埋め込んでいるページによるスクリプトの実行を許可（ポップアップを除く）
allow-downloads-without-user-activation	ユーザーの操作なしでのダウンロードを許可

iframeのsandbox属性に指定可能な主要プロパティ

ケケンタ

記述するべきプロパティはiframeタグを使用する目的によって変わります。
セキュリティリスクを低減するためにも、プロパティの意味をしっかりと理解して適切なものを設定するようにしましょう。

iframeタグを使用するときの注意点

ここまで、iframeタグの使用方法とセキュリティ対策について解説をしてきました。

しかし、セキュリティ上の理由とは別にiframeタグを使用するにあたっては注意点があります。

iframeタグを使用する際の注意点

iframeに埋め込んだコンテンツはSEO評価の対象とはならない
iframeに埋め込む＝埋め込んだコンテンツを丸々同じページ上に表示するのと同じため、多用するとページ表示が遅くなる
HTML5から廃止・非推奨となっている属性があるため、指定する際は仕様を確認する

ケケンタ

iframeタグは別のサイトのコンテンツをそっくりそのまま表示することができて大変便利です。
しかし、セキュリティ対策以外にこうした注意点も存在するため、正しい理解のもとで使用するようにしましょう。

【まとめ】iframeタグはセキュリティリスクを理解した上で使用する

以上、iframeタグの使い方とセキュリティ対策、そして使用上の注意点でした。

iframeタグはコンテンツを簡単に埋め込めるため便利である一方、セキュリティリスクがあることを理解した上で正しく使用することが大切です。

この記事が参考になったらなら何よりです。

ケケンタ

最後に、僕がセキュリティ対策を学ぶ際に利用した書籍をご紹介させていただきます。

体系的に学ぶ安全なWebアプリケーションの作り方第2版 [ 徳丸浩 ]

created by Rinker

¥3,520 (2026/05/25 04:06:24時点楽天市場調べ-詳細)

こちらの書籍は通称徳丸本と呼ばれており、Webセキュリティの第一人者である徳丸浩さんが手がけられている書籍です。Webアプリを開発する方やWebアプリケーションのセキュリティ対策を徹底的に学びたい方にとてもオススメできる一冊です。

Webアプリケーション開発において、ある意味セキュリティ対策は技術力以上に重要です。

こちらの書籍を読むことでWebアプリケーションにおいて必要なセキュリティ要件も明確となるため、Webアプリ開発に携わる方は必ず目を通しておきたい一冊です。

ケケンタ

ここまでお読みいただきありがとうございました！
またどこかの記事でお会い出れば何よりです。

何故かCSSが反映されない「５つの原因」と「対処方法」

ケケンタ — Sun, 26 Nov 2023 06:03:38 +0000

ケケンタ

この記事では、CSSが反映されない原因と各対処・確認方法について解説していきます。

この記事を読むと分かること

CSSがHTMLに反映されない原因
反映されない原因に対する各対処方法

【HTML】CSSを読み込む「３つ」の方法を紹介！方法別メリット・デメリット

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】

【HTML】CSSを読み込む「３つ」の方法を紹介！方法別メリット・デメリット

あわせて読みたい

はじめに｜CSSが反映されない原因を解消するために大切なこと

解説を始める前に、最初に知っておいていただきたいことがあります。

それは、CSSが反映されない原因を解消しようと動き始める前に、まずは正しい状況を真っ先に調査することがもっとも大切ということです。

把握するべき「正しい状況」とは？

CSS自体が読み込まれていないのか（★）
CSSは読み込まれている……けれど、HTMLに反映されないのか（☆）

その理由は、現在の状況が①と②どちらなのかによって、対処方法が変わるためです。

以下よりご紹介する「５つの方法」の見出しの後ろに振ってある（★）または（☆）の記号は、「上記２点いずれかの原因にひもづく対処法」であることを示しています。

現在もCSSが反映されずにお困りという方は、まずは起こっている現象が①と②のどちらなのかをはっきりさせた上で対処法をご確認いただければと思います。

ケケンタ

ちなみに、原因確認にはGoogle chromeの検証ツール（通称デベロッパーツール）を利用するのがおすすめです。

詳しい確認方法と各反映状況に対する対処方法については以下の記事でお伝えしていますので、やり方が分からないという方はぜひ参考にしてみて下さい。

あわせて読みたい

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】今回は Google chromeの検証ツールを使用してCSSの反映状況を確認する方法+CSSが反映されていないときの対処方法について解説をします。なお、CSSが反映されない原因…

Web制作の副業にご興味のある方には以下の記事もおすすめです。

あわせて読みたい

【独学】Web制作で副業｜ココナラで初案件を獲得するまでの全工程 Web制作を副業として始めている人が増えているけど、具体的に自分も案件を取れるようになるためにはどうすればいいの…？独学でも可能なの…？今回はこのようなお悩みを…

CSSが反映されない原因

CSSが反映されない主な原因は５つあります。

CSSが反映されない「５つ」の原因

CSSファイルのパスの指定が間違っている（★）
文法的な誤りがある（☆）
キャッシュが残っており、最新のCSSファイル情報が反映されない（☆）
CSSの仕様に反する使い方をしている（☆）
他のCSSで上書きされている（☆）

ケケンタ

各原因の詳細とその対処方法について順番にお伝えしていきます！

原因１｜CSSのファイルのパスの指定が間違っている（★）

CSSを別ファイルに記述している場合、HTMLのheadタグ内に以下のような記述をしてCSSファイルを読み込む必要があります。

上記の「ファイル名.css」で、CSSファイルまでのパスを絶対パスもしくは相対パスで記述する必要があります。

ここの指定内容に誤りがあると、CSSファイルを正しく読み込むことができません。

したがって、CSS自体がまったく読み込まれていない方については、

まずは、CSS読み込みで記述しているパスが正しいかどうか確認することをおすすめします。

ケケンタ

絶対パスと相対パス、またCSSの読み込み方法については以下の記事でそれぞれご説明しています。

あわせて読みたい

【HTML】パスとは？CSSが反映されない原因｜相対パスと絶対パス【初心者】 CSSが上手く反映されない…… とお困りの方へに向けて、この記事ではCSS読み込みの基本となるパスについて詳しく解説していきます。この記事で分かることパスとは何か…

あわせて読みたい

【HTML】CSSを読み込む「３つ」の方法を紹介！方法別メリット・デメリットこの記事ではHTMLへのCSS読み込み方法を「３つ」解説していきます！この記事でわかること CSSファイルをHTMLファイルに読み込む方法（＝外部ファイル読み込み） CSSを…

原因２｜文法的な誤りがある（☆）

CSSファイルの読み込み自体に問題が無かったり、「HTMLファイル内に直接記述している」という状況であったとしても、CSSの記述内容に文法的な誤りがあると正常に反映されない場合があります。

例えば以外に見落としがちなのが、単位の記述ミスや行末のコロンの付け忘れです。

文法ミスの例

width: 80x;　⇒　pxではなくxと書いている
width: 80px　⇒　最後の「;」が抜けている

特に行末のコロンが抜けていると、コロンが抜けている行のCSSとその直後のCSSについては、正しく書けていたとしてもHTMLに反映されません。

以下はVSCode上で記述した例です。

CSSエラーの様子

エラー部分が赤い波線で強調されています。

自分は大丈夫と思っていても思わぬところで記述ミスをしてしまっていることがありますので、

ケケンタ

一部のCSSだけ反映されない……

という方は、「反映させたいのに反映されない」と思っているプロパティ記述を中心に再度見直しをしてみると良いかもしれません。

記述ミスによって上手くいかないパターンがある意味もっとも厄介です。

こういったパターンでは、書いたCSSがそもそもブラウザ側に読み込まれているのか、読み込まれていないのかを確認することが問題解消の早道です。

以下の記事でGoogle chromeの検証ツール（通称デベロッパーツール）による確認方法をお伝えしていますので、確認方法が分からないという方はぜひ一度ご覧になって下さい。

あわせて読みたい

原因３｜キャッシュが残っており、最新のCSSファイル情報が反映されない（☆）

Google Chromeのようなブラウザにはキャッシュと呼ばれる仕組みが利用されています。

キャッシュとは？

前回読み込んだファイル内容を一時的に保存しておき、再度そのページを開いたときに一時保存していた内容を読み込むための仕組み

つまり、キャッシュ（ここでは「一時ファイルそのもの」と理解していただいて大丈夫です）が残っていると、CSSファイルを編集しても、ブラウザには即時に最新の内容が反映されないということです。

特に、それまで正常にCSSの編集内容がHTML側に反映されていたのに、編集後の一部の内容だけが反映されていないという状況の場合、キャッシュが残っている可能性が高いです。

キャッシュ残りの対処方法

キャッシュを削除して再度ページを更新する（読み込む）

ケケンタ

以下より具体的な方法をご説明します。

キャッシュを無視して最新情報を読み込む「３つ」の方法

「３つ」の方法

ショートカットキーを使用してスーパーリロードする
検証ツール画面を開き、更新ボタンを長押し　⇒　「キャッシュの消去とハード再読み込み」
ブラウザの設定画面からキャッシュを削除する

上記の中ではショートカットキーを使用してスーパーリロードする方法が一番手っ取り早いです。

スーパーリロードとは？

キャッシュを無視して強制的に最新情報を再読み込む（リロード）すること

スーパーリロードを実行するショートカットキーの一覧

Shift + ブラウザの更新ボタン
Ctrl + ブラウザの更新ボタン
Shift + F5
Ctrl + F5
Ctrl + Shift + R

ちなみにF5キーは「通常のページ更新」のショートカットキーです。
F5キーが反応しないという方は、同時に「Fn」キーも押してみてください。

スーパーリロードを実行することでキャッシュを無視して最新のCSS情報が読み込まれます。

なお、スーパーリロードを実行しても最新の内容が反映されない場合は、別の原因が考えられます。

ケケンタ

僕はよく「Shift + F5」でスーパーリロードをしています。
……が、理由はよく分からないのですが、１度だけスーパーリロードしても何故か最新情報が即時反映されないことがあるため、そういうときは適当に3回ぐらい「Shift + F5」を試しています。

原因４｜CSSの仕様に反する使い方をしている（☆）

初心者の方で意外とあるのが、「CSSやHTML的には正しく反映されている」にも関わらず、見た目に変化が無いせいで「反映されていない」と思い込んでしまうケースです。

この場合、ある程度慣れてきた方ならばすぐに気がつけるのですが、初心者の方は特にハマりやすいです。

例えば、「あるテキストを親要素の垂直中央揃えにしたい」というときに「vertical-align: middle;」を指定したとします。

しかし、vertical-alignはインライン要素にしか適用されないため、うっかりブロック要素に対して指定してしまうと

「ちゃんと書いてるのに中央に来ない！　CSSが反映されてないんだ！」

と誤解しがちです。

本当の原因は、CSSの仕様に反する使い方をしてしまっていることなのですが、「CSSが反映されていない」と誤った判断をしてしまい、沼にハマるという流れです。

ケケンタ

CSSはプログラミング界隈では難易度が低めと言われていますが、各プロパティの仕様を正しく理解して使いこなせるようになるには、ある程度の学習と実践経験が必要です。

本当の意味で使いこなせるようになるまでの期間は、この「仕様を正しく理解できていないがために上手くいかない」という状況にぶつかりがちです。

そうしたとき、原因を正しく特定する目的として以下の記事でもご紹介している検証ツールでの確認方法は最低限理解しておくことをオススメします。

あわせて読みたい

原因５｜他のCSSに上書きされている（☆）

前項と同様、初心者の方がハマりやすい原因のひとつに、他のCSSで上書きをしてしまっているというものがあります。

これはCSSの優先度に関わってくる内容で、この記事では詳しくは触れませんが、Googleの検証ツールを利用した確認方法を通じて「上書きをしてしまっていないかどうか」を確認することが可能です。

まとめ

以上、CSSが反映されない５つの原因とその対処方法についてお伝えしてきました。

CSSが反映されない「５つ」の原因

CSSファイルのパスの指定が間違っている（★）
文法的な誤りがある（☆）
キャッシュが残っており、最新のCSSファイル情報が反映されない（☆）
CSSの仕様に反する使い方をしている（☆）
他のCSSで上書きされている（☆）

CSSが反映されない原因は様々で、状況によって対処方法は変わります。

本記事を読んで何が原因でCSSが読み込まれていなかったのか、またその対処方法が明確になったなら嬉しいです。

また、Google chromeの検証ツールを使用することでCSSが反映されない原因をより探りやすくなります。

使い方が分からないという方は以下の記事も併せてご覧いただくことで、今後のCSSコーディングで沼にハマることを避けやすくなるかと思います。

ケケンタ

ここまでお読みいただきありがとうございました！
またどこかの記事でお会いしましょう！

あわせて読みたい

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】

ケケンタ — Sun, 26 Nov 2023 05:50:10 +0000

今回は

Google chromeの検証ツールを使用してCSSの反映状況を確認する方法
+
CSSが反映されていないときの対処方法

について解説をします。

なお、CSSが反映されない原因については以下の記事で詳しく解説しています。

あわせて読みたい

何故かCSSが反映されない「５つの原因」と「対処方法」この記事では、CSSが反映されない原因と各対処・確認方法について解説していきます。この記事を読むと分かること CSSがHTMLに反映されない原因反映されない原因に対…

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】