borderのグラデーション

linear-gradientは背景をグラデーションにできます。
カラーコード[#xxxxxx]で「,」で区切って入力します。
■html

グラデーション

■css
.border{
width:100px;
height:1px;
background:linear-gradient(-90deg, #00FFFF, #F6FF00);
margin:auto;
}

条件に一致しないと適用

条件に一致しない時にスタイルを適用したい時、否定疑似クラス:not()を使用すると便利です。not(h2)で指定すると、bodyにも「h2以外」が適用されてしまうので、クラス名をつけて詳細まで指定します。

.header :not(h2) {background: green;}

border の幅分ボックスからはみ出たときの対処

cssでのボックスの幅は width と padding と border-width の合計となります。
width : 250px;
padding 20px;
border-width : 20px;
実際の幅は330px

box-sizing:border-box を指定すると
width に書いた値が padding,border-width を含んだものになるのでwidth:250px;となります。

レスポンシブの際に横幅100%にすることが多い時
width: 100%;
height: auto;
この場合にborderを指定するとはみ出てしまいますが、box-sizing:border-box ではみ出し防止になります。

テキストにマーカーをつける

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

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

clearfixの使い方

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;
}

column-count  カラム数の指定

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

■html

カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1

カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2

カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3

■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

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

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

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