LP制作を始めて作成している、ねこらのん（@nekoranon256）です。
完全初心者で2月から独学でHTML&CSSとJavaScriptを学び、無料の職業訓練でJavaを受け9月から晴れてサーバーサイドエンジニアになった友人がついでにレスポンシブデザインのyoutubeも送ってくれたのでまとめていきます。
前回の記事、【もりけん塾43日目】youtubeでの模写｜アニメーションのCSS、セレクタとプロパティでわからないところをまとめていきます。
前提：CSSのセレクタとプロパティとは
CSSのセレクタとプロパティは上記の画像のような場所にあるものです。
どこの部分（セレクタ）に対して『何を（プロパティ）どうするのか（値）』を決めるもの。
前回の記事でわからなかったところや曖昧な箇所を調べていきます。
-
-
参考【もりけん塾43日目】youtubeでの模写｜アニメーション
続きを見る
CSSのセレクタとプロパティ
前回の記事のCSSで不明なところをピックアップしていきます。
まずはセレクタ部分。
セレクタ
- @import url()
- *
- :before
- :hover
- :active,
- @keyframes fade-in
次はプロパティ。
曖昧なところも調べていきます。
プロパティ
- box-sizing
border-box - position
lelative
absolute - widows
100% - min-height: 100vh;
- display: flex;
- justify-content: space-between;
- align-items: center;
- top right bottom left
- clip-path: polygon(52%0, 100%0, 100%100%, 84%100%);
- animation: fade-in 0.5sease-inforwards;
animation: left-in 0.5sease-inforwards; - animation-delay: 1.5s;
- opacity: 0;
- font-size: 3em;
- font-weight: 800;
- background: #cfa19a;
- text-decoration: none;
- text-transform: uppercase;
- letter-spacing: 2px;
- max-width: 500px;
- transform: translateX(-200px);
セレクタとプロパティそれぞれ調べていきます。
わからないセレクタ
わからないセレクタを調べて、まとめていきます。
@import
外部ファイルを読み込むときに役立つ@import。
メリットはスタイルシートの記述が多くなったときに、いくつかシートを分けて使うことができるもの。
友人は@importを使い、スタイルシートをレスポンシブデザインやCSS、アクティブなど複数に分けた方がバグが見つけやすいと教えてくれました！
書き方
@import url("cssファイル名");
※階層が違う場合はurl("css/cssファイル名");の記述に
*
*はすべての要素に適用という意味があります。
:beforeや:after
:beforeは要素の直前に要素もどきとして挿入される。
:afterは要素の直後に要素もどきが挿入されます。
サルワカ先生の記事、CSSの疑似要素とは？beforeとafterの使い方まとめによると、この:beforeや:afterのメリットは以下のことがあります。
メリット
- HTMLに不要なコードが増えない
- SEOはCSSの疑似要素をコンテンツとして見ない
この:beforeや:afterを使う場合、
- :（コロンが1つ）
- ::（コロンが2つ）
2パターンあります。
コロンが1つはCSS2のブラウザで使用でき、コロンが2つ使えるのはCSS3に対応しているブラウザ。
コロン1→コロン2つにシフトチェンジ中なのでブラウザで判断してから使い分けると良さそうです。
content: ' ';
content: ' ';
の場合は文字や画像などを使わずに変更せずに使用するときに'空白'を用いる。
:hover
:hoverでリンク上にマウスを当てておりクリックには至っていない状態でのリンクデザインを指定することが可能なもの。
カーソルをあてて、
- 文字サイズを大きくする
- 色を変える
- 太字にする
- ボタンが沈むようにする
などが可能のようです。
現時点で私が画像クリックについて調べているのも、このhoverを使うと良さそうだと思っています。
理由はテキストをクリックすると画像が表示させるものに、
- もりけん先生がhoverを使うとおっしゃっていたこと
- エンジニアの友人がhoverを使うと言っていた
- hoverが使われていたのをみた
からです。
画像クリックに兆しが見えてきた！
:active
:activeはクリックされてから離れるまでの状態のスタイルを指定するもの。
@keyframes fade-in
@keyframesとanimationをセットで使い、CSSでアニメーション設定をするもの。
前回の記事、【もりけん塾43日目】youtubeでの模写｜アニメーションでアニメーション（動き）を使っています。
@keyframesと一緒に使うものは以下のとおりです。
- sizeScale：横幅が拡大する動き
- fadeIn：フェードインする動き
- 0%：アニメーション開始時
- 100%：アニメーション終了時
これについて、【CSS3】@keyframes と animation 関連のまとめの記事がアニメーション付きで違いを説明されており、わかりやすかったです。
わからないプロパティ
次はわからないプロパティについて調べていきます。
box-sizing
box-sizingによってwidthとheightの中にpaddingとborderを含めるかどうかを設定可。
| 幅 width |
高さ height |
|
| content-box | 含めない | 含めない |
| border-box | 含める | 含める |
| inherit | 親要素の値を引き継ぐ | 親要素の値を引き継ぐ |
前回の記事で頻出だったのがbox-sizing: border-box;でした。
このbox-sizing: border-box;はレスポンシブデザインで便利。
理由は指定している要素が余白など合わせてレイアウトが崩れないから。
box-sizingはメジャーなブラウザでは対応しているようなので利用できそうです。
注意
ブラウザが対応しているにも関わらず対応していない場合に、ベンダープレフィックスを使う。
ベンダープレフィックスはプロパティの前にかく
- -webkit-
- -moz-
- -o-
- -ms-
の文字のこと。
この内容はサルワカ先生の、【CSS】box-sizing:border-boxの使い方｜効かない時は？の記事を参考にしています！
box-sizingはもりけん先生がCSSでよく現場で使っていたとおっしゃっていたので重要事項…！
position
positionは要素の場所を決めるもの。
よく見るものは、
- lelative：本来の表示位置を基準に場所を指定
- absolute：親要素を基準に場所を指定
※親要素にrelativeを指定する必要がある - fix：決まった場所に要素を固定させる
です。
それぞれよく出てきたので覚えておきたい…！
positionとセットで使うtop、bottom、left、rightを次に調べていきます。
top right bottom left
positionで位置を決めて、top right bottom leftを指定していきます。
基準からの距離を指定するときに使います。
widows
widowsは印刷時に次のページに改行される行数を指定します。
印刷のときに、1ページを中途半端なところで改行され2ページ目にいくのを防ぐプロパティ。
つまり、1ページ目の内容は同じにして、区切りの良いところで2ページ目にいけるように指定できるプロパティです。
min-height: 100vh;
まず、min-heightは
vhの単位はviewport heightの略で、viewportの高さの割合を意味します。
メモ
vh：表示領域の高さに対する割合の単位。
min-height:=100vh;は「指定したセレクタの高さを表示領域と同じに」する。
min-height=100%;は「viewportに対して100%」に。
参考記事▶【CSS】最低限の見た目にするためにコンテンツを画面の中心にしたいだけです。
justify-content: space-between;
justify-contentはコンテンツアイテム内の周囲の空間を配置する方法です。
- :start;
- :center;
- :space-between;
- :space-around;
- :space-evenly;
上記の値が用いられます。
空間の配置について『 justify-content/MDN 』がわかりやすかったです。
よく模写には:space-between;が使われていました！
justify-contentは以下のようなものになります。
justify-content/MDN
これは覚えておきたいプロパティです。
align-items: center;
align-itemsは縦位置を決めるプロパティ。
今回使用されていたのはalign-items:center;で、以下になります。
align-items: center;/MDN
startの場合は上の位置に、endは下位置にレイアウトされ、stretchはbox部分がstartからend部分を占めるように伸びます。
clip-path: polygon(52%0, 100%0, 100%100%, 84%100%);
clip-pathは指定した要素にある内側領域を残し、外側領域を非表示にします。
clip-path: polygon(52%0, 100%0, 100%100%, 84%100%);の指定
この場合、polygonは四角を指定し、白と茶色の2種類の背景色の配分を指定しているcssになります。
他にもcircle（丸）やellipse（扇形）なども指定可能です。
動画でのツール紹介でCSS clip-path makerがあり、コピーするだけで簡単だったのでよかったら。
おわりに
模写していくと知らなかったcssを知ることができたので、幅が広がりました！
もりけん塾（@terrace_tech）
Thanks：もりけんさん