文系未経験プログラマ

忘れてもいいように書く

aタグをボタンっぽくする方法

【前提知識】a:hoverでaタグの領域にマウスがフォーカスされた時の体裁を指定できる


【本題】# リンクをボタンのように見せる方法display: blockにする -> paddingを設けることでコンテンツ領域以外もリンクとすることが可能更にhover時の背景色を変更することでクリッカブルであることをユーザーに知らせるa { display: block; padding: 20px 0;}

a:hover { background-color: #ffa320;}


【感想】background-colorの有効活用

 

【参考】

clearfixについて(floatは浮くらしい・・・)

【前提知識】
.clearfix::after {
content: "";
display: block;
font-size: 0;
clear: both;
}

【本題】
・::after疑似要素を使用して、タグ内の内容の末尾にボックスを配置して高さをかくほすることにより、親要素がfloatしている子要素の高さを認識できるようにする


【感想】
・clearfixしたらなんでfloatしている奴らの高さまで分かるんでしょうか?
結局floatしてるやつらは浮いてるんだから子要素の計算はclearfixで追加されたcontent: ""のみじゃないんだろうか

・そもそも浮いているっていう説明もどうかと思う。heightの計算しきに含まれないの方が納得できる気がする。

 

【参考】

CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ!

transmitでの改行コード

【前提知識】
mac, windows, unixではそれぞれ改行コードが異なる

 

【本題】
・transmitでサーバーにファイルをあげる際にデフォルトの設定だと改行コードがデフォルトで変更される

 

【感想】
・ちなみに改行コードは
mac: cr
unix: lf
windows: crlf

 

【参考】
特になし

heightについて

【前提知識】

・インライン要素にはwidthもheightも効かない

 

【本題】

・初期値はautoで要素の中身の分だけの高さになる

・px指定時は、要素の中身の高さに関わらず、高さが固定される

・%指定は少し面倒で以下の通り

 →基本的には親要素に対する比率で高さが決まる

 →ただし、親要素のheightが指定されていないと(初期値のautoだと)%指定が効かない

  →理由: 親要素のheightは、要素の中身によって決まる。子要素に%指定でheightを決めようとすると、この%は、親要素のheightに対しての比率になるが、その親の高さが決まっていないため、%指定が効かない。


【感想】

・基礎が大事

・heightは成り行きで決まる!!


【参考】

CSSのwidth(幅)とheight(高さ)の指定方法をマスターしよう