インライン要素とテキスト装飾（a, span, strong, em, code, time）

現場で泣かないための `text-overflow`：インライン要素と「三点リーダー」の正しい付き合い方フロントエンドの現場で、「ここ、文字数が増えたらいい感じに省略してくれない？」という仕様変更は、もはや挨拶代わりですよね。カードUIのデ...

はみ出した文字を「…」でスマートに隠す！CSSでテキストを省略する方法をマスターしようWebサイトを作っていると、一度はこんな悩みにぶつかりませんか？「ニュースのタイトル一覧を作りたいけれど、文字数がバラバラでレイアウトが崩れちゃう…」「ス...

日本語タイポグラフィの深淵：`text-emphasis`とルビが突きつけるレンダリングの現実Webフロントエンドにおいて、日本語の「情緒」をコードに落とし込むことは、単なる見た目の調整ではない。それは、ブラウザのレンダリングエンジンという...

日本語組版の美学をWebへ：`text-emphasis`とルビ要素で実現する「伝わる」タイポグラフィWebサイトの国際化が進む中で、我々フロントエンドエンジニアが忘れがちなのが「日本語特有の組版ルール」です。欧文フォントを並べるだけがWe...

日本語の美しさをWebで表現する：傍点とルビで「伝わる」デザインをこんにちは！フロントエンドの世界へようこそ。Webサイトを作っていると、「ここはもっと強調したい！」「この漢字の読み方を添えたい！」と、日本語ならではの細やかな表現にこだわり...

境界線を越えるための思考実験：inlineとinline-blockの「不可視の制約」を解き明かすフロントエンド開発の現場において、`display: inline` と `inline-block` の使い分けは、CSSの基本中の基本とし...

なぜ「display: inline」と「inline-block」の挙動に、今さら深く向き合うべきなのかフロントエンドの世界に入って数年経つと、`display: flex` や `grid` がレイアウトの主役になり、`inline` ...

こんにちは！フロントエンドの世界へようこそ。HTMLとCSSを学び始めると、必ずと言っていいほど「あれ？なんで指定した幅が効かないの？」「勝手に変な隙間ができるんだけど！」という壁にぶつかりますよね。実はこれ、多くの人が通る「インライン要素...

CSSの深淵：`vertical-align` が引き起こす「1pxのズレ」とレンダリングの真実フロントエンドのフロントラインに立つ諸君なら、一度は経験があるはずだ。アイコンとテキストを横並びにしたとき、あるいは画像の下に謎の数ピクセルの隙...

なぜ、`vertical-align` はいつも僕たちを裏切るのか？フロントエンドの世界に入って数年、「CSSの垂直中央揃え」に一度も絶望したことがないエンジニアはいないはずだ。特にインライン要素の調整に使われる `vertical-ali...