hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

テキストとボタンの配置(1ページ目)

テキストとボタンの配置

サイトの1、2ページ部分を作成する。
最初に、作業内容を確認する。
1ページ目は、このように分割してコードを記述。

https://tech-master.s3.amazonaws.com/uploads/curriculums//7b596dac6d3cfea587d65725e95e6de0.png

全体は4つのボックスでできている。
④は、ボックスの中にさらにボックスがあるレイアウト。

1ページ目のHTMLを記述

index.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の設定をしていないのでこのような表示になる。

https://tech-master.s3.amazonaws.com/uploads/curriculums//954311aa1ef12602e87405ff7a7a744f.png

CSSでスタイルを指定

style.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;
}
(以下省略)

ここまで入力が終わったら、見た目がどう変わったか確認。

https://tech-master.s3.amazonaws.com/uploads/curriculums//25924b3bc04249016efa9ed4c15e4748.png

このようになっていればうまくいっている。


CSSの記述の仕方について

style.css
1
2
3
* {
    box-sizing: border-box;
}

ここでの 「*」は「全ての要素」を表す。

そのため、ここで行なっている指定は全てのHTMLタグ、クラス、IDに対して適用される。

また、box-sizingはボックスサイズの算出方法を指定するためのプロパティ。

 CSSでのサイズの決まり方

ある要素の「内側」に余白を取りたいケースにて・・・。
paddingを使えばできるが、実はその場合paddingの分だけ要素全体が大きくなった上で余白がつくられる。

https://tech-master.s3.amazonaws.com/uploads/curriculums//2c01ae31cdcc291d53b38a74520c8eee.png

ボックス全体の大きさを変えたくない場合は box-sizing: border-box; と指定。

 

style.css
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倍の大きさを選んでいる。

style.css
11
12
13
14
15
.header {
    padding: 170px 30px 80px;
    height: 100vh;
    background-color: rgba(25, 25, 120, 0.9);
}
style.css
1
2
3
4
5
.site-title-sub {
    margin: 0 0 30px;
    letter-spacing: 1px;
    font-size: 1.2rem;
}

letter-spacingというプロパティは文字の間隔を調整するもの。
標準の状態だと文字がつまって見えるので、少し広げてている。

style.css
 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の円に相当する丸みになる。

https://tech-master.s3.amazonaws.com/uploads/curriculums//133df74969c8fcfd9d555f4e2c2a560a.png

text-decoration: noneは、通常リンクには下線が引かれいるが、今回は不要なためnoneを指定することで消している。

https://tech-master.s3.amazonaws.com/uploads/curriculums//5e24cd1967b94f7d7b22ee5a3c88579a.png

背景画像の設定

トップページの背景に画像を設定するために、cssの編集する。

style.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;
}



記述ができたら、プレビューで確認。

https://tech-master.s3.amazonaws.com/uploads/curriculums//b808bc050804f22c26facebab5e6162b.png

 背景画像の設定

背景画像はbackgroundプロパティのurlで設定することができる。
今回は1、4ページ目で表示されるようにしたいので、スクロールしても固定されるようfixedを指定している。

また、背景画像の大きさはbackground-sizeで指定する。
今回はcoverを使っているが、他に以下の方法がある。

内容
auto サイズは自動的に決まる
contain 縦横比を保ったまま、範囲内に全ての画像が入るように配置(縦か横に空白ができる)
cover 縦横比を保ったまま、対象範囲を全て埋めるように配置(画像の縦かよこが切れる)
長さ(例:980px) 縦横を長さで指定
パーセンテージ(例:60%) 縦横を親要素に対する比率で指定