Webクリエイター 小林さんのCSS TIPS集

小林 I Webデザイナー @pulpxstyle

テキスト左右にラインを配置した見出しスタイルは擬似要素で実装できる。 『::before』『::after』を使って左右のラインを作り、flexboxで配置するだけ。 以前はspanを追加していたのですが今は不要です。 ラインではなく円や画像など色々配置できるので覚えておくと便利に使えますよ。 pic.twitter.com/edFxFeEnlN

拡大

小林 I Webデザイナー @pulpxstyle

CSS『background』プロパティ。 今私の現場で使うのは①〜⑥。 ⑦はiOSでサポートされてないものがあるので使わず、⑧は今まで使う機会がありませんでした。 ショートハンドは⑤⑥の順を『/』で区切って指定する。それ以外順番に決まりなし。 グラデーション指定は便利なので覚えておきたいですね。 pic.twitter.com/MCC3e0HBo3

拡大

小林 I Webデザイナー @pulpxstyle

写真と重ねた背景色の表現は『擬似要素』で出来る。（下画像の黄色部分の事） 『right: -10px』『bottom: -10px』でずらして『z-index: -1』で下層に下げる。 たまにこの表現をする機会があるので覚えておきたいですね。 pic.twitter.com/12jAYqWTCR

拡大

小林 I Webデザイナー @pulpxstyle

複数行テキストに背景色をつけるには 『box-decoration-break』が便利。 『display: inline』等の調整でも表現は可能だが、行ごとの余白が問題だった。 でもこれで調整可能。 ベンダープレフィックスが必要で、IEは未対応だが『padding: .3em 0』で左右余白なしのデザインは表現できます。 pic.twitter.com/3EViqLrjc0

拡大

小林 I Webデザイナー @pulpxstyle

『cursor』は37パターンあるが現場で使うのは『pointer』くらいで他は触る機会はないです。 何故ならユーザーが操作するものはデフォルト以外を選ばない方がいいと思うから。 なので、cursor: pointer 以外は知識のストックだけでいいかと。 デモ：pulp.style/demo/cursor/ ※PCでご確認ください pic.twitter.com/E2CXe2m2iQ

拡大

小林 I Webデザイナー @pulpxstyle

CSSでのローディングアニメーションは擬似要素で実装できる。 デモ：pulp.style/demo/opening/ ①コンテンツを隠す背景 ②画面上部で動く線 ③一番上の階層へ ④アニメーション後の非表示処理 ラインで進捗状況を表現できます。他のアニメーションに変更してもいいですね。 ※画像をタップ↓ pic.twitter.com/YmWqr3g3el

拡大

拡大

小林 I Webデザイナー @pulpxstyle

2色ラインで表現する見出しスタイルは擬似要素で実装。 ・before…黄色ライン ・after…黒ライン ①黄色ラインの横サイズを決める ②黒ラインの位置を①の分横にずらす ③『calc』で黒ラインの横幅を自動計算。レスポンシブに対応。 見出しはさまざまなスタイルをストックしておくと便利ですね。 pic.twitter.com/B4U5yxtfn1

拡大

小林 I Webデザイナー @pulpxstyle

2色ラインで表現する見出しスタイルをborderで実装。 ①黄色部分の横幅を指定 ②線の太さを指定 擬似要素を使った方法をツイートしましたが、そちらは擬似要素を活用するアイデアとして紹介しました。 borderを使うとさらに短いコードに。 どちらも覚えておくと様々なデザインで応用効きますよ。 pic.twitter.com/hR54jFwbXR

拡大

小林 I Webデザイナー @pulpxstyle

2色ラインで表現する見出しスタイルは擬似要素で実装。 ・before…黄色ライン ・after…黒ライン ①黄色ラインの横サイズを決める ②黒ラインの位置を①の分横にずらす ③『calc』で黒ラインの横幅を自動計算。レスポンシブに対応。 見出しはさまざまなスタイルをストックしておくと便利ですね。 pic.twitter.com/B4U5yxtfn1

拡大

小林 I Webデザイナー @pulpxstyle

CSS『transition』プロパティ ① 変化させるプロパティ ② 変化開始から終わるまでの時間 ③ 変化の進行割合やタイミング ④ 変化が始まるタイミング（遅らせる時間） ショートハンドで複数のプロパティ毎に指定する場合は、カンマ（ , ）で区切って⑤のように記述します。 pic.twitter.com/7452BgWEsN

拡大

小林 I Webデザイナー @pulpxstyle

CSS『font』プロパティ ショートハンドの場合『html』か『body』に、それ以外はプロパティ毎に指定。必須は④⑥で、④⑤⑥を一括指定。 ただ、私はプロパティに分けて設定してます。コーディングルールでショートハンドの指示があった場合に指定する事が多いです。 pic.twitter.com/XDJHUOHHQY

拡大

小林 I Webデザイナー @pulpxstyle

中央寄せの見出しに使えるこのスタイルは『linear-gradient』で。 ①45%まで左グレーの線 ②全体の45%〜55%までブルーの線 ③55%以降右グレーの線 ④線の太さ ビジネスサイトや医療サイトで使えるデザイン。色や太さを変えると別ジャンルでもOKなのでストックしておくと便利です。 pic.twitter.com/fXid45zFkk

拡大