webデザイン中の舌打ちを限りなく減らすCSSでの装飾

ブログをデザインしていると、うわー、ココがもっとこうなってくれればなぁ！

と叫びながら頭をかきむしることがある。訳ですが。

実は知らないだけで、割と簡単にクリア出来るコトがいろいろとあります。知っておくとwebデザインが2秒くらい加速しそうなあれこれをお知らせします。

divの幅をwidthだけで制御したいんじゃ！

divの装飾をしたことがある方なら、実は結構計算が面倒なことをご存じでしょう。

パディングやボーダーなんかを設定したい場合に、widthからボーダー分を2px引いて、パディングがえーっと、うわーーーーーカラム崩れた！死ね死ね！ってなったことがある方、多いんじゃないですかね。いいんです、僕もそうです。せめてpaddingに関しては内包されろや！後からpaddingだけ変えたら大変な目に遭ったわ！ゴルァ！を繰り返しながら大人になるんです。

後からやっぱボーダー6pxにしたい！って変更を加えるとカラムが落ちて修正作業に追われます。

box-sizingを知ると超幸せに

【CSS】 “width:100%” を指定してもはみ出すときの対処法 | 世の中TickTack!

widthだけで制御したい要素のCSSを

.box{
    width:300px;
    box-sizing:border-box;
}

こんな感じで指定してやれば、paddingやborderをすべて含んだサイズをwidthで制御出来るようになります。メンテナンスがどれほど楽になるか、加速が半端ない感じです。

文字要素がバラバラなのが気になって仕方ないんじゃ！

特にリストなんかの装飾に使われる気がしますが、ブログ記事のタイトルなんかでは、文字量が各記事によってバラバラだったりしますね。

ぴっちりそろえたいのに困る！ことも有るかも知れません。

CSSだけで幅を超えた文字列を…で省略する #HTML #CSS – Qiita [キータ]

実はCSSだけで省略させることが可能です。

画像を作るんが面倒なんじゃ！

ボタンなんかはもうCSSで書いていまうのが早くて簡単でたまらない感じです。

.btn {
display: inline-block;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.19);
background: #f59587;
padding: 5px 20px;
color: rgb(255, 255, 255);
    }

.red {
    background:red;
    }

.green {
    background:#8bcdba;
    }

<span class="btn">ボタン</span>

<span class="btn red">ボタンの色を変える！</span>

ボタン

ボタンの色を変える！

ポイントはボタンの色の変更を簡単にするために、.btnのCSSでボーダーの指定に透明度を使っています。

透明度を少し駆使するだけで、CSSの装飾や変更が恐ろしく楽になる件*prasm_

CSS3を駆使すればもっといろんなコトが出来ますね。CSSで描画させるとレティーナ等の解像度が違うディスプレイでも綺麗に描画させるので、楽さが加速して困ります。

Top CSS Tools And Generators_

デメリットと言えば、CSSを切った場合、文字に戻ります。RSS等では文字になってしまうので、その辺注意。

CSSの装飾と言えば「疑似要素や疑似クラス」も知っておくと捗りますよ！

CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！*prasm_

まとめじゃ！

CSSでのレイアウトは奥が深くって、やろうと思えば力業や手間をかけて解消することが可能です。

しかしまあ、そうなってくると無駄なdivやclassが増えたりしてメンテナンスで支障がでることが多いですね。僕もそうです。

うわー！もう一から書き直すんじゃ！となると結局時間がメチャクチャとられてしまうので、できる限りメンテナンスが楽な方法を知っておくといいかもしれませんね。

とはいえ、うわー！を繰り返さないと便利さに気がつかないのも事実。

ストレスは減らしたいモノです。

文：シンタロヲフレッシュ

はてブ

pocket

twitter