本日のプログラミング学習
HTML & CSS
Lesson1~Lesson17 / 8hour
Total / 8hour
<HTMLについて>
●画像の表示方法
<img src=” alt=”> と記述する。
srcは「編集しているhtmlファイル」を基準として、「挿入したい画像がどこにあるのか」を指定する必要がある。
altはその画像の名前を記述することができる
＊トップページのhtmlは最上位階層に配置することが通例
例としてexample.jpgという風船の画像を表示したい場合
① htmlファイルとexample.jpgが同じフォルダ内にあるとき
<img src=”example.jpg” alt=”風船”>
こうすることでhtmlを基準として同じフォルダ内にある「example.jpg」を探し出し、合致するものがあれば表示される
② example.jpgがフォルダ「picture」内にあるとき（フォルダはhtmlと同じフォルダにあるものとする）
<img src=”picture/example.jpg alt=”風船”>
こうするとpicture/が「pictureフォルダの中にある・・・」となり、example.jpgを探してくれる
＊「/」は下位階層へのリンクするときに使うもの。
③ example.jpgが、htmlフォルダよりも二つ下の階層にあるフォルダ内にあるとき
ー ←htmlがあるフォルダ
ー
ー ー － ←ここにexample.jpgがある
<img src=”../../example.jpg” alt=”風船”>
「../」とすることで、ひとつ上の階層にジャンプすることができる。階層の分だけ「../」をつける必要があるので、4階層分であれば「../../../../」を、画像名の前に記述すること。
<br>と<br />
後者はXHTMLの文法表現。意図している「改行」はHTML5ではどちらでも可。
https://teratail.com/questions/27157
placeholderタグ
<placeholder></placeholder>で囲んだ文字列はフォームが未入力の場合、半透明で表示させることができる。
「タグ」は役割。
単に文字の大きさやサイズでタグを選択するのではなく、「そこにどのような役割りを持たせたいのか」を必ず意識する。
これは以前SEOの内部対策で勉強した、グーグルのクローラーがサイトに訪れた時にも、参照される…ような気がする。
<CSSについて>
●CSSの優先順位
①!importantが値の後に適用されている
p {color: blue !important;}
②HTMLでスタイル属性が使用されている
<p style=”color: blue;”>—–</>
③セレクタ＋id属性
p #section-title {color: red;}
④セレクタ＋クラス属性
p .section-title {color: blue;}
⑤コードの記述順
p {color: blue;}
p{color: red;}
＊優先順位は、「要素の特定度合いが強いほど高い」
自分の思った通りのスタイルにならないときは、上記のことを考える。特にミスをしやすそうなのは、４と５だろうか。
*bodyタグに対しては、{margin: 0; } {padding:0;}と最初に指定するのが実務では常識となっている。
ブラウザやOSによって使用できないフォントがあるが、このフォントを使用すればブラウザからフォントを読み込むためエラーがない。
html headに記述
<link href=”https://fonts.googleapis.com/css?family=Ubuntu&display=swap” rel=”stylesheet” type=”text/css”>
css 適用させたいセレクタに記述
x {font-family: ‘Ubuntu’, sans-serif;}
ATOMエディターのショートカット一覧
極力作業効率を上げるように、初心者のうちから身体に覚えさせ方がいいかも。
全て覚える必要はもちろんなく、使用頻度の高いものや自分の癖にあったものを使ってく。
今日の反省点
CSSで「}」閉じ括弧を忘れてしまい、以降に書いたスタイルが適用されず20分を費やす。
こうしたミスで全部がダメになってしまうので、細部に渡って気を配る。当たり前だけど、それが肝要。
学習は全てウェブカツ！！というプログラミングスクールで学んでいます。
大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]
