<header>と<footer>
<div class=”header”>と<div class=”footer”>のような、ヘッダーとフッターのためのタグは非常によく使われるので、HTML5は<header>と<footer>というタグが用意されています。
<header>, <footer>を使う方が一般的なので、こちらを使いましょう。
背景画像を指定する
background-image
トップ部分の背景には画像を表示します。
CSSで背景画像を指定するにはbackground-imageプロパティを用います。
background-image: url(画像のURL);のように使います。
背景画像の大きさを指定する
background-imageで指定された背景画像は図のように表示範囲を埋め尽くすまで、繰り返し表示される性質があります。
background-size: cover;を指定すると、1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小します
要素を中央に配置する
containerクラスを中央寄せにしましょう。
中央に寄せるためにはmarginの左右にautoを指定します。
marginにautoを指定するときは、必ずwidthを併せて指定します。
なお、上下のmarginにautoを指定することはできません。
このようなcontainerクラスを作る意味は今は理解しなくて大丈夫です。
後に便利になるので、作っておきましょう。
index.html
<div class=”top-wrapper”>
<!– ここにコードを書いていきましょう –>
<div class=”container”>
<h1>LEARN TO CODE.</h1>
<h1>LEARN TO BE CREATIVE.</h1>
<p>Progateはオンラインプログラミング学習サービスです。</p>
<p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
</div>
stylesheet.css
/* containerクラスのCSSを指定してください */
.container {
width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
/* top-wrapperクラスのCSSを指定してください */
.top-wrapper {
padding: 180px 0 100px 0;
background-image: url(https://prog-8.com/images/html/advanced/top.png);
background-size: cover;
color: white;
}
要素を透過させる
opacity
opacityプロパティを使えば要素を透明にできます。
透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定します。
文字の間隔を指定する
letter-spacing
letter-spacingプロパティを用いることで文字の間隔を指定することができます。
/* top-wrapperの中の<h1>のCSSを指定してください */
.top-wrapper h1 {
opacity: 0.7;
font-size: 45px;
letter-spacing: 5px;
}
/* top-wrapperの中の<p>のCSSを指定してください */
.top-wrapper p {
opacity: 0.7;
}
ボタン部分を作ろう
ボタンを作っていきます。ボタンは<a>タグで指定します。
しかし<a>タグはインライン要素であり、インライン要素にはwidthやheightが指定できないなど不便な点があります。
これを解決する方法を学びましょう。
インラインブロック
inline-block
ブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがあります。
インラインブロック要素はインライン要素と同様に横に並びますが、ブロック要素のように幅や高さをもちます。
display
display
<a>タグは初期状態でインライン要素になっていますが、displayプロパティを使うと、インラインブロック要素に変更することができます。
displayプロパティはblock（ブロック要素）, inline-block（インラインブロック要素）, inline（インライン要素）を指定することができます。
複数クラスの指定
ボタンのように、「共通の部分があるが、それぞれ小さい変化をつけたいとき」にはクラスの名前を複数指定すると便利です。
下図のように、半角スペースで区切って複数のクラスを指定することができます。
index.html
<!– ここにコードを書いていきましょう –>
<div class=”btn-wrapper”>
<a href=”#” class=”btn signup”>新規登録はこちら</a>
<p>or sign up with</p>
<a href=”#” class=”btn facebook”>Facebookで登録</a>
<a href=”#” class=”btn twitter”>Twitterで登録</a>
</div>
stylesheet.css
/* btnクラスのCSSを指定してください */
.btn {
padding: 8px 24px;
color: white;
display: inline-block;
opacity: 0.8;
}
/* signupクラスのCSSを指定してください */
.signup {
background-color: #239b76;
}
/* facebookクラスのCSSを指定してください */
.facebook {
background-color: #3b5998;
margin-right: 10px;
}
/* twitterクラスのCSSを指定してください */
.twitter {
background-color: #55acee;
}
/* btn-wrapperクラスのCSSを指定してください */
.btn-wrapper {
margin: 20px 0;
}
/* btn-wrapperクラスの中にある<p>のCSSを指定してください */
.btn-wrapper p {
margin: 10px 0;
}
レイアウトを整えよう
今回は以下三点に焦点をあてて学んでいきましょう。
・カーソルを乗せたときに色を変える
・ボタンを角丸にする
・テキストを中央に寄せる
:hover
hover
カーソルが乗ったときの状態をhoverと言います。
CSSで、セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定することができます。
border-radius
角を丸めるにはborder-radiusプロパティを用います。
数字が大きいほど角が丸くなります。
「margin: 0 auto」と
「text-align: center」
要素を中央寄せにする方法として、margin: 0 autoとtext-align: centerを学びましたが、それらの違いを整理しましょう。
containerクラスのように、広い範囲を囲うようなブロック要素の場合はmarginを、テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使うようにしましょう。
/* text-alignをcenterに指定してください */
text-align: center;
/* border-radiusを4pxに指定してください */
border-radius: 4px;
/* btnクラスにhoverしたときのCSSを指定してください */
.btn :hover {
opacity: 1;
}
Font Awesomeとは？
アイコンを表示するにはFont Awesomeというものを使うと便利です。
たくさんのアイコンが用意されており、自分の気に入ったアイコンを簡単に使うことが出来ます。
https://fontawesome.com に詳しい使い方やアイコンの一覧が載っています。
Font Awesomeは、以下の手順で使用することができます。
①Font AwesomeのCSSファイルを読み込む
②<span>タグにfaクラスとfa-アイコン名クラスを指定する
（Font Awesomeのサイトにアイコンごとのクラス名が載っています。）
これだけで簡単にアイコンを表示させることができます。
<!– ここでFont Awesomeを読み込みましょう –>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>
</head>
<a href=”#” class=”btn facebook”>
<!– ここに<span>タグを追加しましょう –>
<span class=”fa fa-facebook”></span>
Facebookで登録
</a>
<a href=”#” class=”btn twitter”>
<!– ここに<span>タグを追加しましょう –>
<span class=”fa fa-twitter”></span>
Twitterで登録
</a>
stylesheet.css
/* faクラスのmargin-rightを5pxに指定してください */
.fa {
margin-right: 5px;
opacityとrgba
これまで要素を透明にするにはopacityを用いてきました。
しかし、opacityには要素の中身全てを透明にするという性質があります。背景色のみを透明にするには、rgbaというものを使う必要があります。
それを学んでいきましょう。
rgb
rgbaを学ぶには、まずrgbというものを理解する必要があります。
rgbは色の指定の仕方の1つで、3つの値の組み合わせで表示する色を決めます。色を指定するときは今まで使用してきた#ffffffのような記法を使ってもrgbを使っても構いません。
色を透明にしたいときは色をrgbaで指定します。rgbaは4つの値をコンマ（,）区切りで入れます。4つ目の値が透明にする度合いで、0 ~ 1の数値で指定します（値が小さいほど透明になります）。
opacityプロパティは要素全体を透過させますが、rgbaを使うとその色だけを透明にすることが出来ます。
<header>
<!– ここにコードを書いていきましょう –>
<div class=”container”>
<div class=”header-left”>
<img class=”logo” src=”https://prog-8.com/images/html/advanced/main_logo.png”>
</div>
</div>
</header>
/* <header>のCSSを指定してください */
header {
height: 65px;
background-color: rgba(34, 49, 52, 0.9);
}
/* logoクラスのCSSを指定してください */
.logo {
width: 124px;
margin-top: 20px;
}
ログインリンクを作ろう
次はログインリンク部分を作っていきます。
<!– ここにコードを書いていきましょう –>
<div class=”header-right”>
<a href=”#” class=”login”>ログイン</a>
</div>
/* header-leftクラスのCSSを指定してください */
.header-left {
float: left;
}
/* header-rightクラスのCSSを指定してください */
.header-right {
float: right;
background-color: rgba(255, 255, 255, 0.3);
}
/* header-rightクラスにhoverしたときのCSSを指定してください */
.header-right:hover {
background-color: rgba(255, 255, 255, 0.5);
}
ログインリンクを完成させよう
ログインリンクを完成させましょう。
以下二点の方法を学びます。
・hover時にアニメーション付きで色を変える
・ヘッダーの縦の中央にログインという文字を表示する
transition
transitionを使うとアニメーションをつけることができます。
「変化の対象」や、「変化にかかる時間」などを指定できます。
「変化の対象」にはcolorなどのプロパティを指定しますが、allを指定すると全てのプロパティに適用出来ます。
transitionは多くの場合hoverと組み合わせて使います。
行間を指定する
line-heightプロパティを使うと、行の高さを指定することができます。
値が大きいほど行間が大きくなります。
line-heightと
縦の中央寄せ
line-heightプロパティは本来行間を調整するためのプロパティですが、要素の縦方向の中央に文字を配置するのにも使えます。
line-heightプロパティの「高さの中心」に文字が配置されるため、要素の高さとline-heightプロパティを同じ値にすると、文字がちょうど中央に配置されるようになります。
<a>タグをクリックできる範囲
<a>タグはインライン要素なので、中身のテキストの部分しか大きさを持ちません。その結果、<a>タグをクリックできる範囲はテキストの部分だけになってしまいます。
<a>タグをブロック要素にすると、大きさが親要素いっぱいに広がるので、全体をクリックできるようになります。
.header-right {
float: right;
background-color: rgba(255, 255, 255, 0.3);
/* transitionを指定してください */
transition: all 0.5s;
}
/* header-rightの中の<a>のCSSを指定してください */
.header-right a {
line-height: 65px;
padding: 0 25px;
color: white;
display: block;
}
レッスン一覧のレイアウト
次はレッスン一覧部分を作っていきます。
レッスン一覧部分は図のような構造になっています。
これらを1つ1つ作っていきましょう。
また、文字の太さを変える方法を学びましょう。
文字の太さを指定する
font-weight
font-weightプロパティを用いると文字の太さを変更することができます。normalまたはboldを指定します。
<h1>~<h6>の要素は初期状態でfont-weight: bold;となっているので、font-weight: normal;と指定すれば文字が細くなります。
<div class=”lesson-wrapper”>
<!– ここにコードを書いていきましょう –>
<div class=”container”>
<div class=”heading”>
<h2>Learn Where to Get Started!</h2>
</div>
<div class=”lessons”>
</div>
</div>
</div>
/* lesson-wrapperクラスのCSSを指定してください */
.lesson-wrapper {
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
}
/* headingクラスのCSSを指定してください */
.heading {
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
}
/* headingの中の<h2>のCSSを指定してください */
.heading h2 {
font-weight: normal;
}
相対的な大きさの指定
width
ボックスのwidthやheightをpxではなく%で指定すると、親要素に対してどのくらいの幅や高さを持つか指定することができます。
<div class=”lessons”>
<!– ここにコードを書いていきましょう –>
<div class=”lesson”>
<div class=”lesson-icon”>
<img src=”https://prog-8.com/images/html/advanced/html.png”>
<p></p>
</div>
<p class=”txt-contents”></p>
</div>
/* lessonクラスのCSSを指定してください */
.lesson {
float: left;
width: 25%;
}
レッスン紹介部分を作ろう
レッスン紹介部分を作っていきましょう。
通常、HTMLでは要素同士が重なって表示されることはありません。
しかし、CSSを用いることで要素同士を重ねることができます。
今回は画像アイコンと文字が重なるようにする方法を学びます。
position: absolute;
HTMLの要素同士は通常重なって表示されることはありませんが、position: absolute;を使うと、要素同士を重ねて表示することが出来ます。
サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定します。また、rightやbottomを併用することも可能です。
基準位置の変更
position: absolute;の基準位置はサイト全体の左上部分ですが、この基準位置は変更することが出来ます。
基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となります。
親要素であるlesson-iconにposition: relative;を指定したので、その子要素にabsoluteを指定すると、lesson-iconを基準とした位置を指定することができます。
/* lesson-iconクラスのCSSを指定してください */
.lesson-icon {
position: relative;
}
/* lesson-iconの中の<p>のCSSを指定してください */
.lesson-icon p {
position: absolute;
top: 90px;
width: 100%;
color: white;
}
/* txt-contentsクラスのCSSを指定してください */
.txt-contents {
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
color: #b3aeb5;
}
<div class=”message-wrapper”>
<!– ここにコードを書いていきましょう –>
<div class=”container”>
<div class=”heading”>
<h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
<h3>Let’s learn to code, learn to be creative!</h3>
</div>
<span class=”btn message”>さっそく開発する</span>
</div>
/* messageのCSSを指定してください */
.message {
background-color: #5dca88;
padding: 15px 40px;
}
/* headingの中の<h3>のCSSを指定してください */
.heading h3 {
font-weight: normal;
}
立体的なボタンを作ろう
立体的なボタンの作り方を学びましょう。
ボタンに影をつけることによって、立体的に見えるようにします。
また、ボタンにカーソルを当てた時の、カーソルの形を変更する方法も学びます。
影をつけよう
ボックスに影を付けるためにはbox-shadowプロパティを用います。
以下の図のように「影の位置」と「影の色」を指定します。
cursor
cursorプロパティを用いることでマウスのカーソルが要素に乗ったときのカーソルの形を変えることができます。
タグによってcursorが初期状態で設定されているものもあり、例えば<a>タグは初期状態でpointerが設定されています。
/* message-wrapperクラスのCSSを指定してください */
.message-wrapper {
border-bottom: 1px solid #eee;
padding-bottom: 80px;
text-align: center;
}
.message {
padding: 15px 40px;
background-color: #5dca88;
/* カーソルの形をpointerにしてください */
cursor: pointer;
/* box-shadowをつけてください */
box-shadow: 0 7px #1a7940;
}
.heading h3 {
font-weight: normal;
}
ボタンを押したらへこむようにしよう
ボタンを押したらへこんで見えるようにしましょう。
ボタンを押したときに以下の処理をすると、へこんで見えるようになります。
・影を消す
・ボタンの位置を影の分だけ下げる
:active
セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用することができます。
セレクタ:activeというように指定します。
CSSを打ち消そう
box-shadow: none;とすると、影を消すことが出来ます。
このように多くのプロパティはnoneを指定することによって消すことができます。
position: relative;による位置の変更
要素の位置を変更する方法を学びましょう。
前回position: relative;はposition: absolute;の基準位置を決めるために使っていましたが、要素の位置を変更するためにも使うことが出来ます。
position: relative;をtopやleftと併用すると、その要素を本来の位置からずらせます。
/* messageクラスがクリックされているときのCSSを指定してください */
.message:active {
position: relative;
top: 7px;
box-shadow: none;
}
フッターのレイアウト
<footer>
<!– ここにコードを書いていきましょう –>
<div class=”container”>
<img src=”https://prog-8.com/images/html/advanced/footer_logo.png”>
<p>Learn to Code, Learn to be Creative.</p>
</div>
</footer>
/* <footer>の中の<img>のCSSを指定してください */
footer img {
width: 125px;
}
/* <footer>の中の<p>のCSSを指定してください */
footer p {
color: #b3aeb5;
font-size: 12px;
}
/* <footer>のCSSを指定してください */
footer {
padding-top: 30px;
}
ヘッダーを固定しよう
最後に、スクロールしてもヘッダーが常に上部に固定されるようにしましょう。
画面上に要素を固定する
position: fixed;を使うと、常に要素を画面上の指定した位置に固定させておくことができます。
位置は、top、left、right、bottomを使って指定します。
要素の重なり順
positionを使用すると要素の重なりが生じます。
その結果図のように、レッスン紹介部分とヘッダーが重なった時に、ヘッダーが隠れてしまいます。
重なり順を指定して、ヘッダーが上に表示されるようにしましょう。
要素の重なりの順序を指定する
z-indexプロパティは、要素の重なりの順序を指定する際に使用します。
z-indexは整数値で指定し、値が大きいほど上に表示されます。
z-indexプロパティは必ずpositionプロパティと併用する必要があるので、注意しましょう。
今のままだと、ヘッダーが他の要素と重なった時、ヘッダーが下に隠れてしまう問題があります。
これを修正しましょう。
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
/* positionプロパティをfixedに、topを0に指定してください */
position: fixed;
top: 0;
/* z-indexを10に指定してください */
z-index: 10;
}