1行追記でデザイン変更〈 簡単css講座 / タイトル編 〉

お洒落なサイトやブログが多いですよね。
ブログを含め、WEBページはCSSを変更することで見た目を変えられます。

コーディングと言われると難しいと思いがちですが、1行追加するだけで簡単に実装できるデザインも沢山あるんです。1行追記でイメージアップできるかもしれません。

今回はCSS のプロパティの中でもborder とbox-shadowに焦点を当てて、画像付きでCSSを紹介します！

そもそもCSSの変更方法は？

CSSは同じものに対して設定されている場合、一番最後に指定されている内容が反映されます。
つまり、一番最後に付け足せば見た目に出てくるのです！

はてなブログの場合はデザインCSSがあります。はてなブログでのCSSの変更方法は下記をご覧ください。

web-making.hatenablog.com

CSS スタイルシート

border

プロパティ指定方法

指定箇所を線で囲うか、上下左右を指定して線を引きます。

/ 基本の形 /
border: style px color;
/ 上側に線を引く /
border-top: ~ ~ ~;
/ 下側に線を引く /
border-bottom: ~ ~ ~;
/ 右側に線を引く /
border-right: ~ ~ ~;
/ 左側に線を引く /
border-left: ~ ~ ~;

styleの種類

線の種類を指定します。特に使いやすいのは以下です。

none / 表示しない /
solid / 1本線 /
double / 2本線 /
dashed / 破線 /
dotted / 点線　丸 /

borderの詳細

細かく知りたい人は以下のリンクを参照ください。

border－スタイルシートリファレンス

box-shadow

プロパティ指定方法

指定箇所の周囲にぼかしをつけられます。

/ px指定は ①左右位置　②上下位置　ぼかしの範囲　広がる距離　色 /
box-shadow : 10px 10px 10px 10px #fff

1. 正の数を指定すると右へ 　負の数を指定すると左へずれます。
2. 正の数を指定すると下へ 　負の数を指定すると上へずれます。

borderの詳細

細かく知りたい人は以下のリンクを参照ください。

box-shadow－CSS3リファレンス

1行から書けるtitleデザイン

囲み

#blog-title h1{ border:solid 1px blue; }

上下線

#blog-title h1{
    border-top:solid 1px blue;
    border-bottom:double 3px blue;
}

破線で囲み

#blog-title h1{ border: dashed 1px blue; }

丸で囲み

#blog-title h1{ border: dotted 10px royalblue; }

左にアクセント

#blog-title h1{
    box-shadow: -5px 0px 0px 0px blue;
    background-color: whitesmoke;
}

斜めに影

#blog-title h1{ box-shadow: -3px -3px 5px 0px blue; }

周囲にぼかし

#blog-title h1{ box-shadow: 0px 0px 10px 0px blue; }