重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

おしえて

CSSについて

締切済

  • 質問者：lasdfasdfas
  • 質問日時：
  • 回答数：9件

スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？
※はみ出した分は表示をしない。

<table>
<tr><td>あけましておめでとうございます。</td></tr>
</table>

実際の表示
あけまして
おめでとう

横幅が大きくなったら
あけましておめ
でとうございま

質問者からの補足コメント

  • 最初のテーブルは例として書いたものですが、
    実際は下記のような複雑なテーブル構造です。
    この場合もテーブルは使わない方が良いのでしょうか？

    <table class="Tbs"><tr><td><a href="http://~" target="_blank">
    <table class="Tbs2">
    <tr><th rowspan=4><img src="http://~.jpg"></th>
    <td><p class=t1>文書１</p></td></tr>
    　　　 <tr><td><p class=t2>文書2</p></td></tr>
    <tr><td><p class=t3>文書3</p></td></tr>
    <tr><td><p class=t4>文書4</p></td></tr>
    </table>
    </a></td></tr></table>

    No.2の回答に寄せられた補足コメントです。 補足日時：2016/03/31 13:56
    通報する

  • 上の補足。
    画像についての説明を画像の横に4行で表示。その説明は個別の文章です。
    そしてその内容全てをリンクとして設定している。

      補足日時：2016/03/31 14:00
    通報する

  • 回答ありがとうございます。
    ちょっと試してみましたが、
    <dl>
    　<dt><a href=""><img src="" width="" height="" alt=""></a></dt>
    　<dd>画像の説明がここに入る</dd>
    　<dd>画像の説明がここに入る</dd>
    　<dd>画像の説明がここに入る</dd>
    　<dd>画像の説明がここに入る</dd>
    </dl>

    この場合、画像の右横に4つ分<dd>の説明を付けるには、どのように記述したら良いのでしょうか？
    画像と説明が大きな1行として、それをタップすると<a href>のリンクへ飛ぶような形。

    No.3の回答に寄せられた補足コメントです。 補足日時：2016/03/31 17:22
    通報する

  • すみません。
    サンプルhtmlでリンクにマウスを当てると色を変化させるにはどうすれば良いんでしょうか？

    a:link { text-decoration: none; }
    a:visited { text-decoration: none; }
    a:hover { text-decoration: none; background-color: #F5F5F5; }
    これだとアンダーラインは消えるのですがマウスを当てても色が変化しませんでした。

    No.4の回答に寄せられた補足コメントです。 補足日時：2016/03/31 20:37
    通報する

  • マウスオン時の動作
    <!--
    section#Albam dl dd a:link {
    text-decoration: none;
    }
    section#Albam dl dd a:visited {
    text-decoration: none;
    }
    section#Albam dl dd a:hover {
    text-decoration: none; background-color: #F5F5F5;
    }
    -->

    <section id="Albam">
    <dl>
    <dt><a href=""><img src="" width="" height="" alt=""></a></dt>
    <dd>
    <a href="">
    <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ol>
    </a>
    </dd>
    </dl>
    </section>

    No.5の回答に寄せられた補足コメントです。 補足日時：2016/04/01 21:23
    通報する

  • マウスオン時の動作
    これだと画像の行にマウスを当てた時にアンダーラインは消えますが、画像行の色が変わりませんでした。
    記述が間違っているのでしょうか？

      補足日時：2016/04/01 21:24
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (9件)

No.9

  • 回答者： ORUKA1951
  • 回答日時：

@media (max-width: 640px) {


header,section,footer{
＿width:auto;
＿min-width:200px;
}
}

}が一つ抜けていた。firefoxはともかくIEは厳しかった。
    • good
    • 0
    • 件
通報する

No.8

  • 回答者： ORUKA1951
  • 回答日時：

自身の後学のため遊んでみた。


回答することは自身にもとっても学ぶところがとても多い。

★HTMLに文書構造しか書かないと、HTMLもCSSもとても分かりやすくなる。ことを実感しました。

<style media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;line-height:1.6em;}
header,section,footer{
＿width:80%;max-width:900px;min-width:500px;
＿margin:0 auto;
}
section.Album dl{
＿width:100%;
＿position:relative;
}
section.Album dl dd ol{
＿list-style-type:none;
＿margin-left:30%;
}
section.Album dl dt,
footer{
＿clear:both;
}
section.Album dl dt{
＿border-top:red 1px solid;
}
section.Album dl dt a{
＿display:block;
＿float:left;
＿width:40%;
＿position:relative;
＿text-align:center;
＿margin-right:1em;
}
section.Album dl dt img{
＿width:100%;
＿height:auto;
＿margin:0 auto;
}

section.Album dl dd{
＿margin-left: 0.1em 0 0.1em 32%;
＿text-indent:1em;
}
section.Album dl dd a{
＿text-decoration:none;
＿color:inherit;
}
section.Album dl dd a:hover li{
＿background-color:rgba(0,0,255,0.1);
}
@media (max-width: 800px) {
header,section,footer{
＿width:100%;
}
@media (max-width: 640px) {
header,section,footer{
＿width:auto;
＿min-width:200px;
}
section.Album dl dt{height:0;margin-top:1em;}
section.Album dl dt a{
＿display:inline;
＿float:none;
＿width:30%;
}
section.Album dl dt img{
＿float:left;
＿width:auto;
＿height:10em;
＿margin-right:1em;
}
section.Album dl dd ol li{
＿line-height:1.2em;
＿max-height:2.4em;
＿overflow:hidden;
＿position:relative;
}
section.Album dl dd ol li:after{
＿content:"・・・続く・・";
＿position:absolute;
＿background-color:white;
＿top:1.2em;right:0;
}
section.Album dl dd ol li:before{
＿content:"600px以下↑\A 2行↓";
＿white-space:pre;
＿position:absolute;
＿background-color:yellow;
＿top:0.2em;left:0;
＿text-indent:0;
＿text-align:right;
}
section.Album dl dd ol li+li:before{
＿content:"↑\A↓";
}
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： ORUKA1951
  • 回答日時：

＞マウスオン時の動作


＞これだと画像の行にマウスを当てた時にアンダーラインは消えますが、画像行の色が変わりませんでした。
＞記述が間違っているのでしょうか？
　ブロック要素をリンクで囲むのは、しっくりこないので私は好きではないのですが・・
　
※仕様書を必ず見ましょう。そのためにある。
http://momdo.s35.xrea.com/web-html-test/spec/CSS …
　'background-color'
　　値:　　　　<color> | transparent | inherit
　　初期値:　　transparent　★初期値は透明で
　　適用対象:　すべての要素
　　継承:　　　no 　　　←★継承しないと書いてある。
　　パーセンテージ:利用不可
　　メディア:　visual
算出値: ＿指定値 継承されるとまずいでしょ!! a要素の子供のliには継承されない!!!

★ネットでつまみ食いするよりはHTMLもCSSも仕様書で身につけましょう。無駄なことないし、正確だし、必要なことはすべて書いてある。
特に
HTML 4.01 仕様書(邦訳) http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
CSS 2.1 日本語訳( http://momdo.s35.xrea.com/web-html-test/spec/CSS …

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;line-height:1.6em;}
header,section,footer{
＿width:80%;max-width:900px;min-width:500px;
＿margin:0 auto;
}
section.Album dl{
＿width:100%;
＿position:relative;
}
section.Album dl dd ol{
＿list-style-type:none;
＿margin-left:30%;
}
section.Album dl dt,
footer{
＿clear:both;
}
section.Album dl dt{
＿border-top:red 1px solid;
}
section.Album dl dt a{
＿display:block;
＿float:left;
＿width:40%;
＿position:relative;
＿text-align:center;
＿margin-right:1em;
}
section.Album dl dt img{
＿width:100%;
＿height:auto;
＿margin:0 auto;
}

section.Album dl dd{
＿margin-left: 0.1em 0 0.1em 32%;
＿text-indent:1em;
}
section.Album dl dd a{
＿text-decoration:none;
＿color:inherit;
}
section.Album dl dd a:hover li{
＿background-color:rgba(0,0,255,0.1);
}
section.Album dl dd a{
}
@media (max-width: 800px) {
header,section,footer{
＿width:100%;
}
@media (max-width: 600px) {
header,section,footer{
＿width:auto;
＿min-width:200px;
}
section.Album dl dt{height:0;margin-top:1em;}
section.Album dl dt a{
＿display:inline;
＿float:none;
＿width:30%;
}
section.Album dl dt img{
＿float:left;
＿width:auto;
＿height:10em;
＿margin-right:1em;
}
section.Album dl dd ol li{
＿line-height:1.2em;
＿max-height:2.4em;
＿overflow:hidden;
＿position:relative;
}
section.Album dl dd ol li:after{
＿content:"　・・続く・・";
＿position:absolute;
＿background-color:yellow;/* whiteでよい */
＿top:1.2em;right:0;
}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#A1">A1</a></li>
＿＿＿＿<li><a href="#A2">A2</a></li>
＿＿＿＿<li><a href="#A3">A3</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section class="Album">
＿＿<h2>A smaller heading</h2>
＿＿<dl>
＿＿＿<dt><a href="/"><img src="./images/1.jpg" width="400" height="300" alt=""></a></dt>
＿＿＿<dd>
<a href="/A">
＿＿＿＿<ol>
＿＿＿＿＿<li>ウィンドウ幅によって段階的にデザインが変わっていきます。</li>
＿＿＿＿＿<li>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</li>
＿＿＿＿＿<li>最初のテーブルは例として書いたものですが、実際は下記のような複雑なテーブル構造です。</li>
＿＿＿＿＿<li>この場合もテーブルは使わない方が良いのでしょうか？</li>
＿＿＿＿</ol>
</a>
＿＿＿</dd>
＿＿＿<dt><a href="/"><img src="./images/2.jpg" width="400" height="300" alt=""></a></dt>
＿＿＿<dd>
<a href="/B">
＿＿＿＿<ol>
＿＿＿＿＿<li>これだと画像の行にマウスを当てた時にアンダーラインは消えますが、画像行の色が変わりませんでした。
記述が間違っているのでしょうか？</li>
＿＿＿＿＿<li>画像についての説明を画像の横に4行で表示。その説明は個別の文章です。そしてその内容全てをリンクとして設定している。</li>
＿＿＿＿＿<li>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</li>
＿＿＿＿＿<li>最初のテーブルは例として書いたものですが、実際は下記のような複雑なテーブル構造です。</li>
＿＿＿＿</ol>
</a>
＿＿＿</dd>
＿＿＿<dt><a href="/"><img src="./images/7.jpg" width="300" height="400" alt=""></a></dt>
＿＿＿<dd>
<a href="/C">
＿＿＿＿<ol>
＿＿＿＿＿<li>画像についての説明を画像の横に4行で表示。その説明は個別の文章です。そしてその内容全てをリンクとして設定している。</li>
＿＿＿＿＿<li>この場合もテーブルは使わない方が良いのでしょうか？</li>
＿＿＿＿＿<li>最初のテーブルは例として書いたものですが、実際は下記のような複雑なテーブル構造です。</li>
＿＿＿＿＿<li>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</li>
＿＿＿＿</ol>
</a>
＿＿＿</dd>
＿＿</dl>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： ORUKA1951
  • 回答日時：

ちなみに、画像とその説明からなる画像を目的とするのでしたら、figureを使う方が良いです。


<a href="">
　<figure>
　　<img src="" width="" height="" alt="">
　　<figcaption>
　　　<ol>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　</ol>
　　</figcaption>
　</figure>
</a>
とね。
4.4 Grouping content — HTML5( https://www.w3.org/TR/2014/REC-html5-20141028/gr … )
　figureには明確な意味があるので、それに当てはまる時のみ使用しましょう。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： ORUKA1951
  • 回答日時：

＞この場合、画像の右横に4つ分<dd>の説明を付けるには、どのように記述したら良いのでしょうか？


　試してない？？
　表示してウィンドウ幅を小さくしていくとそうなるはずですが・・
　４つを超える場合は、dd+dd+dd+dd+dd{display:none;}

＞サンプルhtmlでリンクにマウスを当てると色を変化させるにはどうすれば良いんでしょうか？
　他でより詳細度が高い設定がされている場合( a:hoverは詳細度 0 0 1 1 )はそちらが優先されます。
　section#Albam dl dd a:hover だと詳細度は 0 1 1 4 ですから他に影響を与えることなく変化させられるはずです。
※なお、先に説明した通り、このHTMLでは定義リスト中の<dt></dt><dd></dd><dd></dd><dd></dd><dd></dd>をa要素でくくることはできません。・・文書構造上あり得ないのです。
　その場合は
<dl>
　<dt><a href=""><img src="" width="" height="" alt=""></a></dt>
　<dd>
　　<a href="">
　　　<ol>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　</ol>
　　</a>
　</dd>
とマークアップする方が良いでしょう。

　画像がコンテンツの主たる要素でない場合は、HTMLに画像は書かず
<ul>
　<li>
　　<a href="./abc">
　　　<ul>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　</ul>
　　</a>
　</li>
として、
ul li{psition:relative;}
ul li a[href="./abc"]:before{
　　content:url();
}
のほうが良いかも・・

考え方：
　デザインは考えずに率直にHTMLを記述すること。今回のサンプルは
<dl>
　<dt><a href=""><img src="" width="" height="" alt=""></a></dt>
　<dd>画像の説明がここに入る</dd>
　<dd>画像の説明がここに入る</dd>
　<dd>画像の説明がここに入る</dd>
　<dd>画像の説明がここに入る</dd>
</dl>　https://oshiete.goo.ne.jp/qa/9227919.html#ad3
に従ったものですのでね。

リストの項目であるdd要素,li要素にはa要素を含むことができ、a要素にはブロック要素を含みえます(HTML5では)から、
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： ORUKA1951
  • 回答日時：

そうなると意外と簡単ですが、<a href=""></a>はdl要素の子供にはなれない


<dl>
　　<a href="">
　　　<dt></dt>
　　　<dd></dd>
　　</a>
　は、できません。どうしてもなら一つずつ区切って
<a href="">
　<dl>
　　<dt></dt>
　　<dd></dd>
　　<dd></dd>
　</dl>
</a>
<a href="">
　<dl>
　　<dt></dt>
　　<dd></dd>
　　<dd></dd>
　</dl>
</a>
とせざるを得ません。
★下記のHTMLでも、a{display:block;z-inedex・・}などでできなくはないですが、率直に<dd><a href=""></a></dd>としたほうが良いでしょう。

サンプル
★ウィンドウ幅840pxあたりでスタイルが切り替わる。
　ウィンドウ幅を変えて試す。
★印刷用(media:print)、携帯(media:handheld)用のスタイルは指定しててない。
※概略はわかると思うので、あとはご自由に。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
＿<link rel="stylesheet" href="css/style.css">
<style media="screen">
<!--
header,section,footer{
＿width:90%;
＿min-width:640px;
＿max-width:900px;
＿margin:0 auto;
}
section{position:relative;}
section#Albam dl{margin-right:210px;}
section#Albam dl dt{clear:both;border-top:red 1px solid;}
section#Albam dl dt img{
＿float:left;
＿width:auto;
＿height:14em;
＿margin:1em;
}
section#Albam dl dd{
＿text-indent:1em;
＿line-height:1.6em;
＿margin:0 0 0 210px;;
}
section#Albam aside{
＿position:absolute;
＿top:0;
＿right:0;
＿width:200px;
＿height:100%;
＿background-color:yellow;
}
@media (max-width:840px){
＿header,section,footer{
＿＿width:auto;
＿＿min-width:200px;
＿}
＿section#Albam dl{
＿＿margin-right:0;
＿}
＿section#Albam dl dd{
＿＿max-height:3.2em;
＿＿overflow:hidden;
＿＿position:relative;
＿}
＿section#Albam dl dt img{
＿＿float:left;
＿＿width:auto;
＿＿height:10em;
＿＿margin:1em;
＿}
＿section#Albam dl dd:after{
＿＿content:"・・続く・・";
＿＿position:absolute;
＿＿bottom:0;
＿＿right:0;
＿＿background-color:white;
＿}
＿section#Albam aside{
＿＿display:none;
＿}
}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="Top">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#Top">Top</a></li>
＿＿＿＿<li><a href="#Albam">記事</a></li>
＿＿＿＿<li><a href="#DOCUMENT_INFORMATION">文書情報</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section id="Albam">
＿＿<h2>A smaller heading</h2>
＿＿<dl>
＿＿＿<dt><a href="./"><img src="./images/1.jpg" width="640" height="480" alt=""></a></dt>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dt><a href="./"><img src="./images/2.jpg" width="640" height="480" alt=""></a></dt>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dt><a href="./"><img src="./images/3.jpg" width="640" height="480" alt=""></a></dt>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd>
＿＿＿<dd>スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？</dd></a>
＿＿</dl>
＿＿<aside>
＿＿＿<h3>補足記事</h3>
＿＿＿<p>
＿＿＿＿本文と関係ない記事は狭いディスプレイには、重要ではないので表示しない。
＿＿＿</p>
＿＿</aside>
＿</section>
＿<footer id="DOCUMENT_INFORMATION">
＿＿<dl class="document-version">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2005-06-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>&copy; oruka All Rights Reserved <a href="mailto:" title="send a mail" accesskey="M" rev="made">mailto:</a></address>

＿</footer>
</body>
</html>
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
こちらを参考に指せて頂き、作成していきたいと思います。
感謝ｍ

通報する
お礼日時：2016/03/31 20:20

No.3

  • 回答者： ORUKA1951
  • 回答日時：

はい、tableでデザインすべきではないですね。

HTMLでは、率直に文書の構造をマークアップします。デザインのことは一切考えないと思ってよい。
＞画像についての説明を画像の横に4行で表示。その説明は個別の文章です。そしてその内容全てをリンクとして設定している。
　これがまず考えるべきこと
「画像と、その説明リスト」ですから、
<dl>
　<dt><a href=""><img src="" width="" height="" alt=""></a></td>
　<dd>画像の説明がここに入る</dd>
　<dd>画像の説明がここに入る</dd>
　<dd>画像の説明がここに入る</dd>
　<dd>画像の説明がここに入る</dd>
　<dt><a href=""><img src="" width="" height="" alt=""></a></td>
　<dd>画像の説明がここに入る</dd>
　<dd>画像の説明がここに入る</dd>
　<dd>画像の説明がここに入る</dd>
　<dd>画像の説明がここに入る</dd>
</dl>
あるいは、
<dl><!-- 定義リストをつかう -->
　<dt><a href=""><img src="" width="" height="" alt=""></a></td>
　<dd>
　　<ul>
<!-- 順不同リストを使う。撮影条件とか順序や項目が決まっている場合は序列リストかな -->
　　　<li>画像の説明がここに入る</li>
　　　<li>画像の説明がここに入る</li>
　　　<li>画像の説明がここに入る</li>
　　　<li>画像の説明がここに入る</li>
　　</ul>
　</dd>画像の説明がここに入る</dd>
　<dt><a href=""><img src="" width="" height="" alt=""></a></td>
　<dd>
　　<ul>
　　　<li>画像の説明がここに入る</li>
　　　<li>画像の説明がここに入る</li>
　　　<li>画像の説明がここに入る</li>
　　　<li>画像の説明がここに入る</li>
　　</ul>
　</dd>
</dl>
あるいは、
<ul>
　<li><img src="" width="" height="" alt="">
　　<ul>
　　　<li>画像の説明</li>
　　　<li>画像の説明</li>
　　　<li>画像の説明</li>
　　</ul>
　</li>
のほうが良いかもしれません。それは実際のその文書の内容で判断します。

　そのうえで、スタイルシートでデザインすればよいのですよ。絶対にこの方がメンテナンスしやすいのはわかるでしょう。また、ユーザー--視覚障害者でスクリーンリーダー使う人やスタイルを外して使う人。さらに検索エンジンにとってもアクセス性が良くなります。
　もちろん著者も、ガラッとデザインを変えることができる。なぜってtableで固定されていないから・・

※例えば
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　のページをfirefoxかIEで訪問して、HTMLソースを見られるとわかるように、文書構造しかありません。そのために、ブラウザのメニュー→[表示]→[スタイル―ト]で、スタイルの指定を変更したり印刷プレビューで印刷の状態を確認してごらんなさい。
　HTMLに文書構造しか書かれていないと、このように高度なデザインも、その変更も簡単なのです。

再度、内容に合わせてどのようにマークアップすべきか再検討したうえで、あらためてもう少し具体的なHTMLを示していただくと良いでしょう。
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

これは、HTML4.01(1999年)の時代から強く言われてきたことで


tableは文書の成型に用いてはならない!!!★これは絶対してはならないと思うこと
・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
＞2行のみ表示にしたい
＞はみ出した分は表示をしない。
その段落について記述する。

★サンプル
　640pxより幅が狭くなると表示が変わる。
※タブは＿に置換してあるで戻す。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">
<!--
p{text-indent:1em;line-height:1.6em;margin:0;padding:0.5em;}
@media (max-width:640px){
＿section p{
＿＿height:3em;
＿＿overflow:hidden;
＿＿position:relative;
＿＿background-color:silver
＿}
＿section p:after{
＿＿content:"・・・続く";
＿＿position:absolute;
＿＿bottom:0.2em;right:0.5em;
＿＿background-color:white;
＿}
}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿</header>
＿<section id="abc">
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿＿スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？
＿＿</p>
＿＿<p>
＿＿＿スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？スマホ対応で横幅は可変で縦を2行表示にしたい場合どのようにCSSへ記述すれば良いでしょうか？
＿＿</p>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： naokita
  • 回答日時：

<p style="margin:0; padding:2px; height:2.6em; line-height:1.4; overflow:hidden;">


あけましておめでとうございます。
</p>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2016/03/31 10:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報