☜前の章へ 2.ホーム画面作成(1)
☞次の章へ 4章.ギャラリー画面作成
ソースコードの解説
前回は、ホーム画面のHTMLの解説をしました。
このページではCSSの解説を行います。
第2章ではCSSを使用せず、HTMLのみの場合、ホーム画面は以下のように表示されました。
今回はCSSを入力し、サイトの画面がどのように変化していくのかを確認しながら学習を進めていきましょう。
以下、HTMLのソースコードとCSSのソースコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="令和の素敵な写真ギャラリー">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>令和's GALLERY HOME</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="home" class="main-image">
<header class="header wrapper">
<h1><a href="index.html"><img class="logo" src="images/logo.png" alt="ホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="profile.html">PROFILE</a></li>
</ul>
</nav>
</header>
<div class="home-content wrapper">
<h2 class="page-title">Beautiful Scenery of Japan</h2>
<p>令和に撮影した美しい日本の風景をご紹介します。</p>
</div>
</div>
<footer>
<div class="wrapper">
<p><small>© reiwasgallery</small></p>
</div>
</footer>
</body>
</html>@charset "UTF-8";
/* 共通開始 */
html {
font-size: 100%;
}
body {
font-family: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic Pro W3", sans-serif;
line-height: 2;
background-color: khaki;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 5%;
}
/* 見出し */
.page-title {
font-family: serif;
font-size: 2.8rem;
font-weight: normal;
}
/* 背景画像 */
#home {
background-image: url(../images/main-image.jpg);
min-height: 100vh;
}
#home .page-title {
text-transform: none;
}
.main-image {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
/* 共通終了 */
/* ホーム開始 */
/* ヘッダー */
.header {
display: flex;
justify-content: space-between;
}
.logo {
width: 250px;
margin-top: 5px;
}
.main-nav {
display: flex;
margin-top: 35px;
margin-right: 40px;
list-style: none;
font-size: 1.25rem;
text-transform: uppercase;
}
.main-nav li {
margin-left: 35px;
}
.main-nav a {
color: white;
}
.main-nav a:hover {
color: yellow;
}
/* コンテンツ全体 */
.home-content {
margin-top: 10%;
text-align: center;
color: white;
}
.home-content p {
font-size: 1.4rem;
}
/* ホーム終了 */
/* フッター開始 */
footer {
background: black;
text-align: center;
padding: 26px 0;
}
footer p {
color: white;
font-size: 0.875rem;
}
/* フッター終了 */【CSS】@charset “UTF-8”;とは
前回も出てきた、UTF-8です。
HTMLと同様に、CSSファイルの文字エンコーディングをUTF-8で指定しています。
通常、CSSファイルの冒頭に書きます。
【CSS】html{}とは
html {
font-size: 100%;
}htmlと書くと、ページ全体に適用される設定を指定することができます。
これは、基本の文字サイズを指定しています。100%とすることで、ブラウザが設定している、デフォルトの文字サイズが正しく表示されます。これを基準に、ある特定の文字列を80%の文字サイズで指定することで統一感のあるページを作ることができます。
【CSS】body {}とは
body {
font-family: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic Pro W3", sans-serif;
line-height: 2;
background-color: khaki;
}bodyと書くと、htmlの「body{}」の部分のデザインに影響を与えます。
【CSS】font-familyとは
font-family: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic Pro W3", sans-serif;font-familyは文字の字体を指定するものです。
WindowsやMacなどOSを意識して指定する必要があります。
フォント名には、日本語表記と英語表記があります。上記は全て、英語表記です。
以前は、英語表記と日本語表記を2つ書かないとブラウザによってはエラーが発生するすることがありましたがが、現在は英語表記のみで問題ありません。
Windows用では、「Medium」になっているのに対して、Mac用ではなっていません。それはMac用のデフォルトがMediumだからです。
フォントは、左に書いたものから優先的に適用されます。どれも適用されなかったときのために、一番最後に総称フォントというものを書きます。
【CSS】line-heightとは
line-height: 2;line-heightは行の高さを表しています。単位をpxとすることもできますが、省略する場合フォントサイズの倍数として解釈されます。2ならフォントサイズの2倍です。
【CSS】background-colorとは
background-color: khaki; background-colorは背景色を設定するものです。カーキ色に設定しています。
【CSS】a{}
【CSS】text-decoration: none;とは
a {
text-decoration: none;
}text-decorationはテキストの装飾を指定します。デフォルトではリンクには下線がついていますが、これにより下線がなくなります。
【CSS】img{}
【CSS】max-width: 100%;とは
img {
max-width: 100%;
}max-width: 100%は、画像が含まれる親要素の幅に合わせて画像の最大幅が調整されることを意味します。
親要素はheaderなので、headerの幅に合わせて画像の幅が調整されます。
【CSS】.wrapper {}
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 5%;
}.wrapperにはこれまでなかった、.(ピリオド)があります。自分で設定した、クラス名を指定する場合、クラス名の前にピリオドを書く必要があります。
wrapperクラスでコンテンツの位置や幅を調節します。
【CSS】max-width: 1100px;とは
max-width: 1100px;max-width: 1100pxは、コンテンツの最大幅を1100pxに設定しています。これ以上横幅が広がることはありません。
以下、ソースコードと画像です。
分かりやすいように、「outline」を使い枠線を出しています。
青色の枠線はheaderの親要素のクラス名「main.image」のdivです。
赤色の枠線はクラス名「wrapper」を指定している要素です。
@charset "UTF-8";
/* 共通開始 */
html {
font-size: 100%;
}
body {
font-family: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic Pro W3", sans-serif;
line-height: 2;
background-color: khaki;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
.wrapper {
max-width: 1100px;
/* margin: 0 auto; */
/* padding: 0 5%; */
outline: 2px red solid;
}
.main-image {
outline: 2px blue solid;
}
親要素であるdivの方が幅が広いのが分かります。
max-width: 1100px;としたことでwrapperクラスはこれより横幅が広がらないようになっています。
【CSS】margin: 0 auto;とは
margin: 0 auto;marginは、クラスを設定している要素の外側に余白を作ります。
これは要素を中央に寄せる設定です。
以下、ソースコードと画像です。
.wrapper {
max-width: 1100px;
margin: 0 auto;
/* padding: 0 5%; */
outline: 2px red solid;
}
赤色の枠線はwrapperクラスでした。中央に寄ったことが分かります。
margin: 0 auto;というように、「0」と「auto」という値を指定しています。これはどのような意味かというと、左側の0は上下の余白を0に指定しており、右側のautoは左右の余白を自動で調整しています。
以下、例です。
margin: 5;とすると上下左右に5px余白が生まれます。
margin: 1 2 3;とすると、上が1px、左右が2px、下が3px余白が生まれます。
margin: 1 2 3 4;とすると、上が1px、右が2px、下が3px、左が4px余白が生まれます。
単体で余白を作りたいときは、margin-top、margin-bottom、margin-left、margin-rightを使用します。
【CSS】padding: 0 5%;とは
padding: 0 5%;paddingは、クラスを設定している要素の内側に余白を作ります。
padding: 0 5%;というように、「0」と「5%」という値を指定しています。これはどのような意味かというと、左側の0は上下の余白を0に指定しており、右側の5%は横幅5%分の余白を左右に作ることを意味しています。
書き方は、marginと同様です。
【CSS】.page-title {}
.page-titleは以下に該当する部分です。
<h2 class="page-title">Beautiful Scenery of Japan</h2>.page-title {
font-family: serif;
font-size: 2.8rem;
font-weight: normal;
}【CSS】font-family: serif;とは
font-family: serifとすることで、明朝体に設定しています。
【CSS】font-sizeとは
font-size: 2.8rem;font-sizeを使用することで、文字の大きさを変更することができます。
remというのは、デフォルトの文字サイズに対して、倍率で文字サイズを変更してくれる設定です。
主要なブラウザの文字サイズのデフォルト値は16pxになっています。
CSSの冒頭の方に以下の記述がありました。
html {
font-size: 100%;
}デフォルト値が16pxだとすると、2.8remというのは16pxの2.8倍です。
【CSS】font-weight: normalとは
font-weight: normal;font-weightは、文字の太さを変更するものです。normalなのでデフォルト値で表示されるように明示的に示しています。
わざわざ、font-weight: normal;と書かなくてもデフォルト値で表示されますが、ここはデフォルトですと分かるように一応書いています。
【CSS】#home {}
#home {
background-image: url(../images/main-image.jpg);
min-height: 100vh;
}これまでクラスを指定する場合、クラス名の前にピリオドが必要でした。
#を使用する場合は、IDを指定する場合です。
【CSS】background-imageとは
background-image: url(../images/main-image.jpg);background-image: url(../images/main-image.jpg)は、背景画像を指定するものです。
今いるファイルから参照したいファイルを指定する必要があります。
「..」ピリオド2つは上の階層に移動していること表しています。
【CSS】min-height: 100vh;とは
min-height: 100vh;min-height: 100vhは、画像の最小の高さを表しています。
vh(Viewport Height)とはビューポートの高さを表し、100vhとするとビューポートの100%の範囲に画像を表示します。
ビューポートとは、画面の可視領域のことです。つまり、100vhとすると画面に見えている1面に画像が表示されます。
【CSS】#home .page-title {}
【CSS】text-transform: none;とは
#home .page-title {
text-transform: none;
} text-transform: noneは、テキストの大文字・小文字の変換を無効にしています。
この指定により、テキストがそのままの形式で表示され、大文字・小文字の変換が行われません。noneは変換を無効化するためのキーワードです。
【CSS】.main-image {}
.main-imageは以下に該当する部分です。
<div id="home" class="main-image"></div>.main-image {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}background-size: cover;とは
background-size: coverは、.main-imageクラスの背景画像がdiv内にアスペクト比(縦横比)が保たれた状態で綺麗に表示してくれるものです。
この設定をしないと、自動で画像の大きさが調整されず、画像の全体像が分かりません。
background-size: cover;を設定している画面
background-size: cover;を設定していない画像と見比べてください。このように、background-size: cover;を設定している場合、画像が綺麗に見えます。
【CSS】background-position: center top;とは
background-position: center topは背景画像を横を中央に配置し、縦を上端に配置しています。
【CSS】background-repeat: no-repeat;とは
background-repeat: no-repeatは背景画像を繰り返さず、一度だけ表示するという意味です。
【CSS】.header {}
.header {
display: flex;
justify-content: space-between;
}【CSS】display: flex;とは
display: flexは要素を横並びにします。
headerにはh1要素とnav要素の2つが存在しています。何もしなければ縦並びになりますが、横並びに変更します。
<header class="header wrapper">
<h1><a href="index.html"><img class="logo" src="images/logo.png" alt="ホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="profile.html">PROFILE</a></li>
</ul>
</nav>
</header>display: flex;これは、要素を横並びに変更するものです。
【CSS】justify-contentとは
justify-content: space-between;justify-content: space-betweenは要素を均等な間隔に配置する設定です。
最初の要素は左端または上端、最後の要素は右端または下端に配置します。今のままだとロゴ画像が大きすぎるため、ロゴ画像の大きさを変更します。
【CSS】.logo{}
.logo {
width: 250px;
margin-top: 5px;
}画面がどのように変化したか確認します。
要素は左右に分かれていることが確認できます。
【CSS】.main-nav {}
.main-nav {
display: flex;
margin-top: 35px;
margin-right: 40px;
list-style: none;
font-size: 1.25rem;
text-transform: uppercase;
}これは、右上のナビメニューの設定です。横並びに変更し、位置を調整しています。
【CSS】list-styleとは
list-style: none;list-style: noneは、メニューの左にある・を消しています。
「・GALLERY」の・が消えます。
【CSS】.main-nav li {}
.main-nav li {
margin-left: 35px;
}リストの左右の間隔を調整しています。
【CSS】.main-nav a:hover {}
.main-nav a:hover {
color: yellow;
}.main-nav a:hover { color: yellow; }は、メニューにカーソルを合わせたときに色を黄色になるように指定しています。
【CSS】.home-content {}
【CSS】text-alignとは
text-align: center;これはテキストが中央に配置されるようにしています。
以上で解説は終わりです。
自分好みにCSSなどを変更しても構いません。色々試して遊んでみて下さい。
