(自習)マークアップにも文法があるらしい
読んでおくこと
>適切でないマークアップは、検索エンジンに内容を正しく伝えられないため
SEOの効果が見込めなくなるのです
『HTMLで文書構造を表し、CSSでデザインする』という考えは、SEOにも大切な考え方です
セレクタについてここも読んでおくこと
↓
>『セレクタ』とは、スタイリングする範囲を決めるもので、要素名、id、classなどを使って、指定します。CSS3が勧告されて種類も多くなり、できることも多くなりました。中カッコで囲んだ範囲に、プロパティと値を書き込んでいきます。
セレクタにclass属性を使う場合は『.class名』
.style{
color:#ff0000;
}
セレクタにid属性を使う場合は『#id名』
#style{
color:#ff0000;
}
全称セレクタ(ユニバーサルセレクタ)
*{
color:#f00;
}
タイプセレクタ
特定のタグにスタイルを適用するときに使います。
p{
color:#f00;
}
属性セレクタ
[rel]{
color:#ff0000;
}
値が終了文字列で絞ることも可能で、その場合、セレクタの『=』の前に『$』を付けます。
例：data-example属性の値が『text』で終了する要素のテキストを赤くする
<p data-example="textdata">値がtextで終了していないので適用されない</p>
<p data-example="datatext">値がtextで終了しているので適用される</p>
<p data-example="texts">値がtextで終了していないので適用されない</p>
[data-example$="text"]{
color:#ff0000;
}
ヘルセムの続き
header部分をスタイル付けていく
その前にstyle.cssを編集
sytle.css
@charset "UTF-8";
html{
font-size:62.5%;/*こうやってルートのサイズを実質10pxにしておくとremの計算がらく*/
}
body{
font-size: 1.5rem;
}
.flex{/*横並びにしたいものは全部これで管理できる*/
display: flex;
}
index.htmlのnav部分にこのflexクラスを適用
<nav>
<ul class="flex">
headerにも付ける
<header class="flex">
cssのheader部分も追加
header{
justify-content: space-between;
}
>CSS の justify-content プロパティは、
フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、
中身のアイテムの間や周囲に間隔を配置する方法を定義します
今こんな感じ
.flex{}に追加
.header{}に追加
.flex{/*横並びにしたいものは全部これで管理できる*/
display: flex;/*横並び*/
align-items: center;/*縦方向に中心をそろえる*/
}
header{
justify-content: space-between;
padding: 1rem 2rem;/*余白*/
}
[HOME ABOUT NEWS CONTACT]が勝手に右揃えになったのはなぜか？
→
justify-content: space-between;のため
/*子要素の横に並ぶ時の余白。外の余白は無視する。アイテムが均等に並ぶ。が、今回アイテムが2つしかないからそれぞれが左右に存在。3つあったらそれぞれの間隔が同じになる*/
text-transform
textをすべて大文字にしたり頭文字だけ大文字にしたり小文字にしたりできる
元であるhtml部分の記述が全部小文字である必要がある
全部大文字で記述すると「略語かな」となるのでよくない
デザインとして全部大文字にするというのはあり
しかし外国人が見ると全部大文字というのは圧がすごいらしい
続いてfooter部分をやっていく
flex-direction/*フレックスの並び順を操作する*/
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
style.cssに追加
footer{
justify-content: space-between;/*2アイテムを均等に左右ぞろえ*/
flex-direction: row-reverse;/*アイテムを逆順で表示*/
padding: 6rem 4rem;
background-color: #f4f4f4;/*余白が消されているのでぴっちり背景色が塗られる*/
}
footer ul{
text-align: right;/*右揃え*/
}
ここまで
style.css
@charset "UTF-8";
html{
font-size:62.5%;/*こうやってルートのサイズを実質10pxにしておくとremの計算がらく*/
}
body{
font-size: 1.5rem;
}
.flex{/*横並びにしたいものは全部これで管理できる*/
display: flex;/*横並び*/
}
header{
justify-content: space-between;/*子要素の横に並ぶ時の余白。外の余白は無視する。アイテムが均等に並ぶが今回アイテムが2つしかないからそれぞれが左右に存在。3つあったらそれぞれの間隔が同じになる*/
align-items: center;/*縦方向に中心をそろえる*/
padding: 1rem 2rem;/*余白*/
}
header nav ul li{/*このliの3項目に余白がついているとよさそう*/
margin-right: 2rem;
}
header nav ul li:last-child{/*でもliの最後のやつには余白いらないや*/
margin-right: 0;
}
header nav ul li a{
color: #555;/*ちょっと灰色*/
text-transform: capitalize;
}
footer{
justify-content: space-between;/*2アイテムを均等に左右ぞろえ*/
flex-direction: row-reverse;/*アイテムを逆順で表示*/
padding: 6rem 4rem;
background-color: #f4f4f4;/*余白が消されているのでぴっちり背景色が塗られる*/
}
footer ul{
text-align: right;/*右揃え*/
}
