文系未経験プログラマ

忘れてもいいように書く

CSS

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

CSS

【前提知識】a:hoverでaタグの領域にマウスがフォーカスされた時の体裁を指定できる 【本題】# リンクをボタンのように見せる方法display: blockにする -> paddingを設けることでコンテンツ領域以外もリンクとすることが可能更にhover時の背景色を変更するこ…

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

CSS

【前提知識】.clearfix::after { content: ""; display: block; font-size: 0; clear: both;} 【本題】・::after疑似要素を使用して、タグ内の内容の末尾にボックスを配置して高さをかくほすることにより、親要素がfloatしている子要素の高さを認識できるよ…

heightについて

CSS

【前提知識】 ・インライン要素にはwidthもheightも効かない 【本題】 ・初期値はautoで要素の中身の分だけの高さになる ・px指定時は、要素の中身の高さに関わらず、高さが固定される ・%指定は少し面倒で以下の通り →基本的には親要素に対する比率で高さが…

widthについて

CSS

【前提知識】【前提知識】・インライン要素にはwidthもheightも効かない 【本題】・初期値はautoで、基本的に親要素の幅いっぱいに広がる・px指定時に、親<子にすると子が親からはみ出て気持ち悪い・width: autoと100%での指定による違いは、padding分まで広…

positionでやる中央寄せ

CSS

【前提知識】・親要素にposition: relative, 子要素はposition: absoluteを指定しておく 【本題】・子要素をleft: 50%で、親の半分より右に持っていき、更に子要素のtransform: translateX(-50%)で子要素自身のサイズの半分分左に持っていくと、子要素が親要…

vertical-alignとtext-alignの違い

CSS

【前提知識】・vertical-align:縦方向の位置決めに使用する・text-align:水平方向(つまり横方向)の位置決めに使用する 【本題】・vertical-alignは、インライン要素とテーブルセルにしか使用できない ・text-alignは、ブロックレベル要素内のテキストと…

stylusでの「&」の効果

【前提知識】.特になし 【本題】stylusで「&」は親セレクタの参照例:コンパイル前textarea color #A7A7A7 &:hover color #000 例:コンパイル後textarea { color: #a7a7a7;}textarea:hover { color: #000;} 【感想】・smacssでサブクラスを追加する際に親セ…

absolute, relativeの意味

CSS

【前提知識】・デフォルトのhtml配置は、ブロックレベル要素(<div>, <p>など)はhtmlに記述されている順に上から下に縦に配置される。インラインレベル要素(<strong>, <a>など)は他のテキストなどに混じって表示される。 ・positionプロパティのデフォルト値は全てのタグにおいて</a></strong></p></div>…

px・%・emでのサイズ指定

CSS

【前提知識】特になし 【本題】・px(ピクセル):モニターの1ピクセルが基準、モニターは小さい点がたくさん集まって表示されているから、つまりはその点1つ分 ・%:何かに対する割合、対象である「何か」はプロパティごとに設定されている、例えばpタグのf…

:first-child, :last-child擬似クラスの説明

CSS

【前提知識】 下記htmlを例に使用します <tr> <td>:first-child is here</td> <td>ここは無関係</td> <td>:last-child is here</td></tr> 【本題】 ・tr td:first-child →緑色の要素が指定される →兄弟要素の最初 ・tr td:last-child →青色の要素が指定される →兄弟要素の最後 【感想】 まぁ上と…

タイプセレクタとclassセレクタ・idセレクタを併用するときの指定方法 編

CSS

【前提知識】 ・タイプセレクタ →タグ名のこと(例:p, h1, li 等) ・classセレクタ →class属性のこと(例:class="selector"のselectorのこと) ・idセレクタ →id属性のこと(例:id="selector"のselectorのこと) 【本題】 ・「li.selector」や「li#selec…

複数セレクタにスタイルを適用する方法・擬似クラスとは 編

CSS

【CSS前提知識】 ・セレクタの種類 →タイプセレクタ:タグ名を条件にするセレクタ(例: p {スタイル}) →全称セレクタ:すべての要素にマッチするセレクタ(例:* {スタイル}) →idセレクタ:id属性値を条件にするセレクタ(例:#footer {スタイル}) →clas…