ホームページでパソコンやスマートフォンの画面にキービジュアル画像をフルスクリーンで表示させたい場合、CSSの記述方法と設置場所が重要です。ここでは具体例と適切な設置場所を紹介します。
1. CSSの設置場所
CSSはHTMLの
内に<style>タグで記述するか、外部CSSファイルとしてリンクします。bodyタグ内に直接CSSを書くのは推奨されません。理由は可読性や再利用性の低下、管理の複雑化があるためです。例：<head>内に記述
<style>body { margin: 0; padding: 0;}.hero { height: 100vh; /* 全画面表示 */ background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(https://picsum.photos/id/237/960/540);}</style>2. HTMLでの適用方法
CSSを適用するには、対象の要素にクラス名を付けます。例えば、キービジュアル用のdivにclass=”hero”を設定します。
<body> <div class="hero"></div></body>3. スマートフォン対応
height: 100vh;はスマートフォンでも画面全体に表示されます。さらに必要に応じてメディアクエリを使い、スマホ特有の調整も行えます。
4. まとめ
CSSは
内に<style>タグとして書くか、外部CSSファイルを使用することが推奨です。bodyタグ内にはHTML要素だけを置き、クラスを付与したdivなどでキービジュアルを設定すると、パソコン・スマホ双方でフルスクリーン表示が可能です。
コメント