正方形の写真の四隅だけを丸くぼかす

正方形でない写真を正方形でトリミング表示し、四隅だけを丸くぼかす。

デモページを表示

CSS

補足

• jQuery で複製された img 要素（写真）を同じ位置に重ねる。背面の写真をぼかし、前面の写真を正円でトリミングする。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• img[data-bg] 要素の親要素に corner-blur クラスがある場合、写真を複製する。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 四隅を丸くぼかす場合は img[data-bg] 要素の 親要素 に corner-blur クラスを付ける。
• spacer-1x1.png は１ピクセル×１ピクセルの透過PNG画像。
• 表示する写真は data-bg 属性で指定する。

関連投稿

• 正方形でない画像を正方形内に表示（レスポンシブ対応）

target="_blank" 属性の付いた a 要素に rel="noopener" と新しいウィンドウで開くアイコンを追加

target="_blank" 属性の付いた a 要素に、セキュリティー対策として rel="noopener" 属性と新しいウィンドウで開くアイコンを動的に追加する。

デモページを表示

CSS

補足

• 動的に追加する「新しいウィンドウで開く」アイコンのスタイルを設定
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 4行目：rel 属性を設定し、i 要素でアイコンを追加している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• target="_blank" 属性が付いた a 要素が対象となる。特にHTML側で必要な設定はない。

項目間にリーダー線を付ける

目次や料理の価格表のように、二つの項目間にリーダー線を付ける（レスポンシブ対応）。

デモページを表示

CSS

補足

• 16行目：リーダー線に使う文字列を長めに設定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• ul 要素に add-leader クラスを付ける。
• li 要素内の em 要素と span 要素の間に、指定した文字でリーダー線が表示される。

読みやすい段落のスタイル設定

標準では読みづらい段落のスタイルを、CSSの設定で読みやすくする。

デモページを表示

CSS

補足

• 9行目：段落の下マージンを広く取り、段落の区切りをわかりやすくする。
• 10行目：太めの等幅に近いフォントを指定すると読みやすくなる。
• 11行目：文章が折り返したときに余裕ができるよう、行の高さ（行間）を広めに取る。
• 12行目：文字間隔を少し広げて、読みやすくする。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• normal クラス下の p 要素は 、ほぼブラウザ標準の表示状態。restyle クラス下の p 要素は読みやすいスタイルを設定している。

文字列を行末ではなく指定した位置で折り返す

ウィンドウ幅を狭めた時に、文字列が行末（ブロック要素の右端）ではなく、指定した位置（単語や文節など）で折り返すようにする。

ウィンドウ幅が狭くても、指定した位置で折り返すことで、見出しなどが読みやすくなる。

デモページを表示

CSS

補足

• b 要素で囲んだ文字列をインラインブロック化することで、強制的に折り返す。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• 6行目： b 要素で囲むことにより、ウィンドウ幅を狭めていくと、"接続できる"、"充実のインターフェイス" のブロック単位で折り返していく。

ボタンに光沢感を付ける

ボタンや見出しなど（色付きのブロック要素）に光沢感を付ける。

デモページを表示

CSS

補足

• 対象となるブロック要素を擬似要素で覆い、その疑似要素のグラデーションで光沢感を付ける。
• 13行目：linear-gradient で光沢感の仕様を設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• 光沢感を付けるブロック要素に add-gloss クラスを設定する。

見出しの両サイドにボーダーを付ける

CSS で、見出しのテキストの両サイドにボーダーを付ける。

デモページを表示

CSS

補足

• side-border が基本のクラスで、これを h2 要素などに設定すると、見出しの両サイドに実線のボーダーが表示される。
• ボーダーは疑似要素で表示している。
• side-border クラスに加えて、double・dotted・dashed・sakura などのクラスを設定すると、ボーダーのスタイルが変えられる。
• ボーダーの長さはウィンドウ幅に連動する（レスポンシブ対応）。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• このサンプルでは h2 要素に、あらかじめ用意した side-border クラス等を設定している。

同じ階層の最後の段落の下マージンを無くす

背景色や枠を設定していると、最後の段落の下マージンの空きが気になるので、最後の段落には下マージンを設定しない方法。箇条書きやテーブルにも同様の方法が使える。

デモページを表示

CSS

補足

• 同一階層の最後の p 要素以外に下マージンを設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

番号付きリストの番号部を装飾

番号付きリストの番号部を疑似要素に置き換え、装飾しやすくする。

デモページを表示

CSS

補足

• 3行目： list-style-type: none; で標準のマーカーを非表示にし、12行目：擬似要素で番号部を表示する。
• リストの番号は counter-reset、counter-increment、content で生成している。
• 共通定義（class="deco"）で、装飾のない通常の番号付きリストのスタイルになる。
• 個別定義（class="ranking"）で、番号部の位置や大きさ、装飾などを設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• 3行目：共通定義（class="deco"）だけの場合は、通常の番号付きリストのスタイル。
• 11行目：共通定義（class="deco"）＋個別定義（class="ranking"）で、番号部が装飾された状態になる。

長い文字列を指定文字数でカットして、末尾に '…' を付加。

長い文字列を先頭から指定した文字数でカットして、末尾に '…' を追加する。

デモページを表示

jQuery

補足

• ３行目：データ属性 "data-tailcut" を持つ要素が対象。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 長い文字列を含む要素にデータ属性 "data-tailcut="n" を追加する。
• このサンプルでは、先頭から３０文字目以降をカットして、末尾に '…' が付加される。