文系未経験プログラマ

忘れてもいいように書く

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(高さ)の指定方法をマスターしよう

widthについて

【前提知識】【前提知識】・インライン要素にはwidthもheightも効かない

 

【本題】・初期値はautoで、基本的に親要素の幅いっぱいに広がる・px指定時に、親<子にすると子が親からはみ出て気持ち悪い・width: autoと100%での指定による違いは、padding分まで広がるかどうか →autoならpadding分まで広がる →100%なら親のcontent分までしか広がらない


【感想】

・基礎が大事

・widthは横いっぱいに広がる!!


【参考】

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

positionでやる中央寄せ

【前提知識】
・親要素にposition: relative, 子要素はposition: absoluteを指定しておく

 

【本題】
・子要素をleft: 50%で、親の半分より右に持っていき、
更に子要素のtransform: translateX(-50%)で子要素自身のサイズの半分分左に持っていくと、
子要素が親要素の丁度中央に移動できる


【感想】
cssはこういう技っぽいのを覚えると結構覚えられる
・こういう技っぽいのを集めた本かサイトを知りたい


【参考】
仕事を通して知ったので特になし

vertical-alignとtext-alignの違い

【前提知識】
・vertical-align:縦方向の位置決めに使用する
・text-align:水平方向(つまり横方向)の位置決めに使用する

 

【本題】
・vertical-alignは、インライン要素とテーブルセルにしか使用できない


・text-alignは、ブロックレベル要素内のテキストとインラインレベル要素の位置を決めるのに使用できる

 

【感想】
・text-alignは微妙に動作がイメージしにくい

 

【参考】

text-alignの違い

text-align-スタイルシートリファレンス

CSS text-align property

 

vertical-alignの違い

vertical-align-スタイルシートリファレンス

CSS vertical-align property