締切済み

この画像を

2013/06/14 23:28

この画像と同じホームページを作成するHTMLとｃｓｓを教えてください。

20860905se
お礼率0% (0/7)

HTML
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/06/15 19:11 回答No.3

細かい位置調整してないけど、例です。 ★タブは、＿に置換してある。 ★HTMLはシンプル--何も細工はない ★サイズはリキッドですから、ウィンドウ幅を変えても良い。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<div class="hgroup"> ＿＿＿<h1>タイトル</h1> ＿＿＿<h2>あいうえお</h2> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="A">あ</a></li> ＿＿＿＿<li><a href="B">い</a></li> ＿＿＿＿<li><a href="C">う</a></li> ＿＿＿＿<li><a href="D">え</a></li> ＿＿＿＿<li><a href="E">お</a></li> ＿＿＿</ol> ＿＿＿<p>ここにも花が咲いています</p> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h1>本文見出し</h1> ＿＿<p>テキストテキストテキストテキスト</p> ＿＿<div class="section"> ＿＿＿<h2>章見出し</h2> ＿＿＿<p>テキストテキストテキストテキスト</p> ＿＿＿<div class="section"> ＿＿＿＿<h3>項見出し</h3> ＿＿＿＿<p>テキストテキストテキストテキスト</p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>項見出し</h3> ＿＿＿＿<p>テキストテキストテキストテキスト</p> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li>電子メールで送信[M]</li> ＿＿＿＿<li>印刷[P]</li> ＿＿＿＿<li>スライドショー</li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="searchForm"> ＿＿＿<h3>サイト内検索</h3> ＿＿＿<form action=""> ＿＿＿＿<p> ＿＿＿＿＿<input type="text" size="10" name="name" value=""><input type="submit" value="検索"> ＿＿＿＿</p> ＿＿＿</form> ＿＿</div> ＿</div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/06/15 08:28 回答No.2

　HTMLは、デザインのために書くのではなくあくまで文書構造をマークアップするものですから、HTMLはあなた自身でなきゃ書けないです。　スタイルシートは、その文書構造に基づいてデザインしていくものです。　文書構造とプレゼンテーションをきちんと分ければ、そのようなデザインだけでなく、好きなようにデザインできます。デザインを後から他の形に自在に変更できます。 [例] <body> 　<div class="header"> 　　<h1>タイトル</h1> 　　<div classs="nav"> 　　　<ol> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ol> 　　</div> 　</div> 　<div class="section"> 　　<h1>本文見出し</h1> 　　<div class="section"> 　　　<h2>章見出し</h2> 　　　<div class="section"> 　　　　<h3>項見出し</h3> 　　　</div> 　　　<div class="section"> 　　　　<h3>項見出し</h3> 　　　</div> 　　</div> 　</div> 　<div class="footer"> 　</div> </body> という文書構造でしたら div.nav　を高さと最小幅を決めてmargin:0 auto;で中央配置して背景色を指定する。 div nav ol の背景と高さを指定する。 div.nav ol liを横並びにして収める。　という簡単な方法になれます。本文中のh1,h2,h3については、周囲をborderで囲み、レベルによって背景色を指定すれば良いでしょう。　まず、文書構造だけを(デザインは一切考えずに)マークアップしましょう。それさえ出来ていれば、デザインはいかようにも [例] 　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 　ブラウザの表示メニューからスタイルを選択して、様々なスタイルを選択するなり印刷プレビューで確認すると、HTML自体は変更なくして、デザインだけが変更されますね。さぞかしHTMLは複雑と思いきや、HTML自体は極めてシンプルです。HTMLさえきちんと書かれていればデザインは好きになるはずです。　まず、HTMLをきちんと書きましょう。その上で、この構造のHTMLをこのようにデザインするにはドウしたら良いでしょうか？と聞かれると良いでしょう。

hitomura
ベストアンサー率48% (325/664)

2013/06/15 01:12 回答No.1

1. そのサイトにアクセス 2. HTMLとCSSを確認したいページを「Web ページ、完全」で保存でレイアウトを確認するのに必要なファイルは持ってこれます。ただし、上記の方法では HTML からの参照パスは変更されるので、元の形の HTML がほしい場合はソースを表示してそのソースを保存しましょう。