いざという時に使える13のHTML&CSS Tips集 | BUILD Journal

いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS

[arapro]

初見のものちょいちょいあった

[xlc]

スマホでスクロールできないページを作っておいて言われても説得力がない。

[bem13]

“right; } Copy また、画像とテキストの間に余白をあけること”

[style_blue]

テキストの円形回り込みかー使い所によっては効果的なのかなーどーかなー、写真を縦表示/横表示で切り替えられるのは便利かも。ポインタが乗ってる画像以外暗くするのも使えそうかも。

[mayumayu_nimolove]

テキストの円形回り込みを作るいざという時ってどんな状況だ？テキスト読みにくくしてくださいって依頼される時か。

[haruosaka]

便利！

[anpaku]

web制作のチップス集。

[shinagaki]

display: flow-root; 知らんかった。clearfixなんて要らんかった

[hirorinya]

学び

[otchy210]

flow-root, :empty, object-fit, line-clamp 初めて見た。ちょっと込み入った工夫あるいはハックで実現してたのを、シンプルな css プロパティとして実装するってのがずっと続いているのか。

[yarumato]

“数字リストを「1, 2,..」->「1.0, 1.1,..」->「1.0.0, 1.0.1,..」と入れ子に対応した連番をCSSで表示。hoverしていない画像を暗くする。li:not(:hover)でカーソルをのせていないli要素にスタイルを指定。”

[Hama_Yu]

本当に初心者過ぎて「これあのサイトで見たところだ！」と博物館感覚で読んでしまいました。初心者にもやさしい書き方をしてくださっているので大感謝の舞です。

[yoshi-na]

いざというよりよく使われることが大半なので新人さんは覚えとくとよい

[programmablekinoko]

プログラミングしなくても相当なことが出来るようになってるんだな…