More than 3 years have passed since last update.

30代からのプログラミング勉強　9日目【HTML/CSS編】

Last updated at 2020-12-05Posted at 2020-12-03

イヤホンが壊れてしまい学習に影響が…急ぎ買い換えなくては！

##学習内容
###HTML

画像

<img src="画像の指定">

画像を貼り付ける事が出来る。

<img src="画像の場所" alt="何の画像か"

基本的にはこの様にaltを書き込む。視覚的な変化はないが読み上げ機能を使った時などにこの画像が何なのかを示してくれる。

リスト

<ol>
   <li>任意の内容</li>
   <li>任意の内容</li>
   …
</ol>

liの内側に書いた内容が
1.〜
2.〜
の様に番号が振られリスト化される。
開始番号を変更したりアルファベットにしたり逆順に番号を振るも可能。

リンク

<a href="URL">リンク</a>

URLリンク。CSSで色を固定にしたりよくある下線を消したり出来る。

実体参照

&copy; ©︎
&quot; "
&amp; &
&apos; '
&lt; <
&gt; >
&reg ®︎

環境依存文字の入力に使用する。

###CSS

回り込ませる

float: left;

厳密にはコマンドの通り浮かせる事が出来るCSS。上記の書き方だと左側に浮く。

回り込みを解除する

clear: left;

floatを解除する事が出来る。

.clearfix:after{
    content: " ";
    display: table;
    clear: both;
}

floatを使用してはみ出してしまった場合に背景を合わせてくれる記述。技術的な話は現時点では難しいので講座内では割愛となった。やり方は複数あるらしい…？

フォント

font-family:

指定したフォントを使用できる。Google Fontsを用いる事でインストールされていないフォントを表示させる事ができる。ただし開いた時に読み込んでくるので全文に使用したりするとページ読み込みに時間がかかりナンセンス。

Webフォントを使用する場合は@importでフォントについての記述を行った上でfont-familyで指定する。

##所感
…ではないがイヤホンの音が出せず復習がしにくいので後ほど再トライして追記予定。せっかく楽しくなってきた所だというのに…ッ

追記完了。