・ ブロックを紙に書き出すことから始めて、html、css、reset.cssを準備
・前章で習ったreset.cssにコピペ
・key visual(=kv visual)はコンテンツや画像においてメインのイメージ画像のことでマークアップをしていく
・各セクション(About、Servide)のマークアップをしていく
・マークアップをする際は、あとで見返してわかるようにコメントアウトする
例えば、
というふうにコメントアウトした始まりと終わりの間に
や、
を入力する
html記述後、css記述をしていく
cssも同様にあとで見返してもわかるようにコメントアウトしていく
例えば、
/* ----------------------------- /
/ base
/* ----------------------------- */
baseは共通する項目:html{}、body{}、ul{}、a{}、.section-wrapper{}、.section-inner{}、.section-title{}を下記のように指定していく
html{
font-size: 62.5%;
}
body{
font-size: 1.6rem;
font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
color: #152a52;
line-height: 1.7;
letter-spacing: .05em;
}
ul{
list-style: none;
}
img{
width: 100%;
vertical-align: bottom;
}
a{
text-decoration: none;
}
.section-wrapper{
padding: 80px 0;
}
.section-inner{
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
.section-title{
font-size: 3rem;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
}
他は、headerとfooterのcssの記述、kv-visualのcss記述、aboutやserviceのcss記述も同様にしていく
・使ってみるの「#」はページ内のリンクを示しているとあるが、意味がわからない。
もっと意味と使い方を調べてみようと思う。
・