【WordPress】タグなどの自動整形機能の無効化・有効化

WordPress のコードエディターでは、改行タグを付けなくても、編集画面上で改行していれば <br /> タグが足されたり、自動で <p> タグを補ってくれたり、とても便利ですよね。
でも、こちらがわざわざ書き込んだものを勝手に消されたり、または勝手に付け加えられたり、何してくれてんだよー!なんて思うこともあります。便利な自動整形機能が邪魔に感じることも・・・。

この自動整形機能、function.php に remove_filter() 関数を書き込むことで取り除くことができます。
また、add_filter() 関数で追加も可能。
自動整形機能の関数は、wp-includes ファイルの中の formatting.php で定義されていますが、それぞれの関数の詳細は、こちらに一覧があります。
formatting.php の関数リスト(英語)

自動整形無効化(全ての投稿に適用)

remouve_filter($tag, $function_to_remove) という書き方ですが、変数の意味はこのようになります。
$tag = フィルターフック(除去したい関数が追加されている場所)
$function_to_remove = 除去したいコールバック関数

子テーマ(なければテーマ)の中の、function.php の <!?php ~ ?> の中に、以下のコードを書き込みます。

wpautop() 関数を無効化 (<p> タグ、 <br /> タグの自動挿入無効化)

remouve_filter('the_title', 'wpautop');  // タイトル蘭
remove_filter('the_content', 'wpautop');  // 本文欄
remove_filter('comment_text', 'wpautop');  // コメント欄
remove_filter('the_excerpt', 'wpautop');  // 抜粋欄

wptexturize() 関数を無効化 (記号などの自動変換)

remouve_filter('the_title', 'wptexturize');  // タイトル蘭
remove_filter('the_content', 'wptexturize');  // 本文欄
remove_filter('comment_text', 'wptexturize');  // コメント欄
remove_filter('the_excerpt', 'wptexturize');  // 抜粋欄

自動整形無効化(部分的に適用)

ブログなどの投稿ページ (single.php)には、デフォルトの自動整形を有効化したままにして、固定ページ(page.php)のみ、自動整形を無効化したい、という場合もあると思います。その場合、function.php の <!?php ~ ?> の中に、以下のコードを書き込みます。wpautop() 関数を、固定ページでのみ無効化する例です。

function disable_page_wpautop() {
	if ( is_page() ) remove_filter( 'the_content', 'wpautop' );
}
add_action( 'wp', 'disable_page_wpautop' );

2行目、「is_page()」の部分を変更させることで、他の部分に適用することができます。

自動整形有効化

逆に、無効化されている自動整形の関数を有効化させるには、add_filter() 関数を利用します。
add_filter($tag, $function_to_remove)
$tag = フィルターフック(追加したい関数が追加されている場所)
$function_to_remove = 追加したいコールバック関数

make_clickable() 関数(プレーンテキストURIをHTMLリンクに変換)を有効化する例です。
(デフォルトでは、テキストエディターでの編集では、この関数は無効化されているようです。)
子テーマ(なければテーマ)の中の、function.php の <!?php ~ ?> の中に、以下のコードを書き込みます。

add_filter('the_content', 'make_clickable');  // 本文欄
add_filter('comment_text', 'make_clickable');  // コメント欄
add_filter('the_excerpt', 'make_clickable');  // 抜粋欄

以上、なんですが、一つ、分からないことがあります。

Gutenberg のテキストエディターで、<a> 要素に、<div> 要素を入れ子にすると(文法的には合っていますよね)、前後に、自動で空の <a> 要素が生成されてしまうのです。同じことを Classic エディターで行うと、そんな自動整形は行われません。これを取り除くべく、formatting.php と睨めっこして、どの関数がこのような振る舞いをしているのか突き止めようとしましたが、分かりませんでした。お手上げです。Gutenberg 特有の機能なんでしょうかね。ご存じの方、おりましたら教えてください。Classic エディターで編集することで解決はするのですが、どこの振る舞いか分からなかったのが、気持ち悪いです。検索しましたが、the_content のフィルターフックでこれを実現するには、自分で関数を作って追加する、なんていう方法もありました。でも、元の関数がどこにあるのか、知りたいです。

【WordPress プラグイン】投稿画面の幅などカスタマイズ

WordPress の投稿画面、私は基本的にはコードエディターを利用しているのですが、こうやって文字を打ち込んでいて、毎回毎回、不満に感じることがあります。

その1.入力画面の幅が狭い!
その2.プログラミング用のエディターみたいに色分けしてほしい!

↓ こういうことです。

投稿画面をカスタマイズできたら作業効率上がりますよね。イライラも解消です。
プラグインを利用して、この2点を実現してみました。

TinyMCE Advanced(幅広のクラシックエディターを利用する)

WordPress のエディターは、バージョン 5 からは、Gudenberg(ブロックエディター)になりましたね。バージョン 4 までのクラシックエディターは、デフォルトで投稿画面が幅広だったし、あちらの方が使いやすかったなー、という方もいらっしゃると思います。バージョン 5 で、クラシックエディターを利用するには、「Classic Editor」というプラグインがありますが、今回は、他にも色々設定ができて便利そうな「TinyMCE Advanced」を利用してみました。

プラグインの新規追加で「TinyMCE Advanced」をインストールし、有効化します。
「設定」⇒「TinyMCE Advanced」を選択し、「エディタ設定」ページを表示します。
そのページをずーっと下の方へスクロールしていくと、「高度なオプション」という欄があります。
「Replace the Block Editor with the Classic Editor」の欄にチェックをいれます。

これでクラシックエディターになりました!幅も広がりました。

「TinyMCE Advanced」では、他にもエディターに関する様々な設定が行えるので、自分好みに手軽にカスタマイズできますね。

Simple Custom CSS and JS(CSS 上書きで幅の指定をする)

クラシックエディターに戻したいわけじゃないよ!Gutenberg のままで幅広げたいよ!という場合は、エディターの CSS を書き直さなくちゃいけませんね。テーマの functions.php に新しく作った CSS を関連付けるコマンドを書き加えるという手順ですが、functions.php をいじらないで、CSS を書き加える「Simple Custom CSS and JS」というプラグインを利用してみました。

まず、投稿画面の幅を広げるための CSS ですが、ブロックエディター(ビジュアルエディター)では「wp-block」をいうクラスで、コードエディタでは、「edit-post-text-editor」というクラスで指定されています。デフォルトでは、「max-width: 610px」となっているようですね。これを好みの幅まで広げます。

.wp-block, .edit-post-text-editor {
  max-width: 900px;
}

さて、この CSS を投稿画面に反映させたいのですが、プラグインを利用します。
プラグインの新規追加で「Simple Custom CSS and JS」をインストールし、有効化します。
サイドメニューの「Custom CSS & JS」をクリックします。
「Custom Code」のページで「Add CSS Code」をクリックします。

① タイトル欄に任意の名前を入力します。
② コード入力欄に、先ほどの CSS を入力します。
③ 「In Admin」を選択します。(これは投稿画面に反映させる CSS という意味です。)
④ 「公開」をクリックします。

これで、ブロックエディター(ビジュアルエディター)、コードエディター共に、ぐーんと広がりました。
入力欄の幅だけでなくて、色々カスタマイズして、自分だけのオリジナルの使い勝手の良い投稿画面が作れそうですね。

HTML Editor Syntax Highlighter(タグを色分けする)

プログラミング用テキストエディターみたいに、タグを自動に色分けしてくれるプラグインです。

プラグインの新規追加で「HTML Editor Syntax Highlighter」をインストールし、有効化します。
ただそれだけ!色分けしてくるだけでなく、入力画面もいっぱいいっぱいまで自動で幅が広がります。
(カスタマイズされるのは、コードエディターのみです。ブロックエディターは変わりません。)

右上の歯車のマークをクリックすると詳細設定ができます。文字や背景の色など、見やすいように設定ができます。
右下の角の部分をドラッグすると、入力画面の高さを調整することができます。

ウェブ用画像の最適化

ウェブサイトを魅力的なものにしてくれる写真やロゴは、ウェブデザインの上で欠かせない要素ですが、たくさん利用するとサイトが重くなってしまいますよね。重いサイトは、ユーザがストレスに感じて、待てないよー!って、離脱してしまうかもしれないし、SEO的にも検索エンジンの低評価につながるので、画像の圧縮やリサイズなどの最適化は非常に重要です。

ウェブサイトに画像を利用する際、するべきこと

  1. 魅力的で適切な画像を利用する
  2. 適切なファイルフォーマットを選ぶ
  3. 圧縮、リサイズする
  4. SEO的に有効なファイル名、代替テキスト、キャプションを付ける

順番に見ていきます。

1. 高品質で適切な画像を利用する

ページの趣旨や文章に合った、魅力的な画像を利用することが大切ですね。
画像を自分で用意する、プロに依頼するなどありますが、ここではネット上で画像を提供しているサイトをいくつかまとめてみました。
利用規約がまちまちなので、しっかりと確認してください。

<無料の写真素材>

サイト名 内容
Pixabay.com 世界中のクリエイターによる100万点以上の高品質な画像素材を提供。海外のサイトですが日本語検索可。
PAKTASO 凡庸性の高い高品質な画像素材がストックされていて便利です。
GIRLY DROP 女の子好みのお洒落な画像がたくさん提供されています。
写真AC クリエイター投稿型の写真素材サイト。利用にはユーザ登録が必要。無料で利用できるのは、1日9個まで。
FIND/47 経済産業省のサイトで、日本全国の四季折々の写真が公開されています。見ているだけでも楽しいです。
Unsplash 100万点以上の高品質な写真を提供しているカナダの写真素材サイト。検索は英語で。
BURST ネットショップ作成サービスのShopifyが運営するフリー写真素材サイト。検索は英語で。
food.foto
Foodiesfeed
どちらも料理、食材に特化した写真素材サイトです。

<有料の写真素材>

サイト名 内容
PIXTA 国内最大級。月額プラン、単品で購入も可。
Adobe Stock 世界中の豊富な素材が利用できて、コスパいいです。日本語サイトあり。月額プラン、パッケージプランから選びます。
shutterstock 世界最大級の写真素材サイト。日本語サイトあり。月額プラン、パッケージプランから選びます。

<無料のアイコン>

サイト名 内容
FLAT ICON DESIGN お洒落感高めのアイコンがそろっています。背景色を選べます。
ICOOON MONO モノトーンのアイコン素材集。色味を調整してダウンロードできます。
アイコン配布中 スマホ用にデータが軽減されています。1日12個まで。
イラストAC 写真AC の姉妹サイト。1日9個まで無料。
iconmonstr 非常に豊富なアイコンの揃うドイツのサイトです。
ICONS8 ウェブ用デザインリソースを提供するアメリカのサイト。HTML に画像リンクを埋め込むこともできます。

<無料のイラスト>

サイト名 内容
イラストAC 写真AC、アイコンACの姉妹サイト。1日9個まで。
無料イラスト素材.com パーツとして利用できるイラストが豊富に揃っています。
EC design ネットショップに使い勝手のよさそうなイラストが揃っています。

2. 適切なファイルフォーマットを選ぶ

ウェブサイトの画像には、JPEG、PNG、GIF がよく利用されますね。最近よく利用される SVG も合わせて、特徴をまとめます。
画像の美しさ、ファイルの大きさにかかわってくるので、適切なフォーマットで保存することは大切です。

フォーマット 特徴
JPEG フルカラーで表現できるので、色数の多い画像をきれいに表示できる。
風景・景色・人物像など多くの色を使う写真に利用。
PNG フルカラーで高画質ですが、ファイルサイズが大きめです。透過処理もできる。
色数の多いイラストや、透過処理をする切り抜きの写真などに利用。
GIF 256色で構成されデータ容量が軽い。アニメーションや透過処理ができる。
色数の少ないロゴやイラストなどに利用。
SVG 拡大縮小しても画像が滑らかで、色やサイズの変更が簡単。複雑な形状や写真のように画素数の多いものには不向き。アニメーションや透過処理ができる。
アイコンなど複雑でない画像などに利用。

3. 圧縮、リサイズする

圧縮、リサイズは、Photoshop などの画像エディタツールを利用してできますが、ここでは圧縮、リサイズに特化したものをまとめます。

<ブラウザ上で加工>

サイト名 内容
Optimizilla 圧縮後の画像を見ながら、自分でクオリティを調整できます。日本語対応あり。
対応ファイル形式:JPEG、PNG
TinyPNG 一度に20個、簡単に圧縮ができます。圧縮率は自動で設定され、自分での詳細設定はできません。英語サイト。
対応ファイル形式:JPEG、PNG
Kraken.io DropboxやBox、Googleドライブからファイルをインポートしてアップロードできます。
無料版は圧縮のみですが、有料版はリサイズもできます。英語サイト。
対応ファイル形式:JPEG、PNG、GIF
Bulk Resize リサイズ用サービス。指定したサイズに、複数の画像をまとめてリサイズすることも可能。日本語対応あり。
対応ファイル形式:JPEG、PNG、WEBP

<WordPress プラグイン>
WordPress を利用している場合、自動で圧縮、リサイズを行うプラグインを利用できます。

プラグイン名 内容
Compress JPEG & PNG images ウェブサービスTinyPNG のプラグインバージョンです。
EWWW Image Optimizer 自動で簡単に画像の圧縮ができるプラグインです。
Simple Image Sizes リサイズ用のプラグインです。

4. SEO的に有効なファイル名、代替テキスト、キャプションを付ける

ファイル名: 画像に関連のある英語名。(例: sleeping-cat.jpg)
代替テキスト: 画像を簡潔に表す言葉。視覚障害者の方など、音声読み上げを利用している方には重要。(例: 眠り猫)
キャプション: 画像に関する説明・補足・注釈等の有用な情報。(例: 栃木県日光市の日光東照宮の回廊にある建築装飾彫刻作品)

また、画像の周辺のテキストは、検索エンジンが画像を理解する材料となります。画像と周辺の文字列の関連性も、SEO 的には重要です。

【CSS】カスケード(スタイルの優先順位)

同じ要素に複数のスタイルがかけられ、競合してしまうことありますよね。
そういう場合、どのスタイルが優先されるかという決まりを、「カスケード」といいます。

「カスケード処理」は以下の順番で行われます。

1. CSS 提供元による優先順位
2. 詳細度による優先順位
3. 記述順位による優先順位

各内容を順番にまとめます。

1. CSS 提供元による優先順位

スタイルシート は Web 制作者が用意するもの以外にも、ユーザ側が用意するもの、ブラウザのデフォルトのものがあり、それらが組み合わさって表示されます。スタイルシートの提供元による優先順位は以下の通りです。

1. Web ページ制作者が用意した 制作者 スタイルシート
2. 閲覧するユーザが用意した ユーザ スタイルシート
3. ブラウザがデフォルトで適用する ブラウザ スタイルシート

ですが、「!important 宣言」がついたものがある場合、提供元による優先順位が入れ替わります。

1. !important 宣言付き ユーザ スタイルシート
2. !important 宣言付き 制作者 スタイルシート
3. 制作者 スタイルシート
4. ユーザ スタイルシート
5. ブラウザ スタイルシート

2. 詳細度による優先順位

セレクタの詳細度(重み)を計算して、高得点のものほど優先されます。
セレクタの種類について

<点数>

セレクタ 点数
タグの style 属性に直書き style=”color: red;” 1000 点
ID セレクタ #example 100 点
クラスセレクタ .demo 10 点
属性セレクタ [lang=”ja”] 10 点
疑似クラス :link 10 点
要素型セレクタ p 1 点
疑似要素 ::first-line 1 点
全称セレクタ * 0 点

<計算例>

記述例 計算 合計
style=”color: red;” 1000(style 属性) 1000 点
#example 100(ID セレクタ) 100 点
div.content.demo 1(要素型セレクタ)+ 10(クラスセレクタ)+ 10(クラスセレクタ) 21点
div[lang=”ja”] 1(要素型セレクタ)+ 10(属性セレクタ) 11 点
a:link 1(要素型セレクタ)+ 10(疑似クラス) 11 点
h1 div + span 1(要素型セレクタ)+ 1(要素型セレクタ)+ 1(要素型セレクタ) 3 点
*::first-line 0(全称セレクタ)+ 1(疑似要素) 1 点

3. 記述順位による優先順位

詳細度が同じものは、単純に後にあるものが優先されます。

CSS でスタイルを指定しているのに反映されない場合、優先順位が問題になってることが多いようです。一度見直しが必要ですね。

【CSS】セレクタ – その3 疑似クラス / 疑似要素

その1 基本セレクタ
その2 グループ化 / 結合子
その3 疑似クラス / 疑似要素(今回)

疑似クラスと疑似要素の違いは以下の通りです。

疑似クラス ⇒ 「:link」のようにコロン1つ
要素が特定の状態である場合にスタイルを適用させる

a:link { スタイルプロパティ }
/* リンク先が未訪問の <a> 要素のスタイルを指定 */

疑似要素 ⇒ 「::first-line」のようにコロン2つ
要素の一部に対してスタイルを適用させる

p::first-line { スタイルプロパティ }
/* <p> 要素の1行目のスタイルを指定 */

以下、疑似クラスの機能ごと、及び疑似要素を表にまとめましたが、基本的に CSS レベル 1 ~ 3 のみです。
(:read-only と :read-write はレベル 4 ですが、IE 以外のメジャーの最新のブラウザで実装されているので含めました。)

疑似クラス

リンク関連

構文 説明
:link リンク先が未訪問。<a>, <area>, <link>など、href 属性を持つ要素を選択。
:visited リンク先が訪問済。<a>, <area>, <link>など、href 属性を持つ要素を選択。
:hover カーソルをその要素の上に置いているが、まだクリックにしていない状態。
「:link」「:visited」の後、「:active」の前に記述。
:active クリック中。<a> 及び <bottun> で使われる。
「:link」「:visited」「:hover」の後に記述。
:target #のついたリンクをクリックしたとき、対応するid値を持つ要素に適用。

兄弟要素の位置関連

構文 説明
:nth-child(n)
:nth-child(An + B)
兄弟グループの中で n 番目の要素を選択。順番を数える際、指定以外の要素も含めてカウント。
例):nth-child(4) ⇒ 4番目 :nth-child(4n) ⇒ 3つ置き :nth-child(2n+1) ⇒ 奇数
:nth-child(2n) ⇒ 偶数 :nth-child(odd) ⇒ 奇数 :nth-child(even) ⇒ 偶数
:nth-last-child(n)
:nth-last-child(An + B)
兄弟グループの中で後ろから n 番目の要素を選択。(順番を数える際、指定以外の要素も含めてカウント。)
例)引数の取り方は、:nth-child と同じ。
:nth-of-type(n)
:nth-of-type(An + B)
兄弟グループの中で n 番目の要素を選択。(順番を数える際、指定した要素のみカウント。)
例)引数の取り方は、:nth-child と同じ。
:nth-last-of-child 兄弟グループの中で後ろから n 番目の要素を選択。(順番を数える際、指定した要素のみカウント。)
例)引数の取り方は、:nth-child と同じ。
:first-child 兄弟グループの中で最初の要素。(指定以外の要素も含めてカウント。)
:last-child 兄弟グループの中で最後の要素。(指定以外の要素も含めてカウント。)
:first-of-type 兄弟要素のグループの中でその種類の最初の要素。(指定以外の要素を含めない。
:last-of-type 兄弟要素のグループの中でその種類の最後の要素。(指定以外の要素を含めない。
:only-child 兄弟要素がない要素。
:only-of-type 同じ型の兄弟要素がない要素

フォーム関連

構文 説明
:enabled 有効な要素。
:disabled 無効な要素。<input> で「disabled=”disabled”」が選択されているなど。
:checked チェックされている状態。<input type=”radio”>, <input type=”checkbox”>, <option> で利用。
:indeterminate チェックが不確定な状態。<input type=”radio”> でフォーム内の同じ name のラジオボタンが未選択な場合など。
:default 初期値の指定がある要素。<button>, <input type=”radio”>, <input type=”checkbox”>, <option> で利用。
:required required 属性の指定がある要素。<input>, <select>, <textarea> で利用。
:optional required 属性の指定がない要素。<input>, <select>, <textarea> で利用。
:valid 内容の検証に成功した要素。<input> やその他の <form> で利用。
:invalid 内容の検証に失敗した要素。<input> やその他の <form> で利用。
:in-range 入力値が min および max 属性による制限範囲内にある状態。<input> で利用。
:out-of-range 入力値が min および max 属性による制限範囲外にある状態。<input> で利用。
:read-only ユーザが編集できない要素。<input> で「readonly」属性が指定されている場合。Firefox では要プレフィックス。
:read-write ユーザが編集できる要素。Firefox では要プレフィックス。
:forcus フォーカスを持つ要素が選択されている状態。フォームなどで利用。
:forcus-within フォーカスを持つ要素が選択されている時、フォーカスを含む要素を選択。フォームなどで利用。

その他

構文 説明
:root ルート要素を選択。 HTML では、:root は <html> 。
:empty 空の要素。(コメントや処理指示は空として扱われる。改行、インデント、スペースなどは空として扱われない。)
:lang() 定義された言語を持つ要素。例)p:lang(ja) ⇒ 日本語が選択された <p>。
:not() 選択されたセレクタに一致しない要素。例)p:not(.demo) ⇒ class=”demo” が指定されていない <p>。
:fullscreen 全画面表示の状態。

疑似要素

構文 説明
::first-line ブロックレベル要素の最初の行に適用。
::first-letter ブロックレベル要素の最初の文字に適用。(最初の文字より前に画像などの他のコンテンツがない場合。)
::before 選択した要素の最初の子要素としてコンテンツを作成。(その要素の直前に表示される。)
::after 選択した要素の最後の子要素としてコンテンツを作成。(その要素の直後に表示される。)
::placeholder <input> または <textarea> のプレイスホルダー文字列に適用。
::selection 選択された文字列、画像などに適用。

【CSS】セレクタ – その2 グループ化 / 結合子

その1 基本セレクタ
その2 グループ化 / 結合子(今回)
その3 疑似クラス / 疑似要素

グループ化

CSS で複数のセレクタに同じスタイルを指定することと、HTML 側で複数のセレクタが適応される場合を考えてみます。

セレクタリスト

コンマ (,) で区切り複数のセレクタをグループ化し、同じスタイルを指定します。

セレクタ, セレクタ, セレクタ { スタイルプロパティ }

< 利用例 – 01 >
同種のセレクタをグループ化する例。
<h1> 要素と <h2> 要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<h1>h1 は適用される</h1>
<h2>h2 は適用される</h2>
<h3>h3 は適用されない</h3>
/* CSS */
h1, h2 {
 font-weight: 20px;
 color: lime;
}

< 利用例 – 02 >
異なる種類のセレクタをグループ化する例。
id=”main”(ID セレクタ)、class=”content”(クラスセレクタ)、<article> 要素(要素型セレクタ)に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p id="main">ID が指定されている</p>
<p class="content">クラスが指定されている</p>
<p>ID、クラスが指定されていない</p>
<article>タグが article</article>

/* CSS */
#main, .content, article {
 font-weight: 20px;
 color: lime;
}

HTML で複数のスタイル適用

HTML タグにクラスセレクタを複数適用する場合は、クラス名の間にスペースを挟んで記述します。

<要素名 class="クラス名 クラス名 クラス名"></要素名>

ID セレクタとクラスセレクタを同時に適用することもできます。

<要素名 id="ID値" class="クラス名"></要素名>

< スタイルが競合した場合の優先順位 >
詳細度が高いものが優先されます。

  1. id セレクタ
  2. クラスセレクタ
  3. 属性セレクタ
  4. 要素セレクタ
  5. 全称セレクタ

同種のセレクタ(二つのクラスを持つなど)間で競合した場合は、後に書かれたものが優先となります。
さらに細かな優先順位の決まりがあるのですが、こちらにまとめました。
カスケード(スタイルの優先順位)

結合子

セレクタを組み合わせる結合子は4種類です。

子孫結合子

セレクタを半角スペースで区切ることで、一つ目のセレクタ(親)に含まれる二つ目のセレクタ(子孫)に対してスタイルを適用させます。
(子、孫、ひ孫と、親に含まれるすべての階層に適用されます。)

セレクタ1 セレクタ2 { スタイルプロパティ }

< 利用例 >
親である<li> 要素のマーカーの種類を線の丸で黄緑色、子孫である<li> 要素のマーカーの種類を四角で橙色にする。

<!-- html -->
<ul>
  <li>リスト項目(親) 1
    <ul>
      <li>リスト項目(子) A</li>
      <li>リスト項目(子) B
        <ul>
          <li>リスト項目(孫) a</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>リスト項目(親) 2</li>
</ul>
/* CSS */
li {
  list-style-type: circle;
 color: lime;
}
li li {
  list-style-type: square;
 color: orange;
}

子結合子

セレクタを「 > 」で区切ることで、一つ目の親であるセレクタの直接の子になる二つ目のセレクタに対してスタイルを適用させます。
(子のみ。孫、ひ孫など、さらに下の階層は適用されません。)

セレクタ1 > セレクタ2 { スタイルプロパティ }

< 利用例 >
親要素の<article>の直接の子要素<div> に、フォントサイズ 20px、黄緑色を適用。
(孫要素の<div> には適用されない。)

<!-- html -->
<article>適用されない(親)
  <div>適用される(子)
    <div>適用されない(孫)</div>
  </div>
</article>
/* CSS */
article > div {
 font-weight: 20px;
 color: lime;
}

一般兄弟結合子

兄弟関係にある二つのセレクタを「 ~ 」で区切ることで、一つ目のセレクタの後に来る二つ目のセレクタに対してスタイルを適用させます。
(直後である必要はありません。)

セレクタ1 ~ セレクタ2 { スタイルプロパティ }

< 利用例 >
<article>の後にある<div> に、フォントサイズ 20px、黄緑色を適用。
(<div> は<article>より後にあればよく、直後である必要はない。)

<!-- html -->
<div>適用されない</div>
<article>適用されない</article>
<div>適用される</div>
<p>適用されない</p>
<div>適用される</div>
/* CSS */
article ~ div {
 font-weight: 20px;
 color: lime;
}

隣接兄弟結合子

兄弟関係にある二つのセレクタを「 + 」で区切ることで、一つ目のセレクタの直後に来る二つ目のセレクタに対してスタイルを適用させます。
(直後のみ。兄弟関係であっても離れていると適用されません。)

セレクタ1 + セレクタ2 { スタイルプロパティ }

< 利用例 >
<article>の直後にある<div> に、フォントサイズ 20px、黄緑色を適用。
(<div> は、<article>の後でも、離れていると適用されない。)

<!-- html -->
<div>適用されない</div>
<article>適用されない</article>
<div>適用される</div>
<p>適用されない</p>
<div>適用されない</div>
/* CSS */
article + div {
 font-weight: 20px;
 color: lime;
}

【CSS】セレクタ – その1 基本セレクタ

CSS のセレクタって種類多いですよね。しっかり使いこなせるように、まとめます。

その1 基本セレクタ(今回)
その2 グループ化 / 結合子
その3 疑似クラス / 疑似要素

基本セレクタ

基本セレクタは5種類あります。

要素型セレクタ

指定した要素名の要素に対してスタイルを適用させます。

要素名 { スタイルプロパティ }

< 利用例 >
すべての <a> 要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<a>適用される</a>
<p>こちらは適用されない</p>

/* CSS */
a {
 font-weight: 20px;
 color: lime;
}

全称セレクタ 「 * 」

すべての要素に対してスタイルを適用させます。

* { スタイルプロパティ }

< 利用例 – 01 >
すべての要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<h1>これは例です</h1>
<p>これは例です</p>

/* CSS */
* {
 font-weight: 20px;
 color: lime;
}

< 利用例 – 02 >
.example の後に来る兄弟要素に、フォントサイズ 20px、黄緑色を適用。
(⇒ 隣接兄弟結合子参照)

<!-- html -->
<p class="example">こちらは適用されない</p>
<p>適用される</p>

/* CSS */
.example + * {
 font-weight: 20px;
 color: lime;
}

ID セレクタ

指定したid 属性の値を持つものに対してスタイルを適用させます。
id 属性の値は、同じ Web ページ内でが重複して指定できません。(次に説明するクラス属性は複数指定できます。)

#ID値 { スタイルプロパティ }

< 利用例 >
id=”example” を指定したものに対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p id="example">ID が指定されている</p>
<p>ID が指定されていない</p>

/* CSS */
#example {
 font-weight: 20px;
 color: lime;
}

クラスセレクタ

指定したクラス属性の値を持つものに対してスタイルを適用させます。
クラス属性は、同じ Web ページ内で複数指定できます。(id 属性は重複不可。)

.クラス名 { スタイルプロパティ }

< 利用例 – 01>
class=”example” を指定したものに対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p class="example">クラスが指定されている</p>
<p>クラスが指定されていない</p>

/* CSS */
.example {
 font-weight: 20px;
 color: lime;
}

< 利用例 – 02>
class=”example” を指定した <li> 要素に対して、フォントサイズ 20px、黄緑色を適用。
li.example 」とスペースを挟まずに繋げて記述。

<!-- html -->
<ul>
   <li>クラスが指定されていない</li>
   <li class="example">クラスが指定されている</li>
</ul>
<p class="example">適用されない</p>

/* CSS */
li.example {
 font-weight: 20px;
 color: lime;
}

< 利用例 – 03>
class=”example” および “demo” の両方をクラスリストに含む <li> 要素に対して、フォントサイズ 20px、黄緑色を適用。
(⇒ HTMLでクラスを複数適用参照)
li.example.demo 」とスペースを挟まずに繋げて記述。

<!-- html -->
<ul>
   <li class="example">適用されない</li>
   <li class="demo">適用されない</li>
   <li class="example demo">これだけ適用される</li>
</ul>
<p class="example demo">適用されない</p>
<!-- CSS -->
li.example.demo {
 font-weight: 20px;
 color: lime;
}

属性セレクタ

指定された属性を持つ要素に対してスタイルを適用させます。

/* 指定した属性名の属性を持つ要素に適用 */
要素名[属性名] { スタイルプロパティ }

/* 指定した属性名の値全体が一致する属性を持つ要素に適用 */
要素名[属性名="値"] { スタイルプロパティ }

/* 指定した属性名の値が、スペースで区切られた複数の値の中の一つと一致する属性を持つ要素に適用 */
要素名[属性名~="値"] { スタイルプロパティ }

/* 指定した属性名の値が、ハイフン (-) で区切られた先頭の語と一致する属性を持つ要素に適用 */
要素名[属性名|="値"]  スタイルプロパティ }

/* 指定した属性名の値で始まる属性を持つ要素に適用 */
要素名[属性名^="値"] { スタイルプロパティ }

/* 指定した属性名の値で終わる属性を持つ要素に適用 */
要素名[属性名$="値"] { スタイルプロパティ }

/* 指定した属性名の値を文字列中に含む属性を持つ要素に適用 */
要素名[属性名*="値"] { スタイルプロパティ }

< 利用例 – 01>
lang の値が ja である <div> 要素に対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<div lang="ja">日本語だけ適用される</div>
<div lang="en">Not applicated</div>

/* CSS */
div[lang="ja"] {
 font-weight: 20px;
 color: lime;
}

< 利用例 – 02>
href の値が http で始まる <a> 要素に対して、フォントサイズ 20px、黄緑色を適用。
(外部リンクのみ適用。)

<!-- html -->
<a href="/example.html">内部リンクは適用されない</a>
<a href="http://demo.com">外部リンクは適用される</a>
<a href="https://demo.com">SSLも適用される</a>

/* CSS */
a[href^="http"] {
 font-weight: 20px;
 color: lime;
}

【CSS】Grid Layout を使いこなす – その6 まとめ

その1 基本

基本的な考え方

grid:display
コンテナに指定。Grid Layout モジュール利用に必須。

grid-template-rows
コンテナに指定。各行トラックの高さを指定。

grid-template-columns
コンテナに指定。各列トラックの幅を指定。

grid-row
アイテムに指定。そのアイテムの行の領域を指定。

grid-column
アイテムに指定。そのアイテムの列の領域を指定。

その2 トラック、領域の値

<トラックの値の指定に利用できる関数>

minmax() 関数

repeat() 関数

repeat(auto-fit | auto-fill)

repeat(auto-fit | auto=fill, minmax())

<アイテムの領域の値の指定に利用できる記述法>

span を利用して自動配置

負のライン番号

その3 基本以外のプロパティ

gap プロパティ
コンテナに指定。トラック間の隙間を指定。

grid-template-areas と grid-area の組み合わせ
grid-template-areas はコンテナ、 grid-area はアイテムに指定。名前付きの領域を指定。

grid-auto-row, grid-auto-column
コンテナに指定。拡張したトラックの大きさを指定。

grid-auto-flow
コンテナに指定。アイテムを配置する方向を指定。

<Grid Layout モジュール以外のプロパティ>

justify-content
align-content
justify-item
align-item
justify-self
align-self
order

その4 ショートハンド

grid-template でまとめる
grid-template-rows, grid-template-coloums, grid-template-areas のショートハンド。

grid でまとめる
コンテナに指定するプロパティを、ほぼ全部、まとめられるショートハンド。

grid-gap でまとめる
grid-row-gap, grid-column-gap のショートハンド。

grid-row, grid-column 開始と終了を分けて記述
grid-row-start, grid-row-end または grid-column-start, grid-column-end に分ける。

その5 IE 対応

Grid Layout IE ベンダープレフィックス対応表

Autoprefixer
ベンダープレフィックスを自動に書き込むツール

【CSS】Grid Layout を使いこなす – その5 IE 対応

「Grid Layout を使いこなす」全6回です。

⇒ その1 基本
⇒ その2 トラック、領域の値
⇒ その3 基本以外のプロパティ
⇒ その4 ショートハンド
⇒ その5 IE 対応(今回)
⇒ その6 まとめ

とても便利な Grid Layout ですが、IE10-11 、Edge 10-15 では、古い仕様(W3C Working Draft 7 April 2011)が実装されていて、そのままではレイアウトが反映されません。古いブラウザといっても、わずかながらシェアがあり、マイクロソフトのサポートも続いているわけで、無視できませんよね。

ベンダープレフィックスの記述が必要となりますが、利用できるプロパティに制限があり、どちらかにしかないプロパティもあります。そういった点を踏まえて記述する必要があります。

Grid Layout IE ベンダープレフィックス対応表

CSS Grid Layout (level 1) IE ベンダープレフィックス 対応メモ
display: grid diplay: -ms-grid
grid-template-rows -ms-grid-rows
grid-template-columns -ms-grid-columns
grid-template-areas
grid-template -ms-grid-rows, -ms-grid-columns で対応
grid-auto-rows
grid-auto-columns
grid-auto-flow
grid -ms-grid-rows, -ms-grid-columns で対応
grid-row-start -ms-grid-row
grid-column-start -ms-grid-column
grid-row-end -ms-grid-row-span で対応
grid-column-end -ms-grid-column-span で対応
grid-row -ms-grid-row, -ms-grid-row-span で対応
grid-column -ms-grid-column, -ms-grid-column-span で対応
grid-area
grid-row-gap 空のトラックを挟むことで対応
grid-column-gap
grid-gap
-ms-grid-row-span grid-row-end の代わり
-ms-grid-column-span grid-column-end の代わり

grid-template-areas に対応するベンダープレフィックスはありませんので、
コンテナ:-ms-grid-rows, -ms-grid-columns,
アイテム:-ms-grid-row, -ms-grid-row-span, -ms-grid-column, -ms-grid-column-span
で記述する方法となります。

また、grid-auto-flow で並ぶ方向を指定するというのにも対応するものがないので、値に column または dense を指定している場合は、アイテムごとに領域を指定しなくてはいけないようです。

Autoprefixer

上の対応表を見ながら、一つずつベンダープレフィックスを書き込んでいく・・・というと、地獄のような作業ですが、Autoprefixer というツールを利用するとこれを自動的に行ってくれます!
Gulp のプラグインなどで使うのが普通のようですが、Gulp のダウンロードも含めて、それは別の機会にまとめます。
Autoprefixer は、手軽に Web でも利用できます。今回はこちらを利用します。

Autoprefixer CSS online

左の欄に CSS を書き込み、下の枠に対象となるブラウザを指定し、「Apply」をクリックします。
そうすると、右の欄に、ベンダープレフィックスの含まれた CSS が表示されます。
便利ですねー!

ですが、grid-template-areas や、grid-gap など、ベンダープレフィックスに対応するプロパティがないものは、web の Autoprefixer では、自動的にそれに合うように変更されません。そのようなものを使わないか、手書きで調整することになります。

Gulp などで実装する場合は、grid-template-areas など対応する互換性のあるコードに変換してくれる機能もあります。

<ブラウザの指定方法例>

ブラウザ指定 詳細
IE 11 IE 11 のみ
Edge >= 10 Edge 10 以上
iOS < 10 iOS 10 未満
last 4 versions 主要ブラウザの直近4バージョンのブラウザ
last 2 Firefox versions Firefox 直近2バージョン
> 1% シェア率1%以上のブラウザ
> 1%, last 2 versions シェア率1%以上で、直近2バージョンのブラウザ

【CSS】Grid Layout を使いこなす – その4 ショートハンド

「Grid Layout を使いこなす」全6回です。

⇒ その1 基本
⇒ その2 トラック、領域の値
⇒ その3 基本以外のプロパティ
⇒ その4 ショートハンド(今回)
⇒ その5 IE 対応
⇒ その6 まとめ

ショートハンド一覧

Grid Layout プロパティのショートハンドです。

ショートハンド 含まれるプロパティ
grid-template grid-template-rows, grid-template-coloums, grid-template-areas
grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow
grid-gap grid-row-gap, grid-column-gap
grid-row grid-row-start, grid-row-end
grid-column grid-column-start, grid-column-end

grid-template でまとめる


トラックの大きさを指定する grid-template-rows、grid-template-coloums、名前付きの領域を定義する grid-template-areas をまとめて指定ショートハンドです。
コンテナ(親要素)に指定。

指定の方法は2通りあります。
この図のレイアウトを指定する例です。

<方法 ① grid-template-rows / grid-template-columns をまとめる>

grid-template: 200px 1fr  / 300px 1fr;  /* 各行トラック高さ / 各列トラック幅 */

行と列の間には、スラッシュを挟みます。

* この方法では、grid-template-areas は初期化されます。grid-template-areas を合わせて指定したい場合は、grid-template の後に、grid-template-areas を指定します。

<方法 ② grid-template-areas grid-template-rows / grid-template-columns をまとめる>

grid-template: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */
               "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */
              / 300px 1fr         /* / 各列トラック幅 */

実際のレイアウトと近い配置に指示が書かれるので、CSS 上でも視覚化されるような指定方法ですね。
行、列の大きさは省略可。

grid でまとめる

コンテナに指定するプロパティを、ほぼ全部、まとめられるショートハンドです。
grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow を単一の宣言で設定します。

指定の方法は3通りあります。

<方法 ① grid-template-area grid-template-rows / grid-template-columns をまとめる>
grid-template の方法 ① 、または方法 ② と同じです。
(ですが、grid-template とは異なり、grid では、ほかの grid のサブプロパティはすべて、初期値に初期化されます。)

grid: 200px 1fr / 300px 1fr;  /* 各行トラック / 各列トラック */

grid: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */
      "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */
     / 300px 1fr         /* / 各列トラック幅 */

<方法 ② grid-auto-flow: row と grid-template-columns をまとめる>
grid-auto-flow: row を指定するので、アイテムは1行目から順に右から左へ埋められていきます。
行トラック数 ⇒ 可変。全てのアイテムが埋まるまで行は加算されます。
列トラック数 ⇒ 固定。このプロパティで指定した数。

grid: auto-flow 100px / 1fr 1fr 1fr;   /* 行に auto-flow、行トラックの高さ / 各列トラックの幅 */

スラッシュ前:行を定義しています。auto-flow で、アイテムの並び方(grid-auto-flow: row)と行数可変を指定し、続いて 100px と行の高さを指定しています。
スラッシュ後:列を定義しています。1fr の幅で 3 列になります。

<方法 ③ grid-template-rows と grid-auto-flow: column をまとめる>
grid-auto-flow: column を指定するので、アイテムは1列目から順に上から下へ埋められていきます。
行トラック数 ⇒ 固定。このプロパティで指定した数。
列トラック数 ⇒ 可変。全てのアイテムが埋まるまで列は加算されます。

grid: 1fr 1fr 1fr / auto-flow 100px;  /* 各行トラックの高さ / 列に auto-flow、列トラックの幅 */

スラッシュ前:行を定義しています。1fr の高さで 3 行になります。
スラッシュ後:列を定義しています。auto-flow で、アイテムの並び方(grid-auto-flow: column)と列数可変を指定し、続いて 100px と列の幅を指定しています。

grid-gap でまとめる

トラック間の隙間を指定する grid-row-gap と grid-column-gap をまとめて指定するショートハンドです。
コンテナ(親要素)に指定。

grid-gap: 10px;  /* 行列ともトラック間の隙間 10px */
grid-gap: 3% 5%;  /* 行トラック間の隙間 3% 列トラック間の隙間 5% */

grid-gap は、値が1つの場合は、行、列とも一括指定、スペースを挟んで二つの場合は、1つ目が行、2つ目が列の値になります。

grid-row, grid-column 開始と終了を分けて記述

アイテムの領域を指定する grid-row と grid-column は、開始と終了のライン番号をまとめて記述しているショートハンドです。
これを、開始と終了を分けて指定することができます。
アイテム(子要素)に指定。

grid-row-start: 1; /* 行の領域の開始するライン番号 */
grid-row-end: 2;   /* 行の領域の終了するライン番号 */

grid-column-start: 2; /* 列の領域の開始するライン番号 */
grid-column-end: 3;   /* 列の領域の終了するライン番号 */