現在HTMLとCSSを基礎知識をマスターしようとしています。
とりあえず、HTML&CSS入門本を1冊購入し最後まで読み終わりました。
実践形式な本だったので、その本に書かれてある手順通りの簡単なサンプルサイトが出来上がりました。
あまりにも簡単な内容だったので、基礎知識をマスターまでは出来ていないと思います。
ですので、2冊目として基礎~マスターまで学習できる本を探しています。
1冊目の実践形式で進めていける本はとても分かりやすかったので、文字ばっかりの知識紹介やタグの羅列辞典等ではなく、画像等をはさみながら操作手順をこなしていける内容の本、又はサイトを探しています。
良い本、またはサイトはありますでしょうか?
No.1ベストアンサー
- 回答日時:
ご卒業おめでとうございます。
とても、難しい質問ですね。
実は、どの書籍も大差ないのです。はっきり言うと『画像等をはさみながら操作手順をこなしていける内容』はそこまでなのです。それ以上は、まったく異なるアプローチでないと身につけられないのです。・・・・それが難しいと言った理由です。
言い換えると、そこから先は「画像等をはさみながら操作手順を」示して説明することは無理なのです。
すでに学ばれたように、HTMLは
・文書を読み解き内容を理解して、その文書を構成する要素(Element)に分解し、それぞれの要素をタグを使ってマークアップしていくメタ言語です。
一方CSSは、
・HTMLの構造に基づいてセレクタを使って要素を指定してプレゼンテーションを指定するものです。
言い換えると、「この様にデザインするためにHTMLをこの様に書き、スタイルをこの様に書く」というアプローチでは、それ以上前に進めないのです。なぜなら、文書はテーマもコンセプトも実に様々なのですから。デザインに縛られていたら、デザインのためにHTMLを書くことになり「構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」ではなくなってしまうからです。
ここから先に進むためには、もう一度基本に立ち返って、ひたすら文書構造をマークアップしたHTMLを作成する訓練と、出来上がったHTMLを元に、それ(HTML)には一切手を加えずスタイルシートで様々にデザインしていく訓練なのです。
それには、少なくとも仕様書を理解し「自家薬籠中の物 ( http://kotowaza-allguide.com/si/jikayakuroutyuu. … )」にしなければなりません。
具体的に、なぜそれが「画像等をはさみながら操作手順を」示す方法では学べないかの例を挙げましょう。
HTML
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
これは、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」がとても参考になります。すなわち、文書を読み解き
<div class="header"></div><div class="section"></div>のようにマークアップしなさいということなのですが、これは図では無理でしょう。
CSS
カスケーディングスタイルシートの根幹ともいえる「5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )」や「6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )」はどう逆立ちしても図では無理です。
あなたに必要なことは
1) HTMLを文書構造をマークアップするように書ける様になること。このときデザインは考えない。---HTML4.01strictですよ。
特に
・リンクやjavascriptのターゲットでない限り無用なIDは書かない。
・class名は文書構造を補完するものにする。
2) そのHTMLに手を加えず、様々なデザインをスタイルシートで指定してみる。
・セレクタ--特に詳細度やカスケーディングを活用してシンプルで解りやすいものにする。
その繰り返しでしょうね。参考書は
★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
(注)現在ウェブ標準とされているものはCSS2.1です。詳細度やカスケーディング部分では変更があります。
CSS 2.1 ( http://www.w3.org/TR/CSS2/ )--邦訳がないので「変更点 ( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )」
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
画面を縮小するとカラムが落ち...
-
テキストの揃え方について
-
セクションをdivで囲むと見出し...
-
div要素が重なってします
-
1時間30分を簡単に表したいで...
-
HTMLのJIS規格について
-
カラム落ちの対処法について
-
<div>で改行させない方法
-
可変長要素を中は左寄せのまま...
-
h1を親要素の縦中央、画像の横...
-
IEで表示されてしまう余白をな...
-
リストで画像を右に表示したい
-
idとclassの指定方法
-
画像の横にテキストを縦方向中...
-
きれいなホームページを作りたい
-
今までのレイアウト無視して設...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報