【CSS】見た目にびっくりする 装飾をCSSで作るときのHTML・CSS知識とコツ


初めに

そんな装飾どうやってデザインしたのっていうのよく見かけますよね。
最初はビビってしまうかもしれませんが
大きく3つのことがしっかり理解できていれば、

あれ?自分でもできるかなって思えるポイントがあります。

それをざっくり 覚書としてまとめておきました。
ビジュアル的な内容ではなく、構成要素の設計的視点の記事です。

サンプル

図形だけで、絵を描くサンプル

複雑な描画要素を増やす方法

::after ::before を使う

これらは、HTML要素の前後に 記号■を付けたりできるものですが、 タグそのもの指定ができるため、::after要素と、 ::before要素を使うことで、実質3倍の要素が作れるようになります。
別に他のタグでもいいですが、この要素をCSSで使えば、
HTML側に大きな要素追加等が起こらないので
見通しは若干良いようです。

position で位置調整する

positionで指定する内容とは

説明を見てもわかりにくいと思いますが、
ブラウザのレンダリングエンジンがやっているのは、上から順番に  紙面に対して詰めていっています。その方法がデフォルト指定の  static です。
つまり親要素の中で、ほかの兄弟と押し合いへし合いながら場所が定まります。
きちっと定まったイメージで静的(static)という値がデフォルトです。

一方、その static の位置から ちょっとずらいしたい時、relative を指定します。

何がどこから relativeで相対位置なのかというのは本井太一からという、そういう意味です。

static と relative は 兄弟の位置で決めますが、直親の位置からの相対位置で決めたいときがあります。そういうときはabsoluteです。HTMLでいう、基準点をもとにした 絶対値なので、実際はかなり相対的です。それがネーミングセンスに表れていて、混乱に拍車をかけていると思います。 stack over flow やWebの記事も多いのではないでしょうか? しかも、相対位置と比較するように、絶対位置と叫ぶマニュアルが多数ですから。

作りによって、  absoluteかrelative かを使い分ければ、かなり自由に位置が調整できます。

link の hover やボタンを押し込めたいときは  relative で  top , left を指定すれば簡単ですね。

本来いた位置からずらすのは relative、兄弟がいっぱいいて場所が確定しにくい時は、親要素を活用してその相対位置を指定するやり方が absoluteです。ただし直親も デフォルトのstatic だとさらに上の階層の親を基準にします。なので基準にしたい親にrelativeを付けておくとコントロールしやすいです。

boxを理解する。

HTMLレンダラーは、このboxの単位で計算しています。 inline や blockの話なども boxの説明です。
「なんとなく理解している」からもう一段しっかり理解しておくと、問題が起きた時整理しやすいです。

fire-bugsなどで、 今は  padding , margin, boarder の分かりやすい説明はいたるところにありますし
詳細は省略しますね。

幅を指定するときも直感と違和感がありますが
box-sizing を指定すれば柔軟に子要素のサイズをしてできます。

デフォルト値は ボーダーという囲い線の内側でHTMLは計算されます。ボーダーと内側の詰め物のpaddingの厚みも含めたいときは、box-sizingで切り替えます。

基本的な装飾パターンは このborderで行います。

やりたいこと 実現方法
付箋紙のように左側に線を作る
border-leftを指定する。
border-top: 2px solid red;
border-bottom: 2px dashed darkgray;
上や下線も同様。
蛍光ペンは普通にグラデーションの背景色で、一定割合透明化
立体感を作る border の rigid指定を活用する。
点線や、ドット線、2重線ならあるし、それ以外であればHTML要素を作るなりして線・点、箱、楕円が描けるので何とでもなります。
border: 10px ridge red;
丸みをつける
真円
borderにプラス、border-radius を指定する。極端に半分のサイズを指定すればも書ける。
border-radius: 6px;
border-radius: 50%;width:0;height:0;
border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;

border: 2px solid black; border-radius: 50px 50px 0px 0px; width: 100px; height: 100px;
border: 2px solid black; border-radius: 0px 50px 50px 0px; width: 100px; height: 100px;
border-radius: 50%/12%;
三角 borderの厚みを利用して中身を 0サイズにする。
大きく2つのパターンがある(一定方向だけボーダーを書く場合と、隣接する方向を透明化する方法)
向きに合わせて上下左右を透明や空にすると▲になる。
boxモデルの理解が出きていれば、想像できる。
CSS ボックスモデルの紹介 - CSS | MDN

width: 0; height:0; border-top: 15px solid black;

width: 0; height:0;border-top: 59px solid black; border-right: 25px solid transparent;
平行四辺形 transform , skewを使って傾かせる。ひし形はサイズを調整して傾ける。
transform: skewX(-20deg);
台形 三角形モデルの時の発想を利用して、下をボーダーにし左右を透明化する。

border-bottom: 70px solid plum; border-left: 30px solid transparent; border-right: 30px solid transparent;
レ点 ボーダーの2方向のみ線を付け、傾ける。角丸を付けたり、縦横比率を変える。
A
B

width:30px; border-width: 0 10px 10px 0;transform: rotate(50deg);
図形 ★、♥、卵などは、 丸、三角などを組み合わせればできる。 そういえばラッキーパズルやってたなぁ
ふち抜きしたり重ねる。  
left top による指定を使って位置をずらす。
回転させる  transition  効果で、回転、拡大、ななめずらしを組み合わせる。
🍭
動きを付ける。

色などについては、:hoverなどの要素を使って、背景色、ボーダー色、フォントの色を切り替えます。
位置については、 left , topなどの要素を使って指定します。
色は、白や透明(transparent)、半透明(rgba()記法) などを使って考えます。
トランジションを付ければスムーズに変化します。
transition - CSS | MDN

マウスオーバーしてみると!?

複雑な動きは  その transitionに キーフレーム指定のアニメーションパターンを作って、独自のアニメパターンも設定できるようになりました。

@keyframes - CSS | MDN

💥
🌛

装飾については影(shadow)など、もうちょっとありますが、
大体これらのパターンを理解すれば、複雑なパターンを自分で自由に
調べながらでも、作れるようになるでしょう ^^)

 

サンプル

図形だけで、絵を描くサンプル

 

トグルスイッチ

そのままcheckboxを使うの ではなく、トグルスイッチの例です。

上で説明した技術を使っています。
element本体で枠を描き、 ::after要素を使って、丸スイッチを描いています。
前のcheckboxの値によって、スイッチの場所等を  relative指定で動かしています。
スイッチの丸は 角丸四角を極端に大きくして 真円を実現しています。

 

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です