どうも。Reoです。
cssの勉強しなおしをしたくて「いちばんよくわかるHTML5&CSS3デザイン きちんと入門」を一読したので感想を書いていこうと思います。
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA) 新品価格 ￥2,678から (2018/3/5 18:03時点) |
一言で言うととても良かった！！！！！
本書の構成
本書は
CHAPTER1 Webサイトの仕組みを知ろう CHAPTER2 HTMLの基礎知識とマークアップの実践例 CHAPTER3 CSSの基礎知識とページデザインの実践例 CHAPTER4 テキストの装飾 CHAPTER5 リンクの設定と画像の表示 CHAPTER6 ボックスと情報の整理 CHAPTER7 テーブル CHAPTER8 フォーム CHAPTER9 ページ全体のレイアウトとナビゲーション CHAPTER10 レスポンシブWebデザインのページを作成しよう
の全１０章の構成になっています。
目次からもわかるように、本書は1つのサイトを作りながら学ぶタイプではなく、「
自分の知識を固めるために読むための本だなーという印象です。
フォントの説明が良い！
自分が以前読んだhtml/cssの本（だいぶ古い）には、テキスト関連の説明がここまで詳しくなかった気がします。
フォントサイズの説明（emやremまで）が結構しっかりされててわかりやすい。
個人的にとても良かったのは「font-family」をsans-serifのみを指定した時と、"ヒラギノ〜","Hiragino〜"っていくつも書く方法での表示差異の話です。
iOSアプリもそうなんですが、デフォルト指定だと半角英数字と全角文字のフォントが違うんですね。全角はヒラギノだけど半角英数字はヒラギノじゃないものになっちゃう。
それと同じようにsans-serifだけだとブラウザによって、半角英数字のフォントが違うものに設定されるっていうことが書かれていたのがとても良かったです。
あとは見出しにサブタイトルをつけるテクニックだったり、※印の後の改行で1文字字下げする方法とかもタメになりました。
HTMLのタグ付けやCSSの書き方がキレイ！
これは本当主観なんですけど、コードがキレイだなって思いました。
というのも、１つのサイトを作りながら学ぶ系の本は、基本的にパーツを１つずつ配置して、cssを適用してってしていくので、大抵cssをその都度付け足すことになります。
なので、そういう本を読んできた自分とかは特に、同じクラス名をつける癖があんまりないんですよね。クラス名は同じクラス名を何度使ってもいいよ！とは書かれてたけど、本では毎回違うクラス名使ってcssを適用していたので、むしろあんまり同じ名前のクラスはそんなに使わんのかなーと思ってました。
本書のコードはそうではなく、「ページ全体の大まかなスタイルを適用してから、だんだん細かい部分を調整して仕上げる」形のコードになっています。
具体的には詳細度の説明があり、管理しやすいcssを書くための知識を身に付けることができます。
htmlタグもキレイ！！！
これは本書の9章を真似して作ったものなんですが、htmlのタグとても見やすい設計になってるなーと感じました。
ていうか今時の３カラム作るの死ぬほど楽ね・・・flexboxしゅごい・・・
モバイルファーストCSS！
本書はレスポンシブデザインについても書かれていて、上記画像のものもレスポンシブになっています。
レスポンシブこんなに簡単なの・・・って思いました。
そしてモバイルファーストCSSで書かれています。以前はデスクトップファーストCSSが主流でした。現在ではモバイルファーストCSSの方が一般的ですって、知識の古い自分にはちょっと目から鱗でした。その手があったか。
擬似クラスの説明や属性セレクタの説明がしっかりで嬉しい！
a[target="_blank"]::afterっていう書き方、作ってみる系の本ではあんまり触れられなかった印象で、結構曖昧な理解だったんですが、これこそ知識が固められました。
感覚ではわかってるけど口では説明できないものが、説明できるものになったって感じ。
そして自分の疑問「え？::after？:afterが正しいのではないの？」っていう疑問にもちゃんと答えてありました。
とにかく全体の説明が丁寧！Noteが役に立つ！
自分が本屋でいくつもあるhtmlの本の中から本書を選んだ理由は「
そこ？！って感じですが、これは良書の予感！ってのがあったんですよね。
例えば、bodyにはデフォルトで上下左右にmarginがついてるよ、なんて今まで自分が読んできた本には書いてなかったです。おかげで毎回Webサイト作る際になんでここ隙間あくの〜〜〜〜ってなってました。
そういうことがNoteに書いてあってとても役に立ちます。
!importantは特別な理由がない限り使わない方がいいっていうNoteがあった後に、!importantが出てきて、使っとるやんけ！って思ったら、「!important」があるのはなぜ？というNoteが出てきてめちゃくちゃ丁寧だなと感じました。
あとは注釈のスペースが枚ページあって、その注釈がとにかく細かいです。
「!importantがあるのはなぜ？」と書かれたページには注釈で!importantの説明があったページが書かれています。
属性セレクタの説明の後、属性セレクタが再び出てきた時に参照先が書かれているので、読み進めていてコレどこに書いてあったっけ？ってなることがあまりないです。その辺もとても丁寧だと感じました。
JavaScriptに関しては１つも書かれていない！
注意して欲しいのは１つのWebサイトを作るのではないので、JavaScriptに関しては何も書かれていません。
実際に使われている箇所はあるのですが、ファイルの中身に関しての言及は本当に１つもありません。具体的にはフレックスボックスを使ったナビゲーションにハンバーガーメニューでjavascriptを用いています。
clearfixが出てこないのは時代か・・・
定型文として覚えたあのclearfix、結局clearfixの文字すら出ずに読み終えてしまいました。時代を感じます。
実際にclearfixの役目としてoverflow:hidden;の方が用いられていました。
もうclearfixの時代は終わってしまったのね・・・。使うこともまだ全然あるんだろうけど・・・。
総評！知識を固めるのに最適！
とにかく自分にはとても合ってた！良かったです！！
html/cssの知識がまだ固まってなく、少し曖昧な人にオススメです。
反対に、例えばmarginやpaddingって何するもの？タグって何？って人にはあまりオススメしません。
もちろん初心者でも分かる形になっていますが、それよりも一度ほんの少しでも触ったことがある人が知識を固めるために読む方が断然タメになる！と思います。
言うならば「教科書」なんですよね。本書の背に「これから本気で学びたい人の最高の教科書」って書いてあるんですけど、本当にそういう感じなんです。
例えば化学の授業で、実験をしてから教科書の説明を読むか、教科書の説明を読んでから実験をするか、自分は実験をしてからのが頭に入ると思っています。
ゲームを作るのも言語を勉強してから作るか、まず見よう見まねでまずゲームを作ってみるかだったら、絶対後者のが楽しいですからね〜。
んで教科書って何か導入が別にあって、それに興味を持てば、それまでと違ってスッと知識が入ってくるもんだと思うんですよ。
個人的に、まずは「０からWebサイトを作りながら学ぶタイプ」の本を読んでみるのが一番です。
そして2冊目に本書を読むのがベスト！！！！！！！
あとは自分みたいにcss2ならわかるんだけど・・・って人にはとてもオススメです。
というのも
また、
第10章が「レスポンシブWebデザインのページを作成しよう」という項目があるので、そういうことが書かれているのでは？と思う人もいるかもしれませんが、この章はあくまで、全体の流れを知るためのものだと感じました。
ソースコードに新しいことや大事なことがあれば少しコメントがある程度です。
なので
あと、本書の10章以外は、見やすさの都合上style.cssが出てこないので、に書くのが普通なんだと勘違いしない程度の知識はないと。見やすさの都合上と書かれてはいても、そこを見落としたらそう書くのが普通と思ってしまうかもしれない。。。
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA) 新品価格 ￥2,678から (2018/3/5 18:03時点) |
あと本のデザインがとても良いよね！！！中身も図も見やすいし！！
しかし独学は知識の更新しないと、誰かが教えてくれるわけじゃないので少しツライもんがあるね。
だいぶ時代に取り残されてたんだなーと思いました。本書に数年前までは〜が主流でしたってのをみる度に数年前・・・(´･ω･`)って気持ちになってました。
marginに%はもう使うこと滅多にない マジで？！？？！？！？
clearfix出てこない マジで？？？？？？？
モバイルファースト ！？！？！？！？！？！？
まぁでもうるおいらんど含め、地味にコツコツ知識を集めてレスポンシブしてたので、全く知識ないわけじゃないんだけどね。でもショックなことが多かったです。flexboxの楽さも然り・・・。
でも知識の更新できたので、ようやくうるおいらんど改修に取りかかることができます。
まずはデザイン・・・。そしてローカル環境構築・・・。そして改修・・・。道は長い。
今まではアクセスなかったし本番環境ぶち込んでたけど、今それやるとまじやばいので、ローカル環境構築からしないと！頑張ります！！！！
あと今Robin審査出してます〜。（IPv6がどうのでリジェクトされて、こっちだと動くよメッセージ送ったとこ）
それではでは〜。
Additional Notes追記
ブログリニューアル前に読んでおいて本当に良かった。
コメントはありません。
現在コメントフォームは工事中です。