http://trendytuts.com/web-layout-tutorials/how-t …
このサイトで紹介されているデザインをhtmlとcssを使って作成するとき、
どのように画像をスライスして、どう作成すればよいでしょうか。
上のメニューの部分が分からないので教えていただきたいです。
真ん中のオレンジの旗をdivタグに名前をつけてheaderとし
HomeからContact Usまでのメニューをリストタグにして…と考えているのですが。
htmlとcssを使用して、真ん中のheaderがメニューの上に重なるように作ることは出来るのでしょうか。
上記の方法でなくても、他に方法があれば教えていただきたいです。
説明下手ですみません。よろしくお願いします。
No.1ベストアンサー
- 回答日時:
> 真ん中のオレンジの旗をdivタグに名前をつけてheaderとし
> HomeからContact Usまでのメニューをリストタグにして…と考えているのですが。
HTMLのタグ的には問題ないです。
で、レイアウトはCSSで全て指定します。
例HTML)
<div id="pageheader">
<div id="header"><img src="hata.gif" width="200" height="200"></div>
<ul id="globalmenu">
<li><img src="gm1.gif" width="100" height="50"></li>
<li><img src="gm2.gif" width="100" height="50"></li>
<li id="gm3"><img src="gm3.gif" width="100" height="50"></li>
<li><img src="gm4.gif" width="100" height="50"></li>
<li><img src="gm5.gif" width="100" height="50"></li>
<li><img src="gm6.gif" width="100" height="50"></li>
</ul>
</div>
例CSS)
#pageheader { position:relative; top:0px; left:0px; width:800px; z-index:0; }
#haeder { position:absolute; top:0px; left:300px; width:200px; height:200px; z-index:1; }
#globalmenu { position:relative; top:100px; left:0px; width:800px; height:50px; z-index:0; }
#globalmenu li { width:100px; height:50px; float:left; font-size:1px; }
#gm3 { margin-right:200px; }
てな感じですが、きっちりレイアウトを納めるには、天地横のピクセル指定が重要です。
例に指定したサイズはあくまで例です。
全体を画面センターにしたい場合は、
#pageheader { position:relative; top:0px; left:0px; width:800px; z-index:0; margin:0px auto; }
という風に、marginの左右を「auto」にすれば、センターになります。
また、
#globalmenu li { width:100px; height:50px; float:left; font-size:1px; }
に、「font-size:1px」と指定しているのは、
画像サイズが、<li>の文字サイズより大きくなった場合、その下に隙間が空いてしまうので、
それを防止するために、指定しているだけです。
まとめ)
ようは、CSSのPOSITIONをうまく使えば、自由自在なところに配置できるわけです。
No.2
- 回答日時:
No1の者です。
CSSに記述ミスがありました。
CSSを知っていれば、気づくと思いましたが、一応修正しておきます。
誤
#globalmenu { position:relative; top:100px; left:0px; width:800px; height:50px; z-index:0; }
↓
正
#globalmenu { position:relative; top:100px; left:0px; width:800px; height:50px; z-index:0; margin:0px; padding:0px; list-style:none; }
以上です。失礼しましたm(_ _)m
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
widthやheightの数値に単位(px...
-
<div>と<div>の間の10px程の...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
4枚の画像を均等間隔で一列に...
-
CSSがなぜかfont-sizeだけ効か...
-
ddの内容が多い時のdtの背景を...
-
【HTML&CSS】フッター下部の余...
-
テーブルのセル間に余白が空い...
-
htmlのボタンのサイズについて
-
cssで「下よせ」ってどうやって...
-
【css】floatを指定するとはみ...
-
table周辺の隙間をなくしたい。
-
CSS3で角丸写真にシャドーを付...
-
スクロールボックスを中央に配...
-
firefoxのみテーブルのborderが...
-
border-style:solidで文字がずれる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報