0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Webデザイン入門(先行リリース版)HTML/CSS基礎 ~HTML TML/CSSでWebサイトの記述をしていこう!~

Posted at

・ ブロックを紙に書き出すことから始めて、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記述も同様にしていく

・使ってみるの「#」はページ内のリンクを示しているとあるが、意味がわからない。
もっと意味と使い方を調べてみようと思う。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?