エビスコム『CSSグリッドで作るHTML5&CSS3レッスンブック』

ホームページをレイアウトする方法を学びたい。今日はそんな方にお勧めの本を紹介します。

この記事にはアフィリエイトリンクを含みます。

概要

著者ページより

本書はステップ・バイ・ステップでWebページを作成しながら、HTML と CSS の基本から、グリッドによる自由なレイアウト、モバイルファーストな制作手順、本格的なレスポンシブの設定までを習得していただけるように構成した入門書です。

https://ebisu.com/html5-css3-lessonbook-grid/

総評

【評価】　★★★★☆　4点

CSSグリッドによるWebページ作成の非常にわかりやすい実習ガイドブックです。本の手順通りに進めるだけで素敵なサイト例を作り上げることができます。事前に専門的な知識は必要なく、テキストエディタとブラウザさえあれば始められます。これからホームページを作りたいと考えている人への入門書としてこの本はとても役に立つと思います。

書籍情報

著者：エビスコム
定価：2,808円（本体価格　2,600円）
発売日：2018年12月25日
判型／ページ数：B5変形／320（オール4C）
ISBN：9784802611893
出版社：ソシム株式会社

この本の特徴

この本でできるようになること

• Webページをゼロから作れるようになる
• グリッドベースの概念がわかる
• HTMLファイルとCSSファイルをどう書き分けるのかがわかる
• レスポンシブデザインに対応したコードを作れるようになる
• デザインフォントやアイコンフォントを利用できるようになる

この本では身に付かないこと

• HTMLおよびCSSの包括的な知識
• ホームページの公開方法

この本の対象読者層

• まずはホームページを作ってみたい
• レイアウトやデザインにこだわりたい
• HTMLを知らなくてもOK

内容

Webページが作れる

ある架空のブログサイト「WAVE」を作ることを目標に、８章仕立てで作業が進んでいきます。全くの白紙の段階から、最終的には洗練されたデザインの、しかもシンプルな機能だけで使られたWebページが出来上がります。

作成しているWebページに必要な機能のみを取り上げているため、どう書いたらどんな効果があるのかということをすぐに実感できます。段々と見た目や機能が出来上がっていくWebページを実感しながら進められますので、どんどん先に進みたい誘惑に駆られるはずです。

HTMLやCSSの使い方を学べる

この本では実際に一つのWebページを作りながらHTMLやCSSといったもののノウハウを身に付けるように設計されています。ツールとしてHTMLやCSSが出てきますが、それらを全く知らなくても作成が進められるように工夫されています。記述するコードについては都度どのような意味を持つのか解説があり、実際のWebページ作成でイメージができているので非常にわかりやすくなっています。

一方で、このWebページの作成に必要のない説明はほとんど省かれています。この本の目的はあくまでも「あるWebページを作りあげること、それに必要な技術を知ること」です。包括的な知識を身に付けるには他の解説書が必要でしょう。

グリッドベースの概念がわかる

この本によると、最近のWebレイアウトはCSSを用いたグリッドベースが重要になってきているそうです。以前はフロートベースと呼ばれるデザイン方法が主流だったようです。

グリッドベースを用いることにより、Webページに配置するパーツを自由にレイアウトすることができます。

レスポンシブデザインを学べる

レスポンシブデザインというのは一般の方は聞きなれない言葉だと思います。一昔前はWebページを見るのはPCからと決まっていましたが、今はスマホやタブレットを使って色んな情報を得るのが当たり前になっています。

そのとき、どのデバイスからでも単一のWebページを表示していたのでは各パーツの配置や文字のサイズが不適切で見にくいものとなってしまうため、デバイスごとのページレイアウトを調整してやる必要があります。しかし、異なるデバイスに1からコードを書いていたのでは大変です。

そこで登場した概念がレスポンシブデザインです。基本のコンテンツは全てに共通させ、デバイスごとに異なる部分だけを新たに書き分けます。これによって最小限の労力で様々なデバイスに対応させることができます。

デザインフォントやアイコンフォントを使えるようになる

Webページ上の文章を飾り付けるテクニックです。ちょっと設定するだけで簡単に使えるのに、多分知らない人は知らないままの機能だと思いますので、この本を通して「そういう機能があるんだ」と知るだけでも意味があると思います。

本の中では「Google Fonts」と「Font Awesome」の使い方が解説されています。

感想

とてもわかりやすかったです。わかりやすすぎて、ほとんど1日で修了してしまいました。説明が丁寧でたくさんのページを使っている分、詰め込まれている分量は少ないです。

出来上がるWebページもすっきりとしていながら格好良いものなので作るモチベーションが上がります。出来上がったあとに自分好みにいじっていくのが楽しそうです。

個人的な問題は、出来上がったWebページをそのままWordPressに持っていく方法がわからないところですね。とりあえずはパーツごとの移植を考えてみようと思います。

おわりに

ということで、非常にわかりやすいCSSグリッドの入門書の紹介でした。

それでは今日はこの辺で。

アラフォーマン

歳はアラフォー、性別は男。風薫る季節、北の大地で生を受ける。家庭なし、収入なし、計画性なし。まだ知らぬ場所での生活にあこがれて旅立ってしまったアラフォーマン。
2019年5月に日本を離れ、デンマーク、リトアニア、ジョージアなどで学校に通ったりしながら過ごす。2024年9月現在、日本語を教えるボランティアとしてベトナムに滞在中。
好きなもの：公園、散歩、ジャグリング
苦手なこと：料理、おしゃれ、あと泳げません