No.2ベストアンサー
- 回答日時:
こちらは解説です。
とっても忙しい身の上なので、あまりお付き合いは出来ませんので、すべて書いておきます。足りないところは自分で調べてください。それが早道です。ただし、一番当てになるのは仕様書ですよ。★HTMLについては、難しくないと思います。見慣れているものと違うのは仕様書に準拠しているからです。(^^)
divは、文書構造を補完するためにのみ使っています。それが本来の決まりですから・・
⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
class名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )と意味をそのまま参考にしてあります。
headerは文書のヘッダ、sectionは見出しを持ちうる本文、footerは文書のフッタ、articleは自身にheader,section,footerを持ちうる完結した記事を表します。
★スタイルシート
デザインは一切考えずに作成したHTMLをその文書構造を利用してデザインしていきます。
長いですが
html,body{width:100%;margin:0;padding:0;background-color:gray;}
ブラウザは、html,bodyに多少の隙間を作るので消しています。そして背景色を灰色にしています。
body{background-image:url(./images/background/sky.jpg);}
bodyに背景を指定しています。場所とファイル名は上記の通り
div.header,div.section,div.footer{
width:80%;max-width:900px;
margin:0 auto;
}
header,section,footerのすべてをウィンドウ幅の80%にして、上下のマージンを0,左右のマージンを自動にしていますから、ウィンドウ幅に関わらず中央に表示されます。
div.section{position:relative;}/*位置の基準とするため */
本文の子供要素(具体的にはarticle)のabsoluteでの位置の基準にするため指定しています。幅の基準にもなります。
ブロック要素は直近のstatic以外の親要素のサイズを参照しますから・・
div.section div.article{
/* div.sectionの子孫であるすべてのdiv.article */
width:48%;/* 親のdiv.sectionの半分の幅 */
height:300px;
margin:0 1%;
border:ridge 3px gray;
overflow:auto;
background-color:yellow;
opacity:0.3;/* opacityなので背景も文字もすべて半透明 */
color:rgb(0,0,255);
}
width:二つarticleがあり横に並べたいので親ブロック(section)の48%幅にしています。
当然右のスペースがあきますね。そこに次のarticleをおく予定
height:300pxに固定
margin:もう少しあけたほうが良いかも、二つしか値がないので上下/左右になります。
border:枠線の指定
overflow:でフレームぽくなります。データ量が多いとスクロールバーが出ます。
background:で背景を黄色に
opacity:でこの要素(article)全体を半透明に 当然文字も半透明
color:色は黄色に映える青
div.section div.article + div.article{
/* 隣接セレクタ、兄にdiv.articleがあるdiv.article */
position:absolute;
right:1%;bottom:0;
opacity:1;/* 不透明に戻す */
background-color:rgba(255,255,0,0.5);/* 背景色を半透明 */
color:rgba(0,0,255,0.3);/* 文字だけ半透明 */
}
+は隣接セレクタ/兄弟セレクタと言って、何々に続くと言う意味
div.section 内の div.articleに続くdiv.article
position:絶対配置で位置を指定します。
opacity:で先に指定して透明化したものを元に戻します。
こちらのほうがセレクタの書き方が詳しいので優先されます。上書きする
background-color:背景に半透明を指定/
color:rgba(0,0,255,0.3);/* 文字色も半透明 */
div.section div.article:hover{
/* マウスホーバーのとき */
color:rgb(0,0,255)!important;
opacity:1!important;
background-color:rgba(255,255,0,1)!important;/* 背景色を不透明 */
color:rgb(0,0,255)!important;
}
ポインターが乗ったときの指定です。セレクタの詳細度が強くないので!importantで強制的に指定しています。
背景を半透明にして、文字は不透明でしたらopacityでは駄目なことは、すぐわかると思います。その場合は背景だけを透明にします。色ならrgba()ですし、画像なら半透明な画像にするほうが楽でしょう。
しっかり読めば、決して難しいものではありません。
若いのに、根を上げたらダメですよ。私は還暦をとうに過ぎている。
No.1
- 回答日時:
以前回答したときに、「ちょっと回答者さんのやり方は、難しいので、もっちょっと簡単なプログラムでお願いします。
」と言われてしまい。どうしようかなと思ったのですが・・実は、そんなに難しい話をしているわけじゃありません。ひょっとしてテキストエディタでHTMLやスタイルシートを書くことが出来ないのかな?ビルダーを使おうが、どんなオーサリングツールを使用しようが、テキストエディタで扱えないと上達は望めませんから、懲りずに頑張ってくださいね。
ビルダーなんか使って書くHTMLよりもはるかにシンプルで簡単なHTMlのはずです。誰が見ても、どこに何が書かれているかわかるはずです。ビルダーではこのようなHTMLは書けないですし、ましてやその構造にしたがってスタイルシートを書くなんて不可能です。
まず、どこがどこの指定であるかを理解することからはじめましょう。テストの回答だけを覚えても良い成績は取れません。自分に合わせて手を加えることが出来ません。
下記サンプルは全体です。文字コードはShift_JISです。
★HTMLは、Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
のDATAタブでチェック済みです。
★CSSは、W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
★タブは_に置換してあります。(タブはこの質問板では使えないので)
_タブか半角スペース4個程度に置換してください。
説明は後ほど・・・
<!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{width:100%;margin:0;padding:0;background-color:gray;}
body{background-image:url(./images/background/sky.jpg);}
div.header,div.section,div.footer{
width:80%;max-width:900px;
margin:0 auto;
}
div.section{position:relative;}/*位置の基準とするため */
div.section div.article{
/* div.sectionの子孫であるすべてのdiv.article */
width:48%;/* 親のdiv.sectionの半分の幅 */
height:300px;
margin:0 1%;
border:ridge 3px gray;
overflow:auto;
background-color:yellow;
opacity:0.3;/* opacityなので背景も文字もすべて半透明 */
color:rgb(0,0,255);
}
div.section div.article + div.article{
/* 隣接セレクタ、兄にdiv.articleがあるdiv.article */
position:absolute;
right:1%;bottom:0;
opacity:1;/* 不透明に戻す */
background-color:rgba(255,255,0,0.5);/* 背景色を半透明 */
color:rgba(0,0,255,0.3);/* 文字だけ半透明 */
}
div.section div.article:hover{
/* マウスホーバーのとき */
color:rgb(0,0,255);
opacity:1!important;
background-color:rgba(255,255,0,1)!important;/* 背景色を不透明 */
color:rgb(0,0,255)!important;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>文書のタイトル</h1>
__<p>要約など</p>
_</div>
_<div class="section">
__<h2>本文タイトル</h2>
__<p>本文記事の段落</p>
__<p>本文記事の段落</p>
__<div class="article">
___<div class="header">
____<h3>独立した記事(1)のタイトル</h3>
___</div>
___<div class="section">
____<p>記事内容</p>
____<p>記事</p>
____<p>長くなるとスクロールバーが出てくる。</p>
____<p>好きなだけ段落を増やしてみてください。</p>
___</div>
__</div>
__<div class="article">
___<div class="header">
____<h3>独立した記事(2)のタイトル</h3>
___</div>
___<div class="section">
____<p>記事内容</p>
____<p>記事</p>
___</div>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(悩み相談・人生相談) 書物に字を転写する方法 1 2023/06/07 19:49
- 高校 図書館や学習プラザでは消しゴム禁止にしませんか? 5 2023/05/08 18:36
- Photoshop(フォトショップ) PhotoshopElements12で透かし文字ウォーターマークを入れる方法を教えて下さい。 1 2022/09/07 18:20
- Excel(エクセル) エクセルの数式で教えてください。 3 2022/10/25 10:52
- 日本語 ぢ(ヂ)とじ(ジ)、づ(ヅ)とず(ズ)の表記の違いはどこにあるか分かる人いますか。 6 2022/12/27 11:54
- その他(エンターテインメント・スポーツ) 「森保監督 続投」、サッカーよりは「続投」という言葉がふさわしい競技は 3 2022/12/31 13:06
- その他(インターネット接続・インフラ) Webサイトのフォント・級数変更について 1 2022/10/18 18:08
- HTML・CSS 角丸画像の背景色を透明にしたいです 1 2023/06/23 23:15
- 食器・キッチン用品 スターバックスコーヒーで提供される容器 1 2022/10/31 07:57
- アクセサリ・腕時計 ピアスの付け替えについて 2 2022/04/26 23:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
HTMLのJIS規格について
-
html の divとtable の役割
-
3カラムレイアウトで「常に残り...
-
<div>で改行させない方法
-
<div id="container">の使いか...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
<!-- #BeginLibraryItemとは
-
CSSで、contentsがfooterに重な...
-
ヘッダーとフッターだけ背景を...
-
divを横に並べる方法
-
疑似インラインフレームの文字...
-
min-heightとheightの違いについて
-
コピーライト下・フッター一番...
-
div要素が重なってします
-
今までのレイアウト無視して設...
-
WEBデザイン ― ブラウザの横幅...
-
1時間30分を簡単に表したいで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
開閉式の隠し要素が一瞬表示さ...
-
html5でheaderの中にnav
おすすめ情報