はじめに
はじめまして!HTML & CSSの学習を始めて一週間経ちました.
Qiitaへの投稿の練習も兼ねて,これまで学んだことを箇条書きでアウトプットしていきます!
HTML
-
<head>
要素では,文字コード,ページタイトル,CSSファイルの読み込みなどの設定を記述する.
文字コードを指定することで,ページの文字化けを防ぐことができる. - クラスを複数指定するときは,それぞれのクラスの間にスペースを入れる.
<div class="btn red">
- viewportとは,レスポンシブデザインを適用する際に,端末に合わせて表示領域を変えるために指定する.
(content="width=device-width~"
の部分で端末のビューポートサイズを表示領域として認識させている)
viewportを指定しないと,スマホやタブレットでもPCの表示領域で画面が表示されてしまう,といったことが起こる.
(以下サイト参照)
- class名は数字からつけてはいけない.
CSS
- CSSで子要素をすべて指定するには,「*」を使用する.
- 不透明度をカラーコード(16進数)で指定するには,末尾に不透明度を16進数で記述する.
background-color:#00000CC;
(画像は以下サイトから引用)
- メディアクエリの
@media all and (max-wdth:~)
の記述について.
「all」の部分が,メディアタイプを表す.allがすべてのデバイス,printerがプリンターなどといった具合.
「()」内が,メディア特性.width(ビューポートの幅)やheight, aspect-ratioなどが指定できる.メディアタイプがallかつ,メディア特性を指定しているときは,@media ()
という簡潔な書き方もできる.
「and」は論理演算のandで「かつ」の意味.andを複数繋げて複数条件の指定や,「,」でorと同じ「または」とすることもできる.
(以下サイト参照)
-
text-align
プロパティについて.
インライン要素を親要素に対して中央寄せする場合は,親要素に対してtext-align:center;
.
要素内の文字列を,対象要素に対して中央寄せする場合は,親要素または対象要素に対してtext-align:center;
を指定.
(以下サイト参照)
最後に
今回はHTMLとCSSについて,アウトプットいたしました.
読みやすい記事になるように少しずつ改善を重ねていきます!