テキストとボタンの配置(1ページ目)
テキストとボタンの配置
サイトの1、2ページ部分を作成する。
最初に、作業内容を確認する。
1ページ目は、このように分割してコードを記述。
全体は4つのボックスでできている。
④は、ボックスの中にさらにボックスがあるレイアウト。
1ページ目のHTMLを記述
1 2 3 4 5 6 7 8 9 10 11 |
(前略)
<header class="header">
<p class="site-title-sub">----- Web application portfolio -----</p>
<h1 class="site-title">My WORKS</h1>
<p class="site-description">Check out some of my works.</p>
<div class="buttons">
<a class="button" href="#about">Learn MORE</a>
<a class="button button-orange" href="#contact">SEND MESSAGE</a>
</div>
</header>
(後略)
|
今はCSSの設定をしていないのでこのような表示になる。
CSSでスタイルを指定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
* {
box-sizing: border-box;
}
body {
color: #fff;
text-align: center;
font-size: 0.8rem;
}
.header {
padding: 170px 30px 80px;
height: 100vh;
background-color: rgba(25, 25, 120, 0.9);
}
.site-title-sub {
margin: 0 0 30px;
letter-spacing: 1px;
font-size: 1.2rem;
}
.site-title {
margin: 50px;
font-size: 4.5rem;
}
.site-description {
margin-bottom: 50px;
color: #888;
}
.button {
display: inline-block;
width: 200px;
padding: 20px;
margin: 10px;
border-radius: 4px;
background-color: #afa58d;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
font-size: 0.7rem;
}
.button:hover {
opacity: 0.9;
}
.button-orange {
background-color: #f1b400;
}
(以下省略)
|
ここまで入力が終わったら、見た目がどう変わったか確認。
このようになっていればうまくいっている。
・CSSの記述の仕方について
1 2 3 |
* {
box-sizing: border-box;
}
|
ここでの 「*」は「全ての要素」を表す。
そのため、ここで行なっている指定は全てのHTMLタグ、クラス、IDに対して適用される。
また、box-sizingはボックスサイズの算出方法を指定するためのプロパティ。
CSSでのサイズの決まり方
ある要素の「内側」に余白を取りたいケースにて・・・。
paddingを使えばできるが、実はその場合paddingの分だけ要素全体が大きくなった上で余白がつくられる。
ボックス全体の大きさを変えたくない場合は box-sizing: border-box; と指定。
5 6 7 8 9 |
body {
color: #fff;
text-align: center;
font-size: 0.8rem;
}
|
ここではbody要素全体に適用するスタイルを指定する。
colorプロパティ
colorはフォントの色を指定するプロパティ。
16進数かrgbによって色の指定を行う。
プロパティ名はfont-colorではないので注意。
text-alignプロパティ
text-alignは、テキストの横方向での位置を指定するためプロパティ。
ここではcenterを指定しているので、左右の中央にテキストが表示される。
font-size
font-sizeは文字通りフォントサイズを指定。
remは標準のフォントサイズを基準とした指定の仕方で、ここでは0.8倍の大きさを選んでいる。
11 12 13 14 15 |
.header {
padding: 170px 30px 80px;
height: 100vh;
background-color: rgba(25, 25, 120, 0.9);
}
|
1 2 3 4 5 |
.site-title-sub {
margin: 0 0 30px;
letter-spacing: 1px;
font-size: 1.2rem;
}
|
letter-spacingというプロパティは文字の間隔を調整するもの。
標準の状態だと文字がつまって見えるので、少し広げてている。
1 2 3 4 5 6 7 8 9 10 11 12 |
.button {
display: inline-block;
width: 200px;
padding: 20px;
margin: 10px;
border-radius: 4px;
background-color: #afa58d;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
font-size: 0.7rem;
}
|
display: inline-blockについて
2行目でdisplay: inline-blockという指定をしている。
このinline-blockを使うと、要素を横並びにした上で横幅と高さを指定することができる。
aタグには、そのままでは大きさの指定ができないため使用している。
border-radiusプロパティ
border-radiusは四角形の角を丸くするためのプロパティ。
今回のように4pxと指定すると、もともと四角形だったボタンの四隅が、半径4pxの円に相当する丸みになる。
text-decoration: noneは、通常リンクには下線が引かれいるが、今回は不要なためnoneを指定することで消している。
背景画像の設定
トップページの背景に画像を設定するために、cssの編集する。
1 2 3 4 5 6 7 |
body {
color: #fff;
text-align: center;
font-size: 0.8rem;
background: url('images/bg.jpg') fixed;
background-size: cover;
}
|
記述ができたら、プレビューで確認。
背景画像の設定
背景画像はbackgroundプロパティのurlで設定することができる。
今回は1、4ページ目で表示されるようにしたいので、スクロールしても固定されるようfixedを指定している。
また、背景画像の大きさはbackground-sizeで指定する。
今回はcoverを使っているが、他に以下の方法がある。
値 | 内容 |
---|---|
auto | サイズは自動的に決まる |
contain | 縦横比を保ったまま、範囲内に全ての画像が入るように配置(縦か横に空白ができる) |
cover | 縦横比を保ったまま、対象範囲を全て埋めるように配置(画像の縦かよこが切れる) |
長さ(例:980px) | 縦横を長さで指定 |
パーセンテージ(例:60%) | 縦横を親要素に対する比率で指定 |