半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録1日目

更新日:

こんにちは、こずえです。
プログラミング学習記録1日目です。
今日はCSSの学習を行いました。
帰社時間が遅かったのですが初日からサボるわけにはいきません。
できる時間だけやっていきましょう。

合計学習時間

前回までの時間:0[h]
今回の時間:0.75[h]
合計時間:0.75[h]

学習内容

はじめてのCSS入門講座

はじめてのCSS入門講座
TechAcademy [テックアカデミー]

動画数全34本あります。
今日下記3本を進めました。

使った時間は45分です。

ざっくりメモ、気づき、お役立ち情報

  • セレクタ
    「どこの」
  • プロパティ
    「なにを」

  • 「どうする」

「セレクタのプロパティをどうする」

要素に直書きした場合の例
<p style="color: red;">pの文字の色は赤色になります。</p>

pの文字の色は赤色になります。

あとに書いたものが優先される

セレクタの書き方によって優先度が変わる
下記は1が優先度最高です。

  1. 要素を特定したIDセレクタ(HTMLのタグとIDの併用)
  2. 要素を特定しないIDセレクタ(IDのみの利用)
  3. 要素を特定したclassセレクタ(HTMLタグとclassの併用)
  4. 要素を特定しないclassセレクタ(classのみの利用)
  5. タイプセレクタ(HTMLタグのみの利用)
  6. 全称セレクタ(*を利用した指定)

優先順位はCSSを記述していくにあたって意識していく必要があるかなと思います。
スタイルが適用されないといったつまづきがありそう。

idセレクタ→classセレクタ→タイプセレクタのみ→全称セレクタ
id、classは単体で使用するよりもセレクタを併用したほうが優先度が高いです。

要素に直書きはidセレクタよりも優先度が高いのですが、基本的にCSSは外部ファイルとして切り分けておくのが望ましいため頭の片隅にとどめる程度にしておきます。

!importantをつけたもの

強制的に最優先
下記のように記述する。

color: red !important;

「!important」で検索して下記ページを流し読みしました。
CSSで!importantを使った優先順位の変更【初心者向け】

ユーザが作成したスタイルにも優先度が適用される

下記は1が優先度最高です。

  1. ページ制作者の指定したCSS
  2. ユーザが指定したスタイル
    ブラウザごとにユーザが表示形式を選択したい場合に使用する
  3. ブラウザ独自のスタイル
用語メモ
CSS3

CSS2.1を拡張して、デザインの実現できる範囲を広げたもの。
現在策定中でブラウザによって対応状況が異なる。
ブラウザごとに先行搭載している機能もある。

プレフィックス

ブラウザごとに先行搭載されているものを使うときに必要。

mozilla系:-moz-(CSS3のプロパティ)
webkit系:-webkit-(CSS3のプロパティ)

以前Djangoのチュートリアル記事で見たことがありました。
その時にはどのブラウザでも対応できるようすべて記述していました。

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.