No.1ベストアンサー
- 回答日時:
ウェブページで、「見出し部分(例えばh3)を飾りたい」ということですね。
あくまで、そのように考えるのがポイントです。
例えば、下記のようなHTMLがあったとします。
けっして、デザイン目的でHTMLは書かない!!後でデザイン変更できなくなります。
<body>
<div class="header">
<h1>このページのタイトル</h1>
<div class="nav">ナビゲーション</div>
</div>
<div class="section">
<h2>本文</h2>
<div class="section">
<h3>欠席された理由について</h3>
<p>記事の段落</p>
</div>
<div class="section">
<h3>サブ項目</h3>
<p>記事の段落</p>
</div>
<div class="section">
<h3>サブ項目</h3>
<p>記事の段落</p>
</div>
</div>
<div class="footer">
<h2>記事のフッタ</h2>
</div>
</body>
スタイルシートで、デザインをしたい要素を文書構造に従ってセレクタで指定して、スタイルを書くことになります。
[例]
div.section div.section h3{ /* sub sectionの見出し */
border:gray solid 1px;/* 枠を描く */
border-radius:5px;/* 丸める */
background: linear-gradient(white,silver);/* 背景を線形グラデーション */
padding:5px;/* 枠とのすきま */
position:relative;/* 位置の基準 */
z-index:10;/* 手前に */
}
div.section div.section h3:before{/* sub sectionの見出しの前に */
content:"| ";/* 文字を追加する */
font-weight:bold;color:red;/* 太字で赤 */
}
div.section div.section h3:after{/* sub sectionの見出しの後にに */
content:"■■";/* 文字を追加、画像の場合はurl()となる */
letter-spacing:-5px;/* 字間を縮めて */
color:aqua;/* 色を指定して */
z-index:-1;/* 後にまわす */
position:relative;/* 本来の位置より */
left:-2em; /* 左に2文字 */
font-size:1.1em;/* 少し大きめに */
}
と言う風に。
あなたのHTMLの文書構造が分からないので、実際のHTMLソースを見てセレクタ記述する。
文書構造をマークアップするHTMLとどのように表現するかのプレゼンテーションは、独立していますから、HTMLは率直なもので良いです。スタイルシートにすべて任せましょう。
参考) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
【全文です】
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
で検証済みのHTML4.01strict + CSS3
★タブは_に置換してあるので戻す。
<!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;}
body{background-color:gray;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;background-color:white;}
div.section div.section{min-width:0;width:95%;margin-right:0;}
/* ここから */
div.section div.section h3{
border:gray solid 1px;
border-radius:5px;
background: linear-gradient(white,silver);
padding:5px;
position:relative;
z-index:10;
}
div.section div.section h3:before{
content:"| ";
font-weight:bold;color:red;
}
div.section div.section h3:after{
content:"■■";
letter-spacing:-5px;
color:aqua;
z-index:-1;
position:relative;
left:-2em;
font-size:1.1em;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section">
___<h2>本文</h2>
___<div class="section">
____<h3>欠席された理由について</h3>
____<p>記事の段落</p>
___</div>
___<div class="section">
____<h3>サブ項目</h3>
____<p>記事の段落</p>
___</div>
___<div class="section">
____<h3>サブ項目</h3>
____<p>記事の段落</p>
___</div>
__</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で質問しましょう!
似たような質問が見つかりました
- Evernote Evernote(エバーノート)の文字化け 1 2022/04/05 19:30
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- その他(ブラウザ) Mycrosoft Edge の「コレクション」に、画像とテキストを追加したい 2 2022/05/28 11:10
- HTML・CSS HTML 要素について(初心者です) 2 2022/08/03 11:44
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- WordPress(ワードプレス) ホームページの画像が入れ替わらない 3 2022/12/24 16:00
- 物理学 量子力学のテキストのフーリエ変換の記述について 1 2022/10/16 17:00
- Access(アクセス) Access 複数条件検索の設定が上手く行きません 1 2022/07/22 20:37
- 画像編集・動画編集・音楽編集 編集ソフト ダビンチリゾルブに関して 動画編集してる際にエフェクトや、テキストの読み込みが遅くなって 2 2022/09/02 23:24
- 化学 高校化学、化学反応式、水酸化ナトリウム、二酸化炭素 2 2022/09/17 13:47
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
既存画像(gif または png)の背...
-
ホームページを作ろうかと
-
bluegriffonでホームページを作...
-
ホームページの画面文字を濃く...
-
ホームページビルダーの右サイ...
-
メールフォームで送信すると「...
-
HP更新がうまくいきません(FTP...
-
ホームページを作りたいのです...
-
FFFTPでサーバに新規フォルダが...
-
メールフォーム設置の文字化け...
-
ホームページビルダー
-
ホームページ作成
-
HTMLで、ホームページが作れる...
-
ページの内容コピペ 範囲が広い...
-
ホームページビルダー15で作っ...
-
ビフォアーアフターのページは...
-
今さらですがHPを作成するに当...
-
ホームページ制作で教えてくだ...
-
ホームページビルダーおすすめ?
-
GASについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページ・各ページの<h1>...
-
dreamweaver CS5でフォトアルバ...
-
小タイル「画像バックで、テキ...
-
ブログテンプレート作り CSSで...
-
.ホームページビルダーVer.12...
-
IE9環境とIE11環境でのHTMLコード
-
FC2ホームページで大見出しのフ...
-
jQuery Ajax通信をランダムで表示
-
書き出し
-
ホームページを作る時は、原稿...
-
ホームページのヘッダーについて
-
FC2で画像とHPが表示されない!
-
htmlでテーブル内にテキストボ...
-
CSSのtransform: translate(-50...
-
エクセルでサイズに合ったもの...
-
Excel で等間隔で縦線を引きた...
-
aタグに直接style=""で:hoverを...
-
エクセルでサイズ指定でPOP...
-
丸メガネが似合うようにするに...
-
table内で画像と文字をセンター...
おすすめ情報