No.4ベストアンサー
- 回答日時:
こんにちは。
CSS3を使えば、画像なしでCSSだけでできますよ。
以下参考まで。
【HTML】
<img src="image.png" width="100%">
<div class="band"><p>あいうえおかきくけこさしすせそたちつてと</p></div>
【CSS】
*{margin:0; padding:0;}
img{border:0;display: block;}
.band{
width: 100%;
border-top: solid 4px #009d89;
}
.band p{
background-color: #009d89;
width: 50%;
color: #FFF;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
}
.band p:after{
content: "";
display: block;
height:0;
width:0;
border: solid 21px transparent;
border-bottom: solid 21px #009d89;
position: absolute;
right:-21px;
bottom:9px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
------------------------
説明として。
.band pで背景緑、幅50%のテキストを置く。
その右側に、擬似要素afterでborderを使った三角形を作り、それをtransform:rotate()で-45度回転したものを
position指定でくっつけています。(逆に白い三角形を作って、逆に回転させて、緑のテキストの上にかぶせるのもあり)
上部のボーダーは.bandにつけています。でないとwidth100%にできないので。
transformがIE8には対応していないので、その場合はIE8のCSS3適用プラグインを使用するか、やっぱり画像で対応するかだと思います。
頑張ってください。
No.3
- 回答日時:
こうなる。
No.2
- 回答日時:
HTMLには文書構造しか書かない。
(デザイン/プレゼンテーションはすべてスタイルシートで行う)「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
が大原則です。
あなたの質問では文書構造がわかりませんのでセレクタが書けないのですが、簡単なサンプルを作ってみましょう。
HTML4.01
<body>
<div class="header"><!-- この文書のヘッダ -->
<h1>見出し</h1>
<div class="nav"><!-- ここのナビゲーション -->
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
</div>
</div>
<div class="section"><!-- 本文 -->
<h2>本文の見出し</h2>
<p><q><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため</a></q></p>
</div>
<div class="footer">
</div>
</body>
HTML5でしたら
<body>
<header><!-- この文書のヘッダ -->
<h1>見出し</h1>
<nav><!-- ここのナビゲーション -->
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
</nav>
</header>
<section><!-- 本文 -->
<h2>本文の見出し</h2>
<p><q><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため</a></q></p>
</section>
<footer>
</footer>
</body>
ここで、
・headerブロックは全幅(width="100%")として、ナビゲーションはheaderの最下段にライン状に置きたい。
・章(本文)の見出しはタグのようにデザインしたい。
★常にこのように考えます。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄文書構造がわからないと次に進めない。
サンプル
★タブは_に置換してあるので戻す。
★HTML4.01 + CSS2.1
last-childはCSS3
★画像は下記のものを使用する。blue(0,0,255)を透明色に指定した、blue.gifで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;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:100%;min-width:630px;max-width:1600px;margin:0 auto;padding:5px;}
div.header{min-height:200px;position:relative;padding-bottom:30px;background:silver url();background-size:cover;}
div.header div.nav ul,
div.header div.nav ul li{margin:0;padding:0;list-style-type:none;color:yellow;height:40px;line-height:36px;}
div.header div.nav ul{position:absolute;bottom:0;width:100%;border:blue 2px solid;border-width:2px 0 0 0;font-size:0;background-color:white;}
div.header div.nav ul li{display:inline-block;padding:0 20px;background-color:blue;overflow-heidden;position:relative;font-size:12px;}
/*div.header div.nav ul li:before{content:url(images/background/blue.gif);position:absolute;left:-20px;top-2px;}*/
div.header div.nav ul li:last-child:after{content:url(./blue.gif);position:absolute;right:-20px;top-2px}
div.section{border:solid green 2px;;border-width:2px 0 0 0;position:relative;padding-top:30px;}
div.section h2{display:block;width:auto;background-color:green;position:absolute;top:0;padding:0 20px;}
div.section h2:after{content:url(./blue.gif);position:absolute;right:-20px;top-2px;}
-->
_</style>
</head>
<body>
_<div class="header"><!-- この文書のヘッダ -->
__<h1>見出し</h1>
__<div class="nav"><!-- ここのナビゲーション -->
___<ul>
____<li>あいうえお</li>
____<li>かきくけこ</li>
____<li>さしすせそ</li>
___</ul>
__</div>
_</div>
_<div class="section"><!-- 本文 -->
__<h2>本文の見出し</h2>
__<p><q><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため</a></q></p>
_</div>
_<div class="section"><!-- 本文 -->
__<h2>本文の見出し</h2>
__<p>HTMLに文書構造しか書かれていないと、自在にデザインできますし、検索エンジンはむろん、あらゆる端末で利用できるし、いつでもデザインは変えられる。</p>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- Illustrator(イラストレーター) Illustratorで図形の背景のみをぼかす方法 1 2023/01/25 20:04
- その他(健康・美容・ファッション) 二重幅を簡単に短期間で広げられる方法が知りたいです 昔はもっと目の縦幅があって、二重幅も広かったです 2 2022/05/22 23:52
- 画像編集・動画編集・音楽編集 A1サイズで画像作成(300枚以上の写真を並べたいです) 1 2023/08/03 12:18
- Illustrator(イラストレーター) イラストレーターで文字の背景に自動で入れた長方形の左側の角だけ丸く(右側だけ直角に)する方法 4 2023/04/21 11:08
- その他(ヘルスケア・フィットネス) FTMです。 くびれがあり、骨盤は広く大転子も張っていてお腹は細いのに足が不自然に太いです。 おそら 1 2022/11/30 09:19
- ストレッチ・体操・エアロビクス 至急 写真のような体型を治す方法を教えてください。 誇張して描いてしまった部分もあったり、普通じゃね 1 2023/07/20 21:45
- 着物・浴衣・水着 男物の浴衣を女性が着る時の注意点 1 2022/07/01 12:40
- 哲学 物語における「魔法」は「実現可能性」というくびきがなく、作者がそれ故に恣意的に設定を決めることができ 2 2022/08/20 17:04
- 引越し・部屋探し 【冷蔵庫搬入の幅について】 引っ越しをします。 冷蔵庫をかおうと思っています。 急ぎです。 価格は安 2 2023/06/15 19:12
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
div要素が重なってします
-
ヘッダーを左右に二分割する方...
-
min-heightとheightの違いについて
-
<!-- #BeginLibraryItemとは
-
画面を縮小するとカラムが落ち...
-
ホームページのヘッダー部分の...
-
html の divとtable の役割
-
[CSS]ヘッダー固定+コンテン...
-
body>div{}の意味を知りたい
-
動画を掲載すると最下部のフッ...
-
レスポンシブかつ、スマホ、携...
-
RMS レフトナビ問題
-
画面を拡大すると横幅が切れる
-
スペースを使わず文字位置を揃...
-
WEBサイト制作の図面作成ソフト...
-
<div id="container">の使いか...
-
オシャレな区切り線はありませ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報