HTML / CSS を学ぶ

投稿者: | 2017年8月18日

学びの必要性

ワードプレスで記事を書くだけ、とはいえHTMLとCSSを使わないと不恰好になって素人感のある記事になってしまいます。今の私がその状態です。
ワードプレスの利便性はサイト運営と更新を容易に行う事にあるので、ワードプレス上のメニューを基礎知識もなくぽちぽち弄っているだけだと、どうしても素人感が出てしまいます。
ワードプレスにもHTMLを適用するボタンも若干はありますけど、それぞれの意味を分かっていないと何をどうしていいやら状態になります。

始めた当初は「ワードプレスを理解すればサイトを作れる」と思っていたんですが

  • サイトの作り方が分かっていて、どういうサイトにしたいかイメージが出来ている
  • 更新やテーマ管理、サーチエンジン最適化(SEO)の為にワードプレスを使う

が正解のようです。

ワードプレスもHTML/CSSも両方馴染みがない私は、以下のステップで習得を目指しています。

  1. ワードプレス入門書を読みながら、とりあえずサイトを形にしてみる
  2. 思い通りのデザインで「記事」をかけるようになる
  3. 自作テーマは作りたいけど、着手はしばらく先送り

目的は「見やすくて分かりやすい記事」を書いていく事なので、「項目2」の記事作り → 「HTML/CSSの勉強方法」を紹介したいと思います。

予行演習・ネットで学ぶ

入門者向けの分かりやすい解説サイトさんがあります。
HTMLクイックリファレンスさんのHTMLの基本CSSの基本を一読しましょう。
分からないことが出てきても、そこで立ち止まってはいけません。次の段階で参考書(テキスト)を読みながら勉強しますので、前段階のイメージがつかめればそれでOKです。

テキストを一通り実践

今回私が学んだテキストはHTML5&CSS3レッスンブック、エビスコム(著)、ソシム(出版)です。

  • テキストエディタを使ってHTMLファイルとCSSファイルを作る
  • テキスト通りにコーディングしていく
  • ブラウザ上でコンテンツとデザインがどう変わっていくか体験できる

後追いで説明tips入っているので、分からない用語が出てきても「ん?」と思っても立ち止まらずに実践を進めていきましょう。後追い説明を読んでも分からなければネット検索してみるといいですね。
このテキストを最後までやりきると、コンテンツの作り方とデザインの設定方法が一通りつかめてきます。

このテキストを選んだ理由

  • 見やすさ:ページに余分な色とか囲いがバンバン使われているとどこを見ていいのか分からないのでこのテキストの見やすさは文句なし
  • 口コミ:ネット上の口コミで評価は上々だった
  • 上のレベルにつながる:レッスンブックの同じシリーズでこれよりも上位レベルのデザインブックがあり、ワードプレスのレッスン・デザインブックまである
    (レベルに合わせてテキストの一貫性がないのはつまづきの元)

以上の3点です。これ以上の選定理由はさすがにやってみないとわからないので。

結果は?

良かったです。
成果としては、今この記事もワードプレス上ではなく、テキストエディタを使って書いています。
原稿レベルでのプレビューは本当にイメージなので、ワードプレス投稿後のスタイルシートが適用されると見た目が変わりますし新たな訂正ポイントも見えてくるので、仕上げはワードプレス上の方が楽です。(太字強調やレイアウトに合わせた文章の最終添削)
この状態につながったので、狙い通りのスキルアップになりました。

<関連書籍>




HTML / CSS を学ぶ」への1件のフィードバック

  1. ピンバック: 003> WEBサイト作り、HTML&CSS – 30代から始める、新しいライフスタイル @MTS-LIFE.com 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です