WordPressカスタマイズするなら絶対欲しいリファレンス【HTML/CSS】

WordPressはGutenbergやクラシックエディタのビジュアルエディタなど、HTMLやCSSといったWebページ制作に必要な知識がなくてもハイクオリティなサイトの作成・記事作成が行なえます。

ですが、どれだけ便利になったと言っても限界があり、

  • 使いやすいオリジナルボックスを実装したい
  • デザインが少し崩れているので直したい
  • 紹介されているCSSをコピーしてもうまく動かない
  • 毎回デザイン設定するのが面倒

といった問題が徐々に表面化してきます。

特にオリジナルのデザインを適用させたい場合に、HTML・CSSの知識が必要になります。

知識をつければ、以下のようなデザインを自由自在に作れるようになりますよ。

ボックス
ボックス
画像吹き出し~

現役Webエンジニアで、ちょっと調べれば十分という人であればいいのですが、そうじゃない方ならHTML・CSSのリファレンス(辞書)を一冊用意しておくと安心です!

リファレンスを所有しておくメリット

困った時に調べられる

リファレンスはHTMLタグなどの単語から調べるのではなく、やりたいことから調べることもできます。

  • テキストの入力文字数を制限したい
  • iframeのサイズを指定したい
  • ムービーを埋め込みたい

これらのことを簡単に見つけ出すことができます。

単語を覚えていなくても、やりたいことさえ明確であれば簡単に見つけられるのがリファレンスの魅力でもあるので、HTML・CSS初心者には最適ですね。

今まで知らなかった知識をつけられる

ネットで解決できる力があったとしても、言葉を何も知らないものであれば調べようがありません。

ですが、リファレンスを眺めていると今まで知らなかったタグやプロパティを知ることができるため、もっと知識を増やしたいという方にも向いているのです。

特にCSS3(animationやcolumnsなど)は知らないことが結構多いため、読み応えは十分でしょう。

リファレンスの中でもオススメなのは逆引きリファレンス

リファレンスと逆引きリファレンス何が違うのかという話ですが、簡単にまとめるとこんな感じです。

リファレンス 単語や言葉から意味などを調べられる辞書。
国語辞典をイメージするとわかりやすいかも
逆引きリファレンス 単語や言葉から索引を引くのではなく、
やりたいことから調べられる辞書。初心者に最適!

意味はうろ覚えでもHTMLタグ・CSSプロパティ・属性名全部覚えているのであればリファレンスでいいですが、そうでない場合は逆引きリファレンスがおすすめです。

また、逆引きリファレンスは必ずサンプルコードが付いているため、どのように記述すればいいのかもひと目で分かります。

初心者に限らず、経験者の方もノウハウ収集に役立つため、もっと能力を高めたい場合は逆引きリファレンスを選ぶと良いでしょう。

最近はデザインレシピやクックブックという名前での出版が多い

意味は逆引きリファレンスと同じで、最近の参考書は

  • 〇〇 デザインレシピ集
  • 〇〇 クックブック

といったようなおしゃれな名前がついていることが多いです。特にHTML・CSS系の書籍ではその傾向が強いので、リファレンスを探しても全然見つからないという場合は「デザインレシピ・クックブック」という単語を含めて検索すると見つけやすいですね。

HTML・CSSが分かるおすすめのリファレンス

HTML5 & CSS3 デザインレシピ集

 

書評

今すぐ使えるリファレンスが欲しいと言うのであれば、これが一番です。

  • ウィンドウ幅いっぱいに背景画像を表示したい
  • ページ下にCTA(コンバージョンエリア)を目立たせたうえで設置したい
  • 既存のワンカラムを2カラムに変えたい

といった実用的なデザインレシピ・テクニックが、300種類も用意されています。

逆引きリファレンスとしても非常に使いやすいので、HTML・CSS関係の書籍を1つも持っていないのであればこちらを選ぶと良いでしょう。

今すぐ使えるCSSレシピブック

 

書評

CSSに特化したリファレンスブックです。

ほとんどの参考書はHTMLとCSSがセットになっているため、HTMLの知識はもう必要ないという方にとって無駄が存在します。

ですが、こちらもレシピブックならCSS、いわゆるデザインに特化した参考書なので、おすすめです。

  • 画面の向きを判定する
  • モバイルファーストで CSS を記述する手法
  • 1pxの間隔を開けた際に発生する問題

といった入門書では得られない一歩踏み込んだ知識をつけられるので、CSSの知識・スキルをもっと磨き上げたいという方にも向いています。

 

HTML5 & CSS3ポケットリファレンス [改訂新版]

書評

私が使っている現役のリファレンスです。厳密には改訂版ではなく初版ですが、2014年発売の初版ですら現役レベルで活躍しているので、HTML5・CSS3用のリファレンスを探している方にお勧めですよ。

Kindleにも対応しているので、スマホやタブレットで調べながらWordPressをカスタマイズするのも良いでしょう。

使えるリファレンスが出版されたらまた新たに追記していきます。

タイトルとURLをコピーしました