それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ
CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読
擬似要素の content 内で改行する方法 - by Takumi Hirashima
擬似要素の content 内で改行する方法を紹介します。 まずは content に改行コード「\A」を追加。 続いて white-space に pre を指定して改行コードを有効にします。 .example::before { content: “今日は\A月が\A綺麗ですね"; white-space: pre; } 表示が正しければ次のように表示されます。 content 内を改行コードだけにすると br タグを使わずに改行を挿入することもできます。 .example::before { content: “\A"; white-space: pre; } 擬似要素の content 内で改行する方法を紹介しました。
CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも
PHP Archive
JavaScript(ECMAScript) にはバージョンによって大きく機能に差があり、最新の書き方をすると古いブラウザでは動作しない場合があります。例えば ES6(ECMAScript Edition 6) ではクラスやモジュールの読み込みなど多くの機能が追加されましたが、それらは ES5 以前では備わっていないため、Internet Explorer などのレガシーブラウザでは機能しません。 そういった問題を解決するためには、TypeScript などの Javascript ではない言語(AltJS)で書いたものを ES5 対応のスクリプトにトランスパイルしたり、ES6 の書き方で書いたスクリプトを Babel で ES5 以前の書き方に変換するのが一般的です。 今回は Babel と webpack を組み合わせて、スクリプトの保存時に自動的に ES5 対応スクリプトに変換される
Prettier - JavaScriptのコードを見やすく整形
JavaScriptは人によって書き方が変わる言語でもあります。企業によっては基準を設けたりしますが、それでもLint系で注意するのが精一杯でしょう。見づらいコードはそれだけバグをはらみやすく、システムの品質を低下させます。 そこで使ってみたいのがPrettierです。JavaScript用のコード整形ツールです。 Prettierの使い方 左側が元コード、右側が変換後のコードです。 引数の与え方などが大きく変わっています。 配列なども綺麗に並んでいます。 Prettierを使うとルールに合わせてコードを変換してくれます。改行やインデントでの整形になるので、動作が変わることはありません。インデントはタブか空白か選択できたり、ダブルクォートかシングルクォートかといった指定もできます。パーサーも指定できるので、自社好みのカスタマイズもできるでしょう。 Prettierはnode/JavaScr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
