A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
間違えて説明文まで置換しててしまったので・・
画像要素は置換インライン要素ですから本来は指定サイズ、もしくは置換される画像のサイズになります。
⇒10.3.2 置換インライン要素の場合( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
★方法のポイント
一方ブロック要素は直近の先祖コンテナブロックのサイズを参照できます。
⇒10.3.3 通常フローでの非置換ブロック要素の場合( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
下記サンプルではaside要素がrelativeである親コンテナブロックのサイズ(heightの値)を参照してます。
同様にimg要素は親のrelativeなfigure要素の横サイズ参照しています。高さはautoで再指定して、img要素のheight属性(詳細度0)を打ち消しています。
★なお、HTML5では、DIV要素は原則として使いません。
【引用】____________ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html … )]より
たぶんfigure要素内のimg要素だとして・・下記のようになります。
★HTMLはHTML5で、スタイルシートはCSS2.1の範囲内で行っています。
後方互換のためjavascript使ってます。
個人的にはHTML5はいまだに変更がされているので時期尚早で使っていません。HTML4.01にする場合はHTML5の新しい要素をclass名にしたDIVに変更すること。(例:header></header>→<div class="header"></div>
後方互換のため子供セレクタや隣接セレクタも使っていません。
IE7以降対応、IE7も利用には問題ないはずです。
★スマホ(480px幅)~1200pxまでリキッド
★タブは_に置換してあるので戻す。
★http:はhttp:に置換してあるので戻す。
★印刷用スタイルシートは画像を小さめにしてあるのできれいに印刷できるはずです。
No.3
- 回答日時:
CSS3を持ち出さなくてもCSS2.1の範囲内です。
画像要素は置換インライン要素ですから本来は指定サイズ、もしくは置換される画像のサイズになります。
⇒10.3.2 置換インライン要素の場合( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#inline-replaced-width )
★方法のポイント
一方ブロック要素は直近の先祖コンテナブロックのサイズを参照できます。
⇒10.3.3 通常フローでの非置換ブロック要素の場合( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#blockwidth )
下記サンプルではaside要素がrelativeである親コンテナブロックのサイズを参照してます。
同様にimg要素は親のrelativeなfigure要素の横サイズ参照しています。高さはautoで再指定してheight属性(詳細度0)を打ち消しています。
★なお、HTML5では、DIV要素は原則として使いません。
【引用】____________ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )]より
たぶんfigure要素内のimg要素だとして・・下記のようになります。
★HTMLはHTML5で、スタイルシートはCSS2.1の範囲内で行っています。
後方互換のためjavascript使ってます。
個人的にはHTML5はいまだに変更がされているので時期尚早で使っていません。HTML4.01にする場合は区か盛り5の新しい要素をclass名にしたDIVに変更すること。(例:header></header>→<div class="header"></div>
後方互換のため子供セレクタや隣接セレクタも使っていません。
IE7以降対応、IE7も利用には問題ないはずです。
★スマホ(480px幅)~1200pxまでリキッド
★タブは_に置換してあるので戻す。
★http:はhttp:に置換してあるので戻す。
★印刷用スタイルシートは画像を小さめにしてあるのできれいに印刷できるはずです。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
_<!--[if IE]>
__<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
__<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
_<![endif]-->_<link rel="stylesheet" href="css/style.css">
<style>
<!--
p{margin:0;line-height:1.8em;text-indent:1em;}
-->
</style>
<style media="screen">
<!--
html,body{margin:0;padding:0;background-color:gray;}
header,section,footer{width:80%;margin:0 auto;padding:5px;min-width:470px;max-width:1200px;background-color:white;}
section{position:relative;}
section figure{position:relative;/* staticじゃない */background-color:silver;padding:10px;margin:0 150px 0 auto;}
section figure img{display:block;border:white 10px solid;width:90%;height:auto;margin:0 auto;}
section figure figcaption{background-color:white;margin-top:0.5em;}
section h2,section p,section figure{margin-right:150px;}
section * p{margin:0;}
section aside{position:absolute;top:0;right:0;width:140px;height:100%;background-color:aqua;}
-->
</style>
<style media="print">
<!--
figure{width:70%;margin:1em auto;border:solid 1px gray;position:relative;padding:5mm}
figure img{width:90%;height:auto;margin:auto;}
aside{display:none;}
footer{page-break-before:always;}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="#">Some</a></li>
____<li><a href="#">navigation</a></li>
____<li><a href="#">links</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>画像の配置の説明</h2>
__<p>
___画像は置換インライン要素なので本来はコンテナブロックのサイズに従いませんが、display:プロパティでブロック要素に変更することで、staticでない直近のコンテナブロックに合わせることができます。
__</p>
__<figure>
___<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/66/20100724_Iwakuni_5235.jpg/1024px-20100724_Iwakuni_5235.jpg" width="640" height="425" alt="錦帯橋の写真">
___<figcaption>
____<p>
_____錦帯橋(きんたいきょう)は、山口県岩国市の錦川に架橋された木造のアーチ橋である。
____</p>
___</figcaption>
__</figure>
__<aside>
___<h3>Something aside</h3>
__</aside>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
No.2
- 回答日時:
パララックス効果をだしたいということかな?
参照URLを見ると、理解できるのでは?・・・
わからなければ、質問ください!
参考URL:http://www.yuguri.com/2013/07/04parallaz-scrolli …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS 角丸画像の背景色を透明にしたいです 1 2023/06/23 23:15
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
NからZへの全単射を具体的に構...
-
「諸要素」とはどういう意味で...
-
改行ほどは行かないけど、若干...
-
テキストボックスの中にリンク...
-
tdに対してmin-heightの定義、...
-
input type="file"の幅と高さ
-
親要素・子要素
-
CSSのa:hoverが急に一部だけ効...
-
divとspanの使い分け
-
textareaの幅を画面と合わせたい
-
<div>の中の<div>の意味
-
角丸画像の背景色を透明にした...
-
【ヒトの神秘】美男美女から何...
-
cssで#main dl > ddの「>」はど...
-
xhtml1.1で・・・name属性が
-
html5で右揃え、方法は?
-
frame要素はHTML5から廃止され...
-
初歩的な質問です。<div>のwidt...
-
z-indexが0の要素よりも負の値...
-
リンクタグのテキストを太字に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
「諸要素」とはどういう意味で...
-
2個のFormを横並びにしたい
-
input type="hidden"で取得した...
-
textareaの幅を画面と合わせたい
-
CSS:overflow要素の印刷について
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報