0
0

HTML & CSS学習の記録

Posted at

はじめに

はじめまして!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について,アウトプットいたしました.
読みやすい記事になるように少しずつ改善を重ねていきます!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0