表紙の見た目とは裏腹な本格派の参考書「現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook」

2019年3月にソシムより出版された「現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook」を読んだので、紹介したいと思います。

この本は、大学で情報教育に携わる准教授の方とフリーランスのWebデザイナーの方による共著というのが独特で、特徴的になっています。

この本の特徴

  • 辞典としても使えるくらいHTML/CSSの仕様について細かく解説
  • 豆知識や役立つ情報を提供してくれる+アルファがおもしろい
  • ベーシックながらオシャレなデザインのサンプルサイト

HTML/CSSの仕様について細かく解説

准教授の方がHTML/CSSの解説を行っているということもあり、中身も予想以上に本格派で詳しく解説が書かれてあります。
入門書というよりは教科書、参考書に近い感じでしょうか。文章を読んでいると、まるで授業を受けているかのような感じになり、ふつうに教科書としても使えそうです。

全392ページという厚さもさることながら、文章と文章の間隔が詰まっている感もあるので、かなりのボリュームを感じます。私は眺めるだけでもお腹いっぱいになってしまい、読むのに相当時間が掛かってしまいました。

テーブルの解説だけで21ページも割かれていたりなど、HTMLについてみっちりとシゴかれるため、読み終わる頃には相当鍛えられているのではないでしょうか。

これだけ網羅されていると今まで知らなかったことも当然出てきて、ulにstart属性を設定することでリスト番号を変更して表示できたりとか、初耳なものも多かったです。

+アルファがおもしろい

ページの下部に「+アルファ」でひとことコメントが書かれていたりするのですが、それを読むのがおもしろいです。
ページに書いてある内容と直接関係のなかったりすることも多いのですが、役に立つコメント・アドバイスが多くあり、+アルファだけを読み漁るのも楽しいかもしれません。

サンプルサイトがオシャレ

第5章、第6章の応用編でコーポレートサイトを制作するのですが、そこで登場するサンプルサイトがベーシックながらもオシャレで制作意欲が沸き立つモノになっています。
この辺はさすがWebデザイナーの方が担当しているといったところでしょうか。ちょっと駆け足気味なのが残念だったりもしますが、CSS設計にも触れていたりと、現場でのWebサイトづくりの雰囲気も味わうことができそうです。

惜しいところ

こんなにHTML/CSSの仕様について詳しく書かれているのであれば、リファレンス本として割り切っても良かったじゃないかとも思えてきます。調べたいときにどこに何が書かれてあるか、索引しづらいのもマイナスかもしれません……

表紙のデザインは良いのですが、素材が薄いクラフト紙になっているのも私にはマイナスでしょうか。私は乱雑に扱っていたせいもあり、すでに汚れやダメージがちょっと付いてしまいました。しかし、味があるデザインになるとも言えるので、これはこれでアリなのかもしれません。

さいごに

HTML/CSSの入門書となっていますが、この本は初心者にはまったくもってオススメできないシロモノです。
HTML/CSSの仕様について詳しく知りたい方や、これからWebデザイナーになりたいという学生などに向いている本だと思います。

私にはちょっと読みにくい本でしたが、しっかりと読み込んで理解できれば、HTML/CSSの仕様について造詣が深まるでしょう。読んで勉強になることは間違いナシです。

デザインも学べる読みやすい入門書「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」

2019年3月にSB Creativeより出版された「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」を読んだので、感想を述べたいと思います。

人気ブログ「Webクリエイターボックス」の中の人であるManaさんが著者であるということで発売前から気になっており、予約買いしてしまいました。

この本の特徴について

これからWeb制作をはじめようという初心者を対象とした一般的なHTML&CSSの入門書ですが、特徴的なのはWebデザインに関する役立つ情報や解説が数多く紹介されていることです。
さわやかな色合いや説明だけでなく図やイラストも多様されていることで、すっきりとした印象で読みやすいです。

本書内のWebサイトのユーザビリティ(使いやすさ)に関するページにて「専門用語を使わず読みやすい文章にする」と書かれてあるのですが、この本もまさにその言葉どおり簡潔で読みやすい内容につくられています。

また、サンプルでつくるWebサイトもManaさんのポートフォリオサイトのようなテイストのデザインで、らしさがあって好感が持てます。

サンプルのサイト

実践でフルスクリーンや2カラム、タイルレイアウトのページをつくることができるのですが、便利なフレックスボックスやCSSグリッドを使うことで、いともかんたんにおしゃれなサイトを実装することができてしまいます。

気になったところ

読んでみて気になったところを2点ほど挙げておきます。

Webサイト制作のときに記述するCSSのコードなのですが、追加するコードのみしか書かれていないため、どこに追加して書けばよいのかが初心者にはわかりづらいかなと思います。

別に上から順番に記載していってもいいんでしょうし、サンプルのコードを見たりすればわかりはするのですが、指示がもうちょっとしてあるとよかったかなぁと感じました。

あとコードについてですが、P.206の.footerに指定してあるmargin-top: 50px;は不要かと思われます。
ダウンロードのサンプルにあるコードには書かれてありませんでしたし、私の場合だとContactページのところに余分なスペースが生まれてしまいました。

フッターとSNS部分の間に余分なスペース

最後にひとこと

「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」はHTMLやCSSの基本だけでなく、Webデザインについての基礎も学ぶことができるという欲張りでぜいたくな入門書です。
デザインのトレンドなども紹介されていたりするため、もし読むのであれば早いうちに読むのがおすすめです。

わかりやすいのはもちろんですが、私が普段ブログを読んでいる方が執筆した本であるということからか、技術書でありながら文章から人が見える・感じられる一冊になっていると感じました。(うまく言葉で伝えられないのが残念ですが……)

「フレキシブルボックスで作るHTML5&CSS3レッスンブック」こそ真のHTML&CSS入門書だ

2019年3月にソシムより出版されたエビスコムの「フレキシブルボックスで作るHTML5&CSS3レッスンブック」(以下、フレキシブルボックスレッスンブック)を読んだので、紹介したいと思います。

これまでのフロートを使ったレイアウトから脱したい方や、これからHTML&CSSを勉強しようという方にもおすすめのレッスンブックになっています。

ふたつになったレッスンブック

2018年12月に「CSSグリッドで作るHTML5&CSS3レッスンブック」(以下、CSSグリッドレッスンブック)が発売されたばかりでしたが、なんと今度はフレキシブルボックス(Flexbox)に対応したレッスンブックが新たに登場。

まさかこう来るとは予想外でした。CSSグリッドのレッスンブックとかトガってんなぁ~と思っていたのですが、グリッドレイアウトとフレキシブルボックスの2パターンのレッスンブックだったんですね。

少し気になった点としては、これからHTMLやCSSを勉強しようという人も対象にしているレッスンブックなのに、フレキシブルボックスとかCSSグリッドとか専門用語をタイトルに用いて大丈夫なの?とは思いましたが……
選ぶ側からしたらわかりにくそう……

この本の特徴について

ここからはフレキシブルボックスレッスンブックの特徴について、紹介していこうと思います。

書籍の構成がすばらしい

エビスコム本を読むと毎回思うことなのですが、今回のこの書籍でもWebサイトを完成させていくまでの過程の構成がすばらしいと感じました。

ステップバイステップでWebサイトを実際につくりながら、HTMLやCSSの仕組みについても学んでいくことができます。
この書籍では、制作ステップとHTML&CSSの仕様について解説しているページが分かれた構成になっているので、すでにHTMLなどの基本は分かっているよという方は、制作ステップだけ読み進めていくことも可能です。

巷の一般的なHTML&CSS本だと、書いてあるHTMLやCSSの解説を読むのが億劫になるのですが、なぜかエビスコムの本だとコードを打ち込みながら制作していくうちにもっと学びたい、もっと知りたいという意欲が湧いてくるんですよねぇ。不思議なモノです。

新しくなったレッスンブックではモバイルファーストでの作成法になってますし、もう言うことなしというか、完成形に近いのではないでしょうか。

Firefoxの開発ツールがめっちゃ使える

今回のこのフレキシブルボックスレッスンブックでいちばん優れていると感じたのが、Firefoxの開発ツールで確認しながらWebサイトを制作していくところです。

他でもChromeのデベロッパーツールなどを紹介・説明している書籍もあったりしますが、ここまで開発ツールを活用している書籍はなかなかないと思います。

これによりマージンやパディングなどもより視覚的にわかりやすくなりますし、フレキシブルボックスについての構造も理解しやすくなりました。

flex-shrinkの縮小などいまいちわかりにくい処理も、開発ツールを確認することで理解しやすい

CSSグリッドレッスンブックのときもFirefoxをページの表示確認に使用していましたが、フレキシブルボックスだとよりFirefoxの開発ツールの便利さを体感することができます。

私は普段、Chromeのデベロッパーツールを使っているのですが、Firefoxの開発ツールも使ってみるとめちゃくちゃ有能で使いやすいですね。

さいごに

この記事のタイトルにも書いた「フレキシブルボックスレッスンブックこそ真のHTML&CSS入門書だ」というのは、

  • CSSグリッドレッスンブックよりも、普遍的で初心者に適した入門書である
  • 他のHTML&CSS本と比較しても優れた入門書で、自信をもっておすすめできる

ということを伝えたかったのであります。

フレキシブルボックスレッスンブック、CSSグリッドレッスンブックはどちらも中身の構成などは似ていますが、ふたつのレッスンブックを読むことでレイアウトの違いなど学ぶことができるので、両方ともに読んでみるのが良いかと思います。

エビスコム本は楽しく読みながら学ぶことができるので、やっぱり最高ですわ。

まさに表紙のとおりかんたんで丁寧な「本当によくわかるHTML&CSSの教科書」

SBクリエイティブより2018年9月に出版された「本当によくわかるHTML&CSSの教科書」を読んだので、紹介したいと思います。

プログラミング学習サイト「Progate」の学習教材の制作を担当した方が書いた著書だということで、前から気になっていた一冊。
実際に読んでみて感じましたが、まさに表紙に書いてあるとおり丁寧でわかりやすいHTML&CSSの教科書になっていました。

「まさに表紙の通り」な内容

知識ゼロでもOK!と表紙に書かれてあるように、この書籍のターゲットはこれからHTML&CSSの勉強をはじめようという未経験者だと思います。

この本と比較対象になりそうなのは「スラスラわかるHTML&CSSのきほん」あたりでしょうか。
「スラスラわかるHTML&CSSのきほん」もわかりやすいですが、この「本当によくわかるHTML&CSSの教科書」も親切ていねいにわかりやすく書かれているため、初心者にオススメできる一冊です。もはや、どちらを選んでも問題ないレベルだと言えます。

この書籍の特徴

「本当によくわかるHTML&CSSの教科書」はどういう本かともし尋ねられたら、表紙に書いてあるとおりの本だと答えるでしょう。
それくらい丁寧に書かれてあってわかりやすい入門書だということです。

  • 教科書的な内容ながら、丁寧な説明でわかりやすい
  • シンプルでデザイン性のあるサイトがつくれる
  • シングルページ、グリッドレイアウトなどのレイアウトパターンを学べる

HTML&CSSの教科書となっているように、内容が教科書的になっているのも特徴的です。
文章のフォントが教科書で見かけるようなフォントになっていたり、大事な箇所が太字で書かれ、さらに黄色のマーカーも引かれてあります。
パッと見は教科書的ではありますが、文言はやわらかい印象でページの色づかいや図解、ポイントなどもやさしいテイストになっているため、難しい印象は与えさせません。

書籍の構成としては、まずはじめにHTML・CSSの説明から入り、ひととおりの知識を覚えたところでWebサイトの作成に入っていきます。
正直言って、未経験者の方だとはじめはちょっとわかりづらい、つまらないという印象を持つかもしれませんが、とりあえずサラッと流し読みしてみてChapter4のWebサイトの作成に進んでみるのが良いかと思います。
そして、Webサイトをつくりながらいまいち理解しづらいところが出てきたら、前のページに戻ってHTML&CSSの説明を確認すれば良いのです。


ここからは「本当によくわかるHTML&CSSの教科書」を読んで感じた良いところを何点か挙げてみたいと思います。

コードの行番号が書かれてある

この本を読んでいちばんありがたいと思ったのが、コードに行番号が書かれてあったことです。

この本だと基本的には上から順にコードを書いていくだけなのですが、はじめてHTML&CSSを勉強するという人だと、どこに追加して書けば良いのかわからなくなるといった小さな悩みが出たりすることもあるので、非常にありがたかったです。
使用するテキストエディタのBracketsにも行番号が表示されてあるため、本とエディタの行番号を見比べながら書き進められることができるのが便利で、意外とほかのHTML&CSS本にはない素敵なポイントでした。

ページごとにあわせた複数のCSSファイルで作成

一般的なHTML&CSS本だと、ひとつのCSSファイルにズラッと書き込むことが多い気がするのですが、この本では共通のスタイルをまとめたCSS、トップページのCSS、レスポンシブのCSSといったように、複数のCSSファイルをまとめて読み込むスタイルになっています。

単に次のページを作成していくだけでなく、Webサイトの効率的な作成方法などについて書かれてあったも、この本の印象的なところ。

ただCSSにコメント文の記述があったほうが、後になってメンテナンスする際により良いかなぁとは思いましたが……

ファビコンやOGPの設定についても記載

Chapter 6ではページのディスクリプションや、ファビコン、SNSでの表示設定など、Webサイトの集客についての内容が載ってあります。
metaタグやOGPの設定など、多くの人にWebサイトの内容を知ってもらうためのSEO対策についても、しっかりと丁寧にかかれてあるのも特徴的だなと感じました。

無料レンタルサーバーやファイルアップロードソフトをつかってのWebサイトの公開についても、きっちりと書かれてあります。

気になったところ

この本を読んで気になったところを挙げるとすれば、headerタグやfooterタグなどのHTML5についての説明がないところでしょうか。

あとはヘッダーのロゴとメニューを分けるためにfloatを使っていたのが気になった点。
サンプルのサイトをつくるながらHTMLやCSSについて説明していくスタイルになっているため仕方ないのでしょうが、その後でフレックスボックスについての説明もするのであれば、わざわざココでclearのdivを設けてやらなくても良いんじゃないかなぁと思いました。

初心者に間違いなくオススメできる良本

いろいろ長々と書いてしまいましたが、とにかく言いたいのはこれからHTML&CSSを勉強しようという方にオススメできる入門書であるということ。
こうしてちゃんと読んでみると、どうしてAmazonでの評価も高いのかうなずけます。

また、技術書なのに比較的価格がお安めになっているところもポイントでしょうか。この内容で2,000円を切っているのはリーズナブルではないでしょうか。

これからは初心者に向けたはじめの一冊として「スラスラわかるHTML&CSSのきほん」だけでなく、「本当によくわかるHTML&CSSの教科書」も挙げていきたいと思います。

最近読んだ本についてメモ(2019年1月)

だいたい月イチくらいのペースで書店に足を運んで気になった書籍をチェックしているのですが、読んだ本についてかんたんに紹介しておきたいと思います。

JavaScript コードレシピ集

あいかわらずJavaScriptを勉強しようと思いつつもダラダラと怠けてしまっている私。

逆引き辞典というふうに書いてありましたが、実践的なサンプルも載っているため、初心者向けの学習用教本としても活用できそうです。
書店で即購入しようか迷いましたが、立ち読みしてみて本のサイズの割りにページ数が分厚くて読みづらそうだったので、いずれ電子書籍版を購入して勉強しようと思っています。

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

中級者向けの内容ということでしたが、確かに最初の章であるセレクタから異様さというか、他の本とはちょっと違う異質さを感じさせる内容になっています。
ジャンル的にいうと「CSSシークレット」に近いかもしれません。

すでに私も知っている内容もあれば、不得意であまり触れてこなかった分野や、あぁコレ知りたかったんだよねというテクニックもあったりと、読めばこれまで知らなかったCSSの使い方を発見できるかと思います。

いろんなテクニックが詰め込まれているCSSテクニック集のような本になっていますが、どれも使う頻度がそれほど少ないようなモノが多いのと、ひとつひとつの内容はネットなどで調べれば情報が得られそうなところなのが、購入をためらうポイントになりそうです。
あとはフルカラーでないのと、価格が高いのが最大のネックかもしれません。

WordPress はじめてのデザイン&カスタマイズ入門

WordPress関連書ではたぶん初となる、Gutenbergも解説している入門本。

デザイン&カスタマイズ本としては物足りなさもありますが、Gutenbergの入門書としては大いに役立ちそうです。
かくいう私もGutenbergのエディタは全然触っていないので、これから使っていかなきゃなぁと思っています。

これからWordPressでブログやサイトをつくろうという人にはオススメできるかもしれませんが、すでにWordPressを使っている人やパソコン操作に長けている人などは、Gutenbergの使い方も感覚的にわかりそうですし、この書籍も必要ないかもしれません。

ブログ・サイトの改善方法がわかるデザイン&カスタマイズ入門というよりも、Gutenbergの使い方入門として活用できるオススメの本だと思います。

あと個人的に表紙のデザインが好きです。