20220202🐱
【初期トレーニング7】
今回はレスポンシブ・デザインと課題でグリッドの作成を行った。
レスポンシブ・デザインとはユーザーが閲覧するデバイスの画面サイズに合わせて表示を最適化することである。スマホでウェブサイトを見ていると「PC版にする」といった表示がされるが、これもレスポンシブ・デザインが関係している？？
htmlに以下のコードを記述する。
<meta name="viewport" content="width=device-width,initial-scale=1">
①適応前
②適応後
適応後は画面サイズに合った文字の大きさになっているので見やすい。
(CSSでもレスポンシブの実装が可能だが、ゼロから記述するのは大変なため「ライブラリ」という完成コードの集まりを有効活用するとよい。)
格子状の線のことをグリッドといい、デザインで余白やレイアウトを統一的に設定するために使われている。グリッドを使うと文の長さを揃えられるので凄く綺麗な見た目になる。
①html
<div class="wrapper">
<div class="one">
<h1>one</h1>
</div>
<div class="two">
<h1>two</h1>
</div>
…three~sixまで同様に指定する
②CSS
.wrapper {
background: rgba(11, 52, 110, .5);
display : grid ;
grid-template-columns : 1fr 1fr 1fr ;
grid-template-rows: 150px 100px;
column-gap : 5px ;
row-gap : 1em ;
}
display : grid この箱はグリッドにする
grid-template-columns : 1fr 1fr 1fr グリッドセルは3列にする
grid-template-rows: 150px 100px; 1行目の高さを150px、2行目以降を100pxにする
column-gap : 〇px ; 列の間隔
row-gap : 〇em ; 行の間隔
上記のまま記述したらグリッドの背景色が濃くて暗い色だったのだが、気に入らなかったのでいろいろいじってみた。rgba(11, 52, 110, .5)というところにカーセルを合わせたらカラーミキサーのようなものが表示されて色を変えることができた。
frとは「Fraction(分数の意味)」の略でグリッドレイアウトを使うにあたって誕生した新しいサイズの単位である。
今回はgrid-template-columns : 1fr 1fr 1fr ; と記述し、グリッドセルを3列表示させた。これをgrid-template-columns : 1fr 2fr 1fr ; と記述すると2frの箇所では1fr2つ分のサイズのグリッドが表示される。
カラーホイール
類似色や補色などのカラーパレットを作成してくれるサイト
