Flexboxを使ったレイアウトを学ぶならこの本!6ステップでマスターする 「最新標準」HTML+CSSデザイン

発売前からずっと楽しみにしていた、エビスコムの最新本『6ステップでマスターする 「最新標準」HTML+CSSデザイン』

Flexboxを使ったレイアウトを学べる本が出るのを待っていたのですが、この前紹介した「現場のプロが本気で教える HTML/CSSデザイン講義」のように、最近になってようやく出てきましたね。

この『6ステップでマスターする 「最新標準」HTML+CSSデザイン』でも、最新標準と書いてあるように、Flexboxを使ったレイアウトを学ぶことができます。

発売後すぐに買って読んだので、感想をさっと書いてみます。
今回のもやっぱり面白かった!

安心信頼のエビスコム本

Web制作の本では、一番わかりやすく面白くて大好きなエビスコムの本。
エビスコムの本はAmazonでも「HTML5&CSS3デザインブック 」や「HTML5&CSS3レッスンブック」など、皆高評価となっています。

私もはじめてエビスコムの本を読んだのが、HTML5&CSS3デザインブックでした。
この本のおかげで、Webサイトを作る楽しさに出会えたといっても過言ではありません。
エビスコム本は、どれも丁寧すぎるぐらいひとつひとつステップごとに分かれた解説、完成図とコードがそれぞれセットで書かれているので、非常に読みやすく順を追って理解を深めながら取り組むことができます。

HTML5&CSS3デザインブックの最新版といえる内容

6ステップでマスターする「最新標準」HTML+CSSデザインは、そのHTML5&CSS3デザインブックの最新版といえる内容となってます。
まだどちらも持ってなくて今、買うんだったら間違いなくこちらがおすすめです!

出版社は違っているのですが、中身はHTML5&CSS3デザインブックと同じようなスタイルとなっており、すらすらと読み進めることができます。
HTML5&CSS3デザインブックとの違いは、やはり名前にもある通り最新標準で書かれているところにあります!

HTML5&CSS3デザインブックとの主な違い

HTML5&CSS3デザインブックとの主な違いは、最新のHTML5+CSSの機能を使っているところ。

  • 段組みにfloatではなく、Flexboxを使用
  • CSS3の新しい単位、remやvh、vwを使用
  • CSSの変数機能を使用

段組みにfloatではなく、Flexboxを使用

HTML5&CSS3デザインブックでは、前半部分にfloatを使ったボックスを横に並べる方法などを紹介しているのですが、今回の本ではFlexboxを使ってかんたんで楽に横並びを実現しています。

floatを使った書き方

元のHTML

<div class="box">
  <div class="boxA">boxA</div>
  <div class="boxB">boxB</div>
</div>

CSS

.box::after {
  content: "";
  display: block;
  clear: both;
}

.boxA {
  float: left;
  width: 50%;
}

.boxB {
  float: left;
  width: 50%;
}

floatを使って行った結果

ちゃんと横並びにすることができましたね。
表示にはデザインブックにあったgrid-guideのレイアウトを使わせてもらってます。

次にflexを使って書いてみたいと思います。

flexを使った書き方

CSS

.box {
  display: flex;
}

.boxA {
  flex: 1;
}

.boxB {
  flex: 1;
}

flexを使って行った結果

同じように横並びにすることができました。

未だにclearfixの意味とか分からないままfloatを使ってたのですが、これならflexと指定するだけなので楽チンですね。
flexの使い方が分からなくなっても、後ろのAPPENDIXのページでフレキシブルボックスレイアウトの説明が書かれているので、その都度見れば安心です。

CSS3の新しい単位、remやvh、vwを使用

remやvhなど使ったことはあったのですが、今回読んでみてうまく有効に使うことができていなかったんだなぁと実感しました。
ブラウザサイズに合わせて可変に動くフォントサイズの指定の仕方など面白かったですね。

CSSの変数機能を使用

これまで変数はSassでしか使えないものだと思っていたのですが、CSSでも変数を使うことができるということをはじめて知りました。
使えるといってもIE11やEdgeでは対応していないらしく、従来の書き方も設定しないといけないため、無駄な行が1行増えてます。(さすがIE…)
最後のほうにアレンジでサイトの色を変えているのですが、変更する際に一つ一つ書き換えないといけないので、今のところは設定しなくてもいいかな…

最新のHTML/CSSでコードを書こう

この本を元に、これまでfloatなどで書いてきたものをflexなどに書き換えてみるのもいいかもしれませんね。
私もこの本で作ったサンプルサイトを元にして、このサイトのWordPressのテーマに反映させてみようかと思います。

おまけ:floatについて

この記事を書いてる内にfloatって使えねぇなんて思っていたのですが、
floatって本来画像の回り込みに使うものでしたよね。

あんまり画像の回り込みを使うことがなかったので、floatはボックスを横並びにするためのものだと認識してしまっていたのですが、本来の使い方を試してあげるとfloatくんの良さが輝いて見えます。

レスポンシブでテーマ作りならこの本! WordPressデザインブック HTML5&CSS3準拠


私がいつもお世話になっているエビスコムから待望の新刊「WordPressデザインブック」が登場したので、さっそく購入し愛読しております。
つい最近、このサイトをリニューアルしたのですが、初めてWordPressでサイトを作ったときに活用したのもエビスコムの「WordPressレッスンブック」でした。

今回も、このWordPressデザインブックを読んでサイトをリニューアルしたので、この本に載っている情報を利用しながら紹介していきたいと思います。
ですので、この本が気になっている方は、このサイトをサンプルページみたいな感覚でチェックしてみてもいいかもしれません。
(現在のサイトデザインは本のサンプルとは違っていますが、使用しているコードはこのWordPressデザインブックを参考に作成しています。)

HTML5&CSS3デザインブックと瓜二つ!?

このWordPressデザインブックは、同じエビスコムから出た「HTML5&CSS3デザインブック」と非常によく似ております。

2つのデザインブック

同じデザインブックなので、デザインが似ているのは当たり前かもしれませんが、よく知らない人が見たら間違ってしまいそうです。
ですので、WordPressデザインブックをもし誰かに買ってきてもらうときには、よく本のタイトルを伝えておきましょう(笑)

誰かに買ってきてもらうときは、間違えて別の本を買ってこないように注意して頼もう。

HTML5&CSS3デザインブックのWordPress版

似ているのは表紙だけでなく、中身もHTML5&CSS3デザインブックとよく似ております。
使用しているサンプルのデザインも似ているので、HTML5&CSS3デザインブックを読んで、WordPressに置きかえることができる方には、もしかしたら必要ないのかもしれません。
ですが、為になる目からウロコな情報がたくさん載っているので、それだけでも買う価値はあるかと思います。

「WordPressデザインブック HTML5&CSS3準拠」を一言で紹介するなら、「HTML5&CSS3デザインブック」のWordPress版。
レスポンシブWebデザインを用いて、WordPressでブログやビジネス系サイトを作りたい方におすすめです。

この緑のPOINTのマークアップや上記の注意書きの部分はWordPressデザインブックに記載されているものをそのまま利用しています。

ちなみに、この注釈の部分も利用しています(笑)

WordPressデザインブック おすすめポイント

私がWordPressデザインブックを読んで感じたおすすめな点を紹介します。

  • 最新のWordPress 4.3に対応(2017年10月現在は4.8が最新ですが、本を読む上で特に問題ありません)
  • プラグインを使わずに、パンくずリストやページネーションができる
  • メタデータの設定

 

最新のWordPress 4.3に対応

WordPressのバージョン4.3で追加されたサイトアイコンの設定の仕方がいち早く載っています。

以前までは、ファビコンの設定はプラグインを使って行っていたのですが、手軽に行えるようになって便利になりましたね。

私はこの本を読むまではあまりWordPressを触っておらず、この新機能のことを知らなかったので、まさに目から鱗の情報でした。

ファビコンを設定できます

プラグインを使わずに、パンくずリストやページネーションができる

他のWordPress本では、パンくずリストやページネーションなどといった機能はプラグインを用いて設定していることが多いのですが、この本ではプラグインを使わずにコードを記述するだけで作成することができます。

プラグインは便利なものが多いですが、カスタマイズや管理の面でいろいろと大変だったりすることもあるので、プラグインなしでつくることができるのは便利でありがたいですね。

メタデータの設定

ツイッターやフェイスブックなどのSNSで、共有されたときに表示される画像や概要を設定することができる、メタデータの記述の情報も記載されています。

私はこれまで、OGPのことについてあまり詳しくなく、プラグインで設定するときもこれでいいのだろうかと疑心暗鬼な状態で行っていたのですが、この本を読んだおかげでうまく設定することができたのではと思います。

これを機にSEOについても、もっと勉強したいなと思うようになりました。

楽しくレスポンシブなサイト作りを学べる

サンプルを真似しながらサイトを作っていくだけでも、レスポンシブデザインの面白さを体感することができ、楽しみながらサイトを作成の面白さを味わうことができるので、今までホームページを作ったことがない人にも、おすすめできる一冊だと思います。

このデザインブックでは、ローカル環境の設定やコメント投稿フォームの設定など書かれていない部分もあるので、はじめての方はWordPressレッスンブックから入るのもいいかもしれません。

エビスコムの本はどれも読みやすくてわかりやすく、そして何より面白いです。
ぜひエビスコムにはWeb製作の本だけでなく、私が苦手としているSEO対策についてや、PHPなどのプログラミングに特化した本なども作って欲しいです。

この前、買った本 [2015年6月]

この前、本屋で買った本を紹介します。
購入したのは、「これからの「標準」を身につける HTML+CSSデザインレシピ」と「3652: 伊坂幸太郎エッセイ集」の2冊。

HTML+CSSデザインレシピは、Bootstrapを使ってサイトを作ってみたいと思い購入。
またエビスコムの本を買ってしまった。これもやっぱり読みやすい。
一番惹かれたのが、完成サンプルで載っているサッカーアプリのサイト。これがかっこよかったんですよね。こういうサイトをつくってみたいです。

3652は伊坂幸太郎さんのエッセイ。伊坂幸太郎が好きなんですよねぇ。
小説は、今は伊坂幸太郎の本しか読んでいません。この人のおかげで、小説ってこんなに面白いんだと知ることができました。

3652: 伊坂幸太郎エッセイ集 (新潮文庫)
これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

WordPress作成時に参考にした本:WordPressレッスンブック

私がWordPressでこのサイトを作る際に、参考にした本を紹介したいと思います。

WordPressでサイトを作るために、最初に選んだ1冊が
エビスコムの「WordPressレッスンブック HTML5&CSS準拠」でした。

本屋でいろんなWordPressの本を立ち読みしたのですが、この本が一番読みやすかったです。
選んだもう一つの理由は、オリジナルテーマを自分でイチから作れるという所でした。
元あるテーマをいじるスタイルの本が多かったので、自分だけのテーマが作れる点も魅力でしたね。
スマホ用サイトなどのレスポンシブデザインにも対応していて、ブラウザのサイズを変えるとそれに合わせてサイトも自動調整されます。
初めてレスポンシブデザインを体験したときは、ちょっと感動を覚えました。

この本で解説しているWordPressのバージョンは3.9となっています。
3と4でバージョン違ってても大丈夫なの?ってなるかもしれませんが、3から4への移行はマイナーチェンジらしいので、あまり気にしなくていいと思います。
私は最新のバージョン対応じゃないと駄目なんじゃないかと、本屋で立ち読みしながらめっちゃ気になってたんですけどね(笑)

WordPressをはじめる前の私のレベル

  • HTML5&CSS ― 基本的なことなら理解できる
  • PHP ― 連想配列くらいまでなら分かる
  • JavaScript ― さっぱり

この本を読む前に、ある程度のHTMLとCSSの知識はあったほうがいいかもしれません。
知識があったほうが、サイトのデザインをいじったりするときに分かりやすいですからね。
HTMLとか全然分からないという方は、同じエビスコム著の「HTML5&CSS3レッスンブック」を先に読むと理解も早まると思います。(この本も読みやすくておすすめです。これは本屋で立ち読みした感想ですけど…)

WordPressレッスンブックを読んで困ったこと

このレッスンブックは非常に分かりやすくておすすめなのですが、WordPress初心者の私がこの本を読んで、あれ?と疑問に思ったことがありました。
もしかしたら、私と同じように疑問に思った方がいるかもしれないので、ここに載せておこうと思います。

While文・if文

私が最初に戸惑ったのは、while文とif文です。
endwhile;とかendif;ってなんぞやと思ったんですよね。
途中にある:(コロン)もよく分からないし…
それで調べてみたら、私が知っていた{ }(波括弧)の他にも基本構文があるということを知りました。

while文

PHP
while ( 条件 ) {
    // 処理内容
} 
PHP
while ( 条件 ) :
    // 処理内容
endwhile;

if文

PHP
if ( 条件 ) {
    // 条件がtrueのときの処理内容
} else {
    // 条件がfalseのときの処理内容
}
PHP
if ( 条件 ) :
    // 条件がtrueのときの処理内容
else :
    // 条件がfalseのときの処理内容
endif;

利点として、こう書いたほうが構造が見やすくなる場合があるので、覚えておいたほうがいいと思います。

スペルミスに注意

私がもうひとつ困ったことは、ソースの入力ミスによる画面真っ白問題です。
ちゃんと本の通りに打っていると思っていても、どこかしら打ち間違えていてエラーになってしまうときがあるんですよね。
人間誰しもミスするものですから…
たった1文字だけ間違えただけでも、おかしくなって真っ白になってしまうときがあるので困ったものです。
テーマ編集画面も、何も色分けとかしてくれないメモ帳状態なのでとても打ちにくい…
時によっては、管理画面すら入れなくなったりする場合もあるので要注意です。
(テキストエディタで作成するのがおすすめです。Bracketsなど…)

この症状に遭遇したとき、壊れちゃったのではないかと思う方もいるかもしれませんが、
ちゃんと入力ミスを直せば大丈夫です。
私はローカル環境で作っていたので、こうなったときは
直接コンピューターの中のフォルダから書き換えていました。
でも、どこを入力間違いしてるか見つけるのが大変なんですよね…(汗)

エビスコムの本は読んでいて面白い

WordPressレッスンブックを見て作ったサンプルのスクリーンショット

これで、私の所持している3冊目のエビスコム著の本となりました。
エビスコムの本は表紙のデザインや紙の質感だったり、記事のレイアウトが自分好みでとても読みやすいと感じます。
ソースとともに、実行結果もひとつひとつ載ってて分かりやすく、ただ本の通りに順番に打ってるだけなのに、だんだんとサイトが出来上がっていく過程がとても楽しいです。
他の技術本とかだと面倒くさくて、すぐソースをコピペとかしちゃうのですが、何故かこの本だと自分で打ち込みたいってなるんですよね。
つくる面白さ・楽しさを感じられる本ってなかなかありませんから、この本は貴重だと思います。

こうしてみると、学ぶために何を利用するのかが大事なんだと感じることができました。
まだまだWordPressの知識は未熟ですから、もっと勉強していきたいですね。