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

小林 I Webデザイナー @pulpxstyle

現場で使用してきたHTMLやCSSのTipsをモーメントにまとめました。フリーランスの私がこれまでの制作で実際に使用してきたもののみ紹介してます。 あなたの現場でも使えるものがあると思いますので、ぜひご利用ください！ ⚡️ "現場で使えるHTML&CSS Tips ①" twitter.com/i/moments/7819…

小林 I Webデザイナー @pulpxstyle

ダークモードを適用する時は『prefers-color-scheme:dark』とメディアクエリで指定する。 アプリのダークモード化が進み利用者は多い。サイトのニーズも増える可能性があるので是非おさえておきたい。 実際にコーディングしてみましたが予想より工数が多いので、予算は別途必要になりそうですね。 pic.twitter.com/tWoikUXziD

拡大

小林 I Webデザイナー @pulpxstyle

よくある質問ページで質問文をクリックすると返答文が表示されるアコーディオンはHTMLだけで実装できる。 『details』で全体を囲み『summary』内に質問文を入力する。これだけでOK。 jQueryで実装していたのでだいぶ楽になりましたね。 pic.twitter.com/cpCknPo8FO

拡大

小林 I Webデザイナー @pulpxstyle

スマホで動画を背景にする時は 『playsinline』を記述する必要がある。 playsinline…インライン再生 loop…ループ再生 autoplay…自動再生 muted…ミュート これらを記述する事で、スマホでも動画を背景にできます。 現場での使用機会はかなり増えているので覚えておきたいですね。 pic.twitter.com/lV9hUX5WvS

拡大

小林 I Webデザイナー @pulpxstyle

CSSのみで写真にエフェクトを施せる 『backdrop-filter』はフォトショ要らず。 画像のようにぼかしや白黒、コントラスト調整したフィルターがかけられる。 他に明るさ、色相、セピアなども。 :hoverに設定するのがおすすめです！ 残念ながらFirefoxは対応していないので今後に期待（あとIEも）。 pic.twitter.com/YbI0BZKNIq

拡大

小林 I Webデザイナー @pulpxstyle

背景に合わせてテキストカラーを変えるにはデータ属性が便利。 テキストの上に擬似要素（::before）を重ねて『width』と『overflow』で上にのせたテキストをカットして表現してます。 背景が50%ずつではないとズレてしまうので注意が必要。 使いどころはあるので覚えておいた方がいいですよ。 pic.twitter.com/yMIY4wG5d8

拡大

TAK @tak_dcxi

擬似要素は便利であるけれど、この使い方だとスクリーンリーダーで「CORONA DIES」が二度読まれるので僕はオススメはしない。擬似要素でなんとかせずに、素直に2つ目のテキストをaria-hidden属性を付与したspanなどで囲み、重複で読ませないようにした方がいいかな。 memolog.org/2012/05/aria-h… twitter.com/pulpxstyle/sta…

TAK @tak_dcxi

加えて、このテキストの書き方だとスクリーンリーダーで「シーオーアールオーエヌエー ディーアイイーエス」って読まれるので、HTML側では「Corona dies」と書いて大文字化はCSSのtext-transform: uppercaseでやった方がいいと思う。 htmq.com/css/text-trans…

小林 I Webデザイナー @pulpxstyle

CSSだけで画像を切り抜きできる『clip-path』がおもしろい。 画像のように写真右下をクリッピングして背景色（紫色）を見せる、といった表現ができる。 メインビジュアルのアクセントとして使えますね。 Firefoxのみ対応。他はベンタープレフィックス『-webkit-』でOKです（IEのみ未対応）。 pic.twitter.com/bpqHpqwjbS

拡大

小林 I Webデザイナー @pulpxstyle

カーソルをのせた要素以外にhoverを指定する方法。 ulに『:hover』で全体を対象にし、カーソルをのせたliだけ『:not(:hover)』で除外にする。 余白も適用範囲になるので『visibility』の指定が必要。 他を目立たなくする事で選択した要素にフォーカスを当てるスタイルも覚えておきたいですね。 pic.twitter.com/GzAD437pWz

拡大

小林 I Webデザイナー @pulpxstyle

未入力の対処には『:empty』が便利。 空要素にスタイルが施せる。 WordPressでクライアントに投稿してもらう際に未入力になる事があるので、予め設定しておきます。 PHPの条件分岐で入力がないと親要素（dl）ごと非表示にできますが、この画像のように残しておきたい場合はCSSも良いですね。 pic.twitter.com/bh1XUQZqxU

拡大

小林 I Webデザイナー @pulpxstyle

外部リンクにtarget="_blank"を付与する時は『rel=”noopener”』も記述する必要がある。 リンク先のページのjsによって元のページを操作出来てしまうから。 ただ、IEだけ未対応なので『rel="noopener noreferrer"』と記述する必要があります。 参考：qiita.com/Apprentice_eng… pic.twitter.com/sw4BMjT7eD

拡大

小林 I Webデザイナー @pulpxstyle

CSSのみでカルーセルを実装には『scroll-snap』が便利。 ・デモ：pulp.style/demo/carousel/ 親要素に『scroll-snap-type』 子要素に『scroll-snap-align』 表示領域内でスクロールスナップができます。IE未対応なのですが、横スクロールができるので問題ないかと。 CSSだけで実装しましょう！ pic.twitter.com/1PNqYPWC6F

拡大

小林 I Webデザイナー @pulpxstyle

大手サイトのIE対応はこんな感じ。 【YouTube】 YouTube動画はChromeでご覧ください 【Twitter】 Twitterをできるだけ快適にご利用いただくため、Microsoft Edgeを使うか、Microsoft StoreからTwitterアプリをインストールしてください 【Instagram】 真っ白なページのみ hatafull.co.jp/blog/6049

小林 I Webデザイナー @pulpxstyle

『shape-outside』で円形画像にテキストを回り込ませる事ができる。 デモ：pulp.style/demo/text-shap… shape-outside: circle(50%) を設定することで、画像の縁に合わせてテキストを回り込ませる事ができます。 レイアウトに単調さを感じたら試してみてください。 ※IE未対応 pic.twitter.com/gM5knOtve4

拡大

小林 I Webデザイナー @pulpxstyle

ボックスの周りに半透明のボーダーをつける時は『background-clip』が便利。 background-clip: padding-box を指定すると背景の基準がpadding 内になります。この状態でborder を指定する事で半透明のボーダーが表示されます。 これからは擬似要素を使わずとも1行だけで簡単に表現できますね。 pic.twitter.com/dxrYH7L9Yk

拡大

小林 I Webデザイナー @pulpxstyle

floatの解除は『display: flow-root』が便利。 親要素に1行だけでOK。 clearfixは擬似要素と数行の記述が面倒でした。これでだいぶ楽になりますね。 ただ、IEは未対応なので必要な方は親要素に『overflow: hidden』だけでもfloat解除できますよ pic.twitter.com/Gg6NoCAqa8

拡大

小林 I Webデザイナー @pulpxstyle

部分的に全画面表示にするには『calc』が便利。 文章の半分50%を全画面の半分50vwで引いて要素を広げます。 calc((50vw - 50%) * -1) 文章の外側部分のマージンを取得するため-1をかける。『calc(50% - 50vw)』でOK。 現場で使えるのでぜひ試してみてください。 詳細→pulp.style/demo/calcmargi… pic.twitter.com/To90VyKFUe

拡大

小林 I Webデザイナー @pulpxstyle

CSSアニメーションはanimationとkeyframesで演出する。 keyframesのfrom→toで動きの前後を設定（%も可）animationで調整。 ①アニメーションの時間 ②表示遅延の時間 ②で複数要素の表示順を調整できる。 ファーストビューに使えますのでぜひ試してみて下さい。 デモ：pulp.style/demo/fadein/in… pic.twitter.com/WNhjaZAkuN

拡大

小林 I Webデザイナー @pulpxstyle

画像のhoverスタイルは『transform』が便利。 ①は回転 ②は拡大 親要素に『overflow: hidden』を指定する事で、はみ出した部分を非表示にしてます。 半透明など一般的なhoverスタイルから変えたい時に試してみてください。 pic.twitter.com/MdgeBmrST9

拡大

小林 I Webデザイナー @pulpxstyle

CSSだけで横からスライドインさせるアニメーション。 画像を擬似要素で隠し①で起点を決める。 ②で横幅を0にする事で起点へ向けて擬似要素が消えていき、下にある要素が表示される仕組み。はみ出す事があるので調整が必要。 これは現場ですぐ使えるのでぜひ！ ・デモ：pulp.style/demo/slidein/ pic.twitter.com/rqM9G7sHvW

拡大

小林 I Webデザイナー @pulpxstyle

テキストリンクhover時の下線をアニメーションさせる方法。擬似要素なしで出来ます。 ①『background-size』の『0』で非表示 ②『100%』で表示 ③『background-position』の『0』がアニメーション起点。『50%』で中央から左右へ広がる コンテンツ内のリンクエフェクトで使えますね。 ※IE非対応 pic.twitter.com/QvcYBa8MTM

拡大

小林 I Webデザイナー @pulpxstyle

CSSでテキストにノート風の罫線を付与する方法。 ①罫線とテキストの間隔を統一。数値は同じに。 ②線の太さ。96〜98%がベスト。 ③線の色。淡い色を指定。 この手のTipsをストックしておくといざという時に便利ですよ。 pic.twitter.com/IaWDrb5S3z

拡大

小林 I Webデザイナー @pulpxstyle

フォームのcheckboxデザインは『擬似クラス（:checked）』と『擬似要素』で実装する。 ①でデフォルト削除 ②擬似要素（::before）で四角の枠 ③擬似クラス（:checked）と擬似要素（::after）でチェック後のスタイル これを覚えておけば、ある程度自由にスタイルを施せるようになります。radioもね。 pic.twitter.com/PQSw72bXQy

拡大

小林 I Webデザイナー @pulpxstyle

斜線背景はCSSで。 線形グラデーション（linear-gradient） ① 正方形の背景 ② 線の角度 ③ 線の色 上記指定で要素内に斜線背景が敷き詰められます。①で線の太さを変える事ができて、細かい線や太い線も表現可能。 使いどころが多い斜線背景は細かい調整ができるCSSで実装するとかなり便利です。 pic.twitter.com/WcfI1sbp0s

拡大