A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
>ホームページビルダー19、SPで作ったらほぼ自分の好みに近い形、内容のものができましたが、
「ほぼ」と言うより、相当な初心者、それも間違った沢道に迷い込んでいる。このままだと本堂に戻るのが大変になるので、早めに直しましょう。
以下、参照すべきリンク先を併記して詳しく説明しますから、リンク先も読んでおくこと。
HTMLは、デザインツールではありません。
2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
【最も重要な基礎知識】
HTMLは、その文書を構成する要素(Element)に分解し、それぞれの要素をタグを用いて、どんな要素であるかを示すマークアップ言語です。
<body><!-- ここから本文(body)-- >
<h1>ここはこの文書の最上位の見だし(heading)</h1>
<p>ここから一つの段落(Pargraph)であり<q>ここは引用(quote)語句</q>です。</p>
とね。もっぱら文書の構造を示していくのがHTMLです。HTML4(XHTML1.1)以前は、文書の意味を示す要素が不足していたため、『id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』しなければなりませんでした。★デザインのためにDIVやSPANを使うのじゃない★
その反省から、HTML5では、『文書をよりよく構造化するために( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』新しい要素が追加されました。
これについては、
HTML5“とか”アプリ開発入門(1):Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - @IT( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )
の中ほどの「【問題2】文書内に埋め込まれた「意味」が不明確」も読むこと!!
それによって、検索エンジンはそのページの内容を正確に把握できるようになります。これこそがSEO 検索エンジン最適化(Search Engine Optimization)の本来の意味であり、目的なのです。それによって検索結果に反映されるのは、結果であって、決して検索順位を上げるための手順が目的ではありません。
デザインは、文書構造さえ適切にマークアップされていれば、自在に、そして効果的にできますから、シンプルなHTMLとあいまってメンテナンス性も向上します。副次的に検索結果にも反映される。
これらの基本を知らずしてオーサリングツール--特にビルダーのような最悪なツールを使用すると、このウェブ標準に反したものができてしまいます。 https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC …
HTMLを知らなくても良いページができるなんてありえないのですょ。良心的なオーサリングツールは、HTMLやCSSを知らなければ扱えないと言っている。
[基本]デザインためにHTMLは作らない。
まず、ページ全体を平のテキストで書いていきます。
ついで、その文書を読み解いて要素に分解し、それぞれの要素を示すタグでマークアップする。
示しきれないときはclass名を併用してDIVやSPAN要素を使う
[デザインする]
シンプルなページができるはずです。そのページはブラウザの持つデフォルトのスタイルシートで装飾されているはずです。
それぞれの要素をセレクタを使って指定してスタイルシートでデザインして行きます。
こうなると、反ってビルダーは極めて扱い難いツールになってしまいます。文章を読んで、要素に分解して、それに最適なタグを選択するなんて作業はツールにはできません。著者であるあなたにしかできない。
デザインを適用したい要素を、セレクタを駆使して特定する作業は、どんなオーサリングツールでも不可能でしょう。
例えば、div.secton div.section+div.section p{color:blue;}とは、section(主題)中の主題に続く(;)主題中の段落の・・・・・・文字色は青・・なんて、セレクタの書き方を知らないとツールは手助けしてくれない。
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
⇒HTMLエディタで作成するシンプルなコードは検索エンジン最適化にも効果的であることから、一部のウェブデザイナーには見直されつつあり( https://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83 … )
実例のサンプル
ナビゲーションリストを様々にデザインしてみよう。( http://ichiya.com/WebService/Howto/sample/HTML/n … )
のページに行って、ページの右クリックからHTMLソースを見るとビルダーが作ったものと一目で違いがわかるシンプルな物で、記事の追加やメンテナンスが容易なこと、検索エンジンが内容を把握しやすいことが分かるでしょう。
ついで、ブラウザ--chromeを除く)の[表示]メニューからスタイル(シート)を選択して、色々用意されているスタイルシートを選択してみましょう。また[ファイル]メニューから印刷プレビューも確認してみましょう。HTMLに文書構造しか書かれていないから、「自分の好みに近い形」ではなく「自分好みのデザイン」に自在にできるのですよ。デザイン変えたければスタイルシートだけ書き直せばよいし、携帯電話やスマホに対応させたければ、そのスタイルシートだけ書けば良い。
あなたが最初にテキストエディタから入られたのだったら方法を変えるのは簡単なのですが、もしビルダーから始められたら大変な苦労をされることになるでしょう。なぜならビルダーは、本来のウェブとは逆のアプローチで作られたツールなのですから。
この回答へのお礼
お礼日時:2015/02/28 16:19
言っていることがよく理解できますねぇ。
デザイン的にはほぼ満足という意味ですが(苦笑)
SPはやはり駄目だと分かり、別に作り直しています。
親切なお答えをありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
smallにtext-allignが効かない
-
【ヒトの神秘】美男美女から何...
-
html タグの閉じスラッシュ前の...
-
input type="hidden"で取得した...
-
含む含まないという概念自体の...
-
H1タグを画像にしたい
-
スタイルシートで文字色を指定...
-
質問1.
-
双方向リストのソート方法につ...
-
emとstrongの反対
-
</br>を無くして、CSS
-
還暦を過ぎた方々に質問です。
-
空要素タグ??
-
C言語 並び替え(配列)について
-
アコーディオンメニューの二階...
-
期待すると信頼するの違いはな...
-
ある要素の中身を全部グレーア...
-
CSSで改行後の行間調整
-
ホームページビルダー16の属...
-
指定したidやclass以外の要素を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
質問1.
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
CSS:overflow要素の印刷について
-
タグは大文字と小文字どちらが...
-
NからZへの全単射を具体的に構...
-
HTMLでTextareaを横に2つ並べ...
-
H1タグを画像にしたい
-
figcaption要素の中にul要素
-
imgタグをそのまま使うことは正...
-
textareaの幅を画面と合わせたい
-
ある要素の中身を全部グレーア...
-
テキストボックスの中にリンク...
-
スタイルシートで文字色を指定...
-
HTMLページ上でiframeを最前面...
おすすめ情報