• 締切済み

この画像を

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

画像を拡大する
  • HTML
  • 回答数3
  • ありがとう数0
回答 全件
細かい位置調整してないけど、例です。 ★タブは、＿に置換してある。 ★…
　HTMLは、デザインのために書くのではなくあくまで文書構造をマークア…
1. そのサイトにアクセス 2. HTMLとCSSを確認したいページを…

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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"> <!-- html,body{margin:0;padding:0;background-color:silver;} h1,h2,h3,h4{margin:0;line-height:1.2em;} div.header,div.section,div.footer{margin:0 auto;width:95%;min-width:480px;max-width:1000px;background-color:white;} div.header{height:110px;margin-top:30px;text-align:center;} div.header div.hgroup{width:400px;margin:0 auto;height:100px;} div.header div.hgroup h2{font-size:1.1em;text-align:right;} div.header div.nav{background-color:black;width:100%;padding-top:30px;position:relative;top:-30px;} div.header div.nav ol{width:480px;margin:0 auto;height:200px;display:block;list-style:none;padding:0;position:relative;font-size:0;background-color:lime;} div.header div.nav ol li{display:inline-block;width:20%;margin:0;padding:0;font-size:16px;position:relative;lin-height:30px;line-height:30px;} div.header div.nav ol li a{display:block;width100%;height:100%;background-color:aqua;} div.header div.nav p{position:absolute;bottom:0;left:50%;} div.section{border:white solid 1px;padding-top:10px;margin-top:150px;} div.section h2,div.section h3,div.section h4{font-size:1.4em;} div.section div.section{min-height:200px;margin-top:0;} div.section div.section{width:100%;margin:0;} div.section h1,div.section h2,div.section h3{font-size:20px;border:solid gray 1px;border-radius:5px;padding:3px;} div.footer div.nav{position:absolute;top:0;left:0;background:linear-gradient(rgb(192,250,250),rgb(156,225,225));width:100%;height:30px;} div.footer div.nav ul,div.footer div.nav ul li{line-height:30px;display:block;list-style:none;margin:0;padding:0;} div.footer div.nav ul li{display:block;float:left;width:10em;} div.footer div.searchForm{position:absolute;right:3%;top:40px;} div.footer div.searchForm h3{background-color:navy;color:white;} --> ＿</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)
回答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)
回答No.1

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

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 画像の上に文字を重ねる（高さ自動調整）

    HTML5 CSS2.1でホームページを作成しています。 http://allabout.co.jp/gm/gc/23824/3/ 上記サイトなどを参考に画像の上に文字を重ねたいのですが 文字の量に応じて画像の高さのサイズを自動的にぴったりに 調整することは可能でしょうか？ ご回答くださいましたら幸いです。

    • ベストアンサー
    • CSS
  • Photshopで画像透明化すると画像が粗くなる

    HTML＋CSSでHPを作成しています。 PHOTSHOPで画像を作っているのですが、背景を透明化させるとうまく表示されません。 画像が粗くなる感じです。背景を透明化せずに表示させるときれいに表示されます。 どなたか解決方法を教えていただけますか？

  • 画像を変化させる方法。

    　現在ＣＳＳでホームページを作っています。ある画像の上にマウスを乗せた時、別の画像を表示させたいのですが、背景として、設定せず、Ｊａｖａ　Ｓｃｒｉｐｔも使わず、ＣＳＳかＨＴＭＬだけで設定することは可能なのでしょうか？可能であれば、その方法を誰か教えていただけますか？よろしくお願いします。

  • 背景画像を画面の幅100％で表示させたい

    ホームページを作成しています。 全体的に、文章や画像の表示はセンタリングし、左右の画面余白部分に薄い色をつけたいと思っていますが、どのようにしたらいいのか悩んでいます。 左右に色をつけ、中央を白くした画像を画面100％に表示させられれば・・と思うのですが、CSS・HTMLで具体的にどのように指示すればよいでしょうか？

  • ファイアーワークスなどの画像編集ソフトでホームページを作れますか？

    画像編集ソフト「ファイアーワークス」でホームページ用のデザイン画像（JPGE）をつくって見ましたが、 この画像を利用して、スライスツール？などで、ＨＴＭＬ・ＣＳＳのサイトを 作ることができるのでしょうか。 通常は、ドリームウェーバーを使っていますが、上記の方法で作成可能かどうか、一般的にはこういった方法を使うのかどうかお伺いできればと思います、

  • ブログでアフィリエイトなどのリンクや、画像などを組み込みやすいブログは、どこ?

    ブログを自分なりに、ちょっと込み入って作り上げたい場合、 画像を入れたり、 リンクを張ったり、 アフィリエイト広告を入れたり、 背景を変えたり、 って色々やりますよね。 でも、HTMLやCSSなどを読めないとどこにどうやってやっていったらいいか、 HTML・CSS編集→ブログ表示→HTML・CSS編集→ブログ表示→HTML・CSS編集→ブログ表示→HTML・CSS編集→ブログ表示→という具合に、 編集しては確認、編集しては確認と続きますよね。 それが大変だなあと思うんです。 ホームページビルダーみたいな簡単にスタイルを変えたり出来る気の効きすぎたブログサイトってないんでしょうか? あったら教えていただきたいなあ。 ありますか？

  • 作りたいホームページのイメージ画像をつくりました。

    作りたいホームページのイメージ画像をつくりました。 ＨＰの横のほうに、縦に余白をつくり、真ん中のほうには画像のように縦に長くボックスのようなものをつくり表示するには、どうすればよいでしょうか? htmlとcssは一応軽くは勉強したのですが、どうするか思いつきません。 ボックスのようなものはテーブルを使い挑戦してみたりしたのですが、うまくいかないです。 また、HTMLとCSSだけで、このようなサイトは作れるでしょうか？

    • ベストアンサー
    • HTML
  • ホームページで画像を使ってカウントダウンさせるには

    自分のホームページに、画像を使って指定した日時までカウントダウンする機能をつけたいと思っています。 HTMLやCSSは使えるのですがJavascriptはほとんどわかりません。 なのでコピペするだけで実装できるようなコードを載せてもらえると助かります。 よろしくお願いします。

  • ヘッダー背景に画像を入れたい

    １．CSSというのは例えるならば、土地に区画を付けるものの事でしょうか？またそれに加え、先にカラーや文字などの設定を何らかの形で設定しておけば、HTMLでそのcssを記入すれば表示されるのでしょうか？ ２．CSS単独でホームページ上に表現させる事は不可能なのでしょうか？または、一般的ではないですか？ ３．HTMLと云うのは例えるならば、区画された土地に家を建てるようなことでしょうか？ ４．本題に入りまして、ホームページの上の部分、ヘッダーと云う場所ですか？に800×300の画像を背景として入れたいのですが、挿入すると今までその場所にあったボタン類が全てその画像の下に置かれてしまいます。理想は今回挿入する画像の上にそれらボタンを置きたいのです。 恐らくそれらは、一つ一つの塊として認識されている為に、重ねる事が出来ないのだと思うのです。 CSSで設定すれば私の要求は解決できますか？ 分かりづらいですが、大体のポイントでもいいのでお教えください。

  • CSSを用いた背景画像の表示方法

    　お世話になります。 　ホームページ作成の初心者です。 　H1タグ（大見出し）の箇所に、文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、CSSにて背景画像で表示したいと考えております。 　本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。 　ですが、添付画像ファイル（中に、”猫集まれ”と記載したいです）を、HTMLソース内部に、直接書き込みたいと思っております。 　どのようにすればよろしいでしょうか？ 　因に、以下の情報を載せさせていただきます。 <h1>猫集まれ！</h1> url("img/flower10.gif") background-repeat: no-repeat; padding-left: 30px; line-height: 120%; 　ご教示の程、よろしくお願い申し上げます。

    • ベストアンサー
    • CSS
政治家や組織の批判は侮辱に繋がるのか？
このQ&Aのポイント
  • SNS上での政府や組織への批判が増えていますが、その中には侮辱的な意見もあります。
  • 侮辱罪が厳罰化された現在、批判と侮辱の境界線はどこにあるのか疑問視されています。
  • また、批判に対する反発や中傷も存在し、差別的なツイートを批判した人が中傷を受けることもあります。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する