ホームページのスキルアップは基本に戻ってHTMLとCSSから

   

 

夏風邪が長引いたおかげでHTMLの再学習に励んだ

 

更新が滞っています。

夏風邪が長引きすっかりぐだぐだになってしまっていました。

もう一ヶ月近くになります。

とはいえ、読書ぐらいはできるので、ひそかにHTML&CSSのやり直しをしていました。

やり直し?

やり直しじゃなくて、HTML5とCSS3は始めて勉強したみたいなものです。

やり直しのレベルじゃないです。

今年に入ってはWordPress本ばかり見ていたのですが、いくら読んでもどうも実践的力が着いて来ていない気がしていました。

内容は分かるのですが、固定ページを書いてみようと思っていてもなかなか取り掛かろうとしない。

いや、取ッ掛がつかめなくて、なかなか始めるにいたらなかったのです。

そのくせ、テーマを利用するのでなく一から組むにはやはりレスポンシブの知識も必要だという考えも浮かび・・・。
ということは、CSSフレームワークも学ばなければと、Bootstorapの本も探していました。

 

HTML5

やっぱり基本はHTMLとCSSです

 

本屋でどの本にするかあれこれ探していたのですが、どうもWordpress系だと手持ち本とのダブりが多すぎるのとBootstorap単独本だと必要以上の内容のようで選びきれない。

そこでふとHTML&CSS系まで範囲を広げてみて手に取ったのがこの本です。

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

目から鱗が・・・。

そうだ!HTML5やCSS3って実はほとんど知らないんだ。

知っている振りして通り過ぎてきたけど、知っているのは何年も前にHTML3か4あたりでうろついただけなんだ。

その頃ちょっとだけ勉強して、ちょろっとだけ書けるようにはなっているが、あれ以来ほぼインプットがないもんね。

HTML5とCSS3からもう一度始めた方が良いに違いないと基本に戻りました。

HTML5とCSS3に関しては、「できるポケット HTML5&CSS3/2.1全事典」も持ってはいたのですが、これだけで理解するのはかなり困難というものです。

やはり辞典というだけあって、分からないところが出てきたときに見て初めて学習できる類です。

 

「これからの「標準」を身につける HTML+CSSデザインレシピ」

 

読んでみて初めてわかった。

この本を開く前の僕のレベルは笑えるぐらいでした。

  • .menu li a:before の beforeとかafterって、えぇ!?何それ?
  • テキストの前にアイコンや画像ってどうやってつけるんだったっけ?
  • max-width!何それ!?
  • .entry :last-child{margin-bottom;0} エントリーの最後の子要素?分かるような気もするけど。
  • aのdisplay:block;して、padding追加する意味って何?
  • .menu li+li a {border-left:solid 1px #aaa;} li+liって、どこでどう調べたらいいのかわからんし・・・。

というような感じでした。

 

ビギナーにやさしい本です

 

まぁだいたいがCSS3の新機能のようです。

これは基本からやり直さないと分かるわけがありません。

まだ3分の1しか読んでませんがなかなか初心者にやさしい本だと思います。

大技の披露よりは地道なパートの細かいレイアウトがじっくりと解説されています。

シンプルなHTMLとCSSがその表現と一緒に提示されて、繰り返し類似例題の発展形が示されるので自然と書き方がわかってくるようになります。

セレクタの機能について解説を読むだけじゃなかなか理解が進まないことが多いですが、本書のように別のケースからも表現されると分かりやすくなりますね。

いわゆる習うより慣れろの世界で、何度も接することでCSSの書き方にも慣れてくるのだと思います。

とはいえ、先ほどのli+liやchildなどは未だにもやもやの中で理解している状態です。

実際に自分のもので書いてみたらわかるのだろうけどサンプルではいまいち理解できないこともあります。

とりあえず今の段階で、このブログのWordpressテーマであるスティンガー7のCSSを読み直してみたところ、違う世界が広がっていました(^o^)/

 

BootstrapもHabakiriテーマから勉強させてもらいます

 

もうすぐBootstrapのパートに入ります。

Bootstrapに関してはとりあえずTakashi KItajimaさんのWordpressテーマ、habakiriの設定がある程度できることを目標にします。

この間、Habakiriをインストールしたものの手も足もでていません。

自由度が高すぎて私のレベルでは一から書き始めるのと大差なかったようです。

せめてどういう構造になっているのかでも理解できるよう頑張ろうと思っています。

※Habakiriとは

保存

保存

保存

保存

保存

保存

Pocket
LINEで送る
[`evernote` not found]

にほんブログ村 ライフスタイルブログ スローライフへ

 - インターネット&PC, 趣味でワクワク , ,