コーディング模写01
また更新が滞っていたので、焦りながら記録。
今回はいつかやったコーディング模写。
参考サイトは Progateの一部。
出来上がったのがこちら↓
今回は訳あって、完璧に模写じゃなく、ちょっと変えています。
メインビジュアルと背景以外は1000pxで統一させたので、なんか無駄に余白ついてしまった。
ヘッダーとフッターは揃えない方が良かったかも。
だいたい授業で習ったことでできたので、そこまで苦労することもありませんでした。
けど一応復習にもなるし、忘れていた箇所や迷った箇所をまとめます。
【迷ったところ】
・ヘッダーの固定
width100%でヘッダーを作るなら、position:fixd;をかけるだけで良かったけど、今回は1000pxでの指定だったので、背景色を付けても横幅いっぱいにならない。
なので<header>内に入れていた、<p>と<nav>を囲う箱を新しく<div>で作る。そして、それを中心に来るように指定。
あとは<header>と囲った<div>の背景を一緒にすればok。
<header class="header">
<p class="header_logo"><img src="image/logo_name.png" alt="Progate"></p>
<nav class="header_nav">
<ul>
<li><a href="">レッスン</a></li>
<li><a href="">新規登録</a></li>
<li><a href="">ログイン</a></li>
</ul>
</nav>
</header>こうだったのを、、、
<header class="header">
<div class="header_inner inner">
<p class="header_logo"><img src="image/logo_name.png" alt="Progate"></p>
<nav class="header_nav">
<ul>
<li><a href="">レッスン</a></li>
<li><a href="">新規登録</a></li>
<li><a href="">ログイン</a></li>
</ul>
</nav>
</div>
</header>こうするだけ。
あとはCSSを当てる。
＜！注意すること＞
・positionを使う時は、要素の重なりに気を付ける。
・Z-indexを使って調整すること！
【学んだこと】
①字間を調整する方法
letter-spacingを使う。
letter-spacingは初期値でnormal（実質０）がかかっている。
指定する値はemがいい。
emで指定すると、文字のサイズに応じて字間を変えてくれる。
emの字間の考え方
1em＝「文字の高さ」。
0.1emだと「文字の高さの1/10の大きさ」の字間ができる。
0.5emだと「文字の高さの1/2の大きさ」の字間。
おすすめのletter-spacingの値
字間を指定するなら、おすすめは0.05em〜0.1emくらい。
ほとんどサルワカさんのサイトから必要な情報を取り除いただけなので、またしっかり確認しよう。
②字体の変更
font-family
授業でも教えていただいたのですが、いざ自分だけでコードを書くようになると詰まることなど多かったので、復習＋勉強で記録しときます。
＜書き方＞
font-family:'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'基本的に複数の種類を指定。フォント同士の間は,で区切る。
複数書く理由は、OSによって見えるフォントが異なるから。
＜！注意すること＞
・前に書かれたフォントが優先される
コードの中で1番目に書いたフォントが優先されて適応されていく。
・英語フォントを前に書く
上のコードを見てわかるように、英語フォントを先に書く。
「英語フォント」⇨英語だけを表示できる
「日本語フォント」⇨英語＋日本語を表示できる
英語フォントを先に書くことで、アルファベットには英語フォントで、日本語の文字には日本語フォントが使われる。
※アルファベットも日本語フォントで表示したい場合は、日本語フォントを前に書く。
・間に半角スペースの入るフォント名は「’」ではさむ
Avenir Nextなど間に半角が入るものは、「’」か「”」で挟む。
・最後に総称フォントファミリー名を書く
総称フォントファミリーとは
パソコンに指定したフォントが全く入っていなかった場合の最終手段。5種類ある。
⑴「sans-serif」ゴシック体系
⑵「serif」明朝体系
⑶「monospace」等幅系
⑷「cursive」筆記体系
⑸「fantasy」装飾系
基本的には「sans-serif」か「serif」でいいっぽい。
・bodyをセレクタとして書く
サルワカさんオススメのフォントファミリーが上で書いたコード。
各環境に対応しているフォント種類は「Font-familyメーカー」で確認できる。
③ナビのアニメーション
今回はコピペしただけです。
ホバーした時、左から右に線が伸びるようなアニメーション。
＜CSS＞
a {
position: relative;
display: inline-block;
text-decoration: none;
}
a::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #333;
transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
}
a:hover::after {
transform: scale(1, 1);
}
・transform-originプロパティ
要素の基点を指定するプロパティです。
初期値は50% 50%で、要素の中心になる。
セレクタ名 {
transform-origin:X軸の位置 Y軸の位置;
}
＜値の指定方法＞
中心点の位置となるx、y、z座標を半角スペースで区切って指定する。z座標については、単位付きの数値でのみ指定可能。z座標を省略した場合は、0pxが適用されます。
任意の数値＋単位⇨中心点の位置を単位付きの数値で指定。
%値 %値⇨値は要素の幅、高さに対する割合。
left⇨中心点のx座標を0%（左端）にする。
right⇨中心点のx座標を100%（右端）する。
top⇨中心点のy座標を0%（上端）にする。
bottom⇨中心点のy座標を100%（下端）にする。
center⇨中心点のx、y座標を50%（中央）にする。
・transform: scale
scale＝伸縮
4つある関数のうちの1つ。
値は数値だけ。
数値は、1を基準に伸縮する比率を整数か少数で指定。
2D（XY方向）と3D（XYZ方向）の指定できる。
scale()関数でX軸とY軸をまとめてかける。
セレクタ名 {
transform:scale(数値,数値);
}・transitionプロパティ
変化するまでの時間を設定するプロパティ。
ここに関する記述でわからない箇所があったので調べる！！
transition: transform .3s;上の記述の意味がわからない、、、
transformプロパティに対して3秒かけるってこと？
でも.があるのはなぜ？
試しに.を,変えたら3秒かけて動きました、、、
ここはまたしっかり確認しておこう。
④ クリックしたらボタンが押せる形
＜CSS＞
.massage_btn {
background-color: #7cdda2;
color: #fff;
display: inline-block;
padding: 15px 45px;
margin-bottom: 80px;
border-radius: 5px;
box-shadow: 0 7px #1a7940;
}
.massage_btn:hover {
background-color: #47a56c;
}
.massage_btn:active {
box-shadow: none;
position: relative;
top:7px;
}
＜実際にボタンが押せているように見せる方法＞
まず、box-shadowで影を作成。
※０が水平方向、7pxが垂直方向に対して数値を当てれる。
.massage_btn:activeでクリックしたときに
・影をなくす
・影を作っていた高さだけ、positionで移動させる
すると押したように見える。
・擬似クラスのactiveとは
クリック中の要素にスタイルを適用することができる。
クリックしてから離すまでの間適応される。
以上です！
次はこれをレスポンシブ対応させようと思います。
この記事が気に入ったらサポートをしてみませんか？