カテゴリー: コーディング

文字の強調に。使い方によっては分かりやすく、おしゃれになります。
■css
.test{
background:linear-gradient(transparent 50%, #660000 50%);
}

linear-gradient(transparent 開始位置, 色の指定 終了位置);と設定でき、開始位置と終了位置の数値が離れるほどぼかしがかかる感じになります。

floatさせている画像やボックスなどの要素を内包する親要素が子要素を包んでくれない場合に、
clear:bothをクラス指定したりoverflow:hiddenを使用したと思いますが、これを解決してくれるのがclearfixです。

.clearfix:after {
content: “.”;
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}

.clearfix {
display: inline-block;
}

user-select: none;を指定すると、ドラッグ操作を禁止できます。
テキストをコピーされたくない場合などに使用できます。

/* テキストのドラッグ操作の禁止 */
p {
user-select: none;
}

/* 画像もドラッグ操作禁止 */
img {
-webkit-user-drag: none;
}

column-countのプロパティで、コンテンツの段組ができます。
以下のように値を3と指定したときは、3カラムのボックスが構成されます。

■html

■css
div.tst {
width: 500px;
column-count: 3;
}

■html

てすとてすとてすとてすとてすとてすとてすとてすと

■css
.hide_txt {
background: #cccccc url(./img/test.jpg);

text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

テキストを画像に置換出来ます。今までのtext-indent: -9999pxの代替です。

Flexboxなら下記のような並びも簡単に実装できます。

高さの異なる要素を、上下中央揃えできる
横並びになった要素の高さを揃える
要素を上下左右、並び替えられる
スペースの操作も簡単にできます。
■html

■css
.main a {
margin: 10px;
background: #cccccc;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
.main-nav {
display: flex;
}

positionを使うことでbeforeの疑似要素の高さが親要素の高さをそろえてくれます。
■html

■css
#test{
position: relative;
vertical-align: middle;
}
#test li:before{
position: absolute;
width: 16px;
height: 100%;
right: 0;
background-color: #72BBD1;
}

漢字にふりがなをつける

タグを使うと漢字にフリガナを付けることができます。
■html
実験じっけん

名前なまえ

仮名かな

省略したことを表す「…」をCSSだけで表示可能です。

CSSを使うと幅を指定してその領域よりもはみでた場合に省略記号「…」を表示することができます。

ext-overflow: ellipsis;
テキストが表示域をこえた時に省略記号「…」を表示

text-overflow: clip;
省略記号は表示しない