Q&A
回答ありがとうございます
なるほど、そう言うアプローチがありますね！勉強になります
ですが背景付のデザインなので背景白色と言うのが難しいんです(T_T)
色々調べたのですがいまいち解決できず質問させて頂きます。
]
上記のように良くあるレシピ説明の材料の名前と数量の間に「・・・・・」があると思いますが
CSSやHTMLでは実現はできないでしょうか？
調べるにしても「・・・・」の部分の名前が解らず調べてもヒットしなくて困っています。
色々レシピサイトなどを見て「・・・・」が無いか調べてみたのですが
私の見た限り見つけれませんでした。
「・・・・」を使っているサイトか参考になるサイト
「・・・・」の名前？などおわかりなる方がいらっしゃいましたら
お手すきの際に教えていただけますでしょうか？
よろしくお願いいたします。
回答3件
0
ベストアンサー
的外れかもしれませんが、以下のように行ってみてはいかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .container { 13 padding: 50px; 14 } 15 16 .ingredients { 17 display: flex; 18 align-items: center; 19 } 20 21 .ingredients::after { 22 content: ''; 23 border-top: 5px dotted; 24 flex: 1 1 auto; 25 order: 1; 26 } 27 28 .ingredientAmount { 29 order: 2; 30 } 31 </style> 32</head> 33<body> 34<div class="container"> 35 <h1>材料(4人分/1人当たり103cal)</h1> 36 <ul class="materialBox"> 37 <li class="ingredients"> 38 <span class="ingredientName">ベーコン</span> 39 <span class="ingredientAmount">1枚(20g)</span> 40 </li> 41 <li class="ingredients"> 42 <span class="ingredientName">じゃがいも</span> 43 <span class="ingredientAmount">3個(330g)</span> 44 </li> 45 </ul> 46</div> 47</body> 48</html>
投稿2017/10/10 16:07
編集2017/12/17 04:02
総合スコア14731
0
「・・・・」はリーダーの一種かとおもいます。
【リーダー (記号) - Wikipedia】
https://ja.wikipedia.org/wikii/リーダー_(記号)
CSSで、となると点々を行の背景に置き、「ベーコン」など項目の背景色を白にすれば似た状況にはなると思います。
投稿2017/10/09 09:58
総合スコア69407
後から条件を増やされても･･･。他にも条件があるなら、質問文を具体的な記述で書き直すことをお勧めします。
質問文に寄せられたSSを見る限りでは右側に計量スプーンが映っているだけなので、各ラインを別の背景画像で上書きするのは不可能ではないように見えますね。
最も、本来、背景画像にあるべきものではないので、他で背景画像が必要になれば競合してしまうという意味では緊急避難的な対策だと思います。
> 本来、背景画像にあるべきものではないので
（「緊急避難的」は否定しませんが）さすがにこの部分は言いすぎかと思います。デザイン次第な部分だと私は思います。
後だしで申し訳ないです。
To: kei344 さん
> さすがにこの部分は言いすぎかと思います。デザイン次第な部分だと私は思います。
CSSでは「前景」と「背景」を区別しており、「意味論的に重要な前景画像は、文書マークアップを通して提供されるべきである」という記述があります。
https://triple-underscore.github.io/css-backgrounds-ja.html#the-background-image
http://waic.jp/docs/WCAG-TECHS/F3.html
「・・・・」はコンテンツというのは言い過ぎかもしれませんが、「項目」と「説明内容」を結ぶ関係性を表しており、ul要素のリストマーカーのような構造を表す役割を担っています。
「・・・・」がなくなったら対応関係が位置関係から推察するしかなくなり、ユーザビリティが低下してしまいます。
(基本的に、背景画像がなくても論理構造が明確で、コンテンツも成立しなければならないと私は思います。
img要素には画像off環境の為にalt属性が用意されていますが、background-imageには何もないので、画像をoffにしたら全て消えます。
その状況が期待通りでないのであれば、<img src="leader.jpg" alt="…"> とマークアップするのが正解だと私は思います。)
また、背景とは前面にコンテンツがある事を意図したものです。
仮に背景画像を使用したとして、前面に何らかのコンテンツが設置された時に、それは意図したデザインとなるでしょうか。
私には「・・・・」は「前面にあるべきもの」のように思えます。
To: think49さん
マークアップの話が出てきましたが、先のコメントからは私は読み取れませんでした。また、マークアップの話なら画像として入れるよりも dl 要素で意味づけるほうが対応関係は担保できるとおもいます。
> ul要素のリストマーカーのような構造を表す役割を担っています。
構造をあらわしているのはul要素自身であってリストマーカー表現では無いと思います。ユーザビリティについても、CSSが効いていない状況を想定するのであればマークアップ側、つまり dl 要素で意味づけるほうが対応関係は担保できるとおもいます。
> また、背景とは前面にコンテンツがある事を意図したものです。
> 仮に背景画像を使用したとして、前面に何らかのコンテンツが設置された時に、それは意図したデザインとなるでしょうか。
「前面に何らかのコンテンツが設置された時に」もデザインを考える上で当然考慮しますが、それは何が来ても問題ないように対処することでは無いので、私は「前面にあるべきもの」という結論には至りませんでした。
「デザイン」「ユーザビリティ」などについては定義があいまいというか共通のものをイメージできない可能性が高いので、すみませんが返答はしないと思います。
To: kei344 さん
> また、マークアップの話なら画像として入れるよりも dl 要素で意味づけるほうが対応関係は担保できるとおもいます。
そうですね。これは私の説明不足でした。申し訳ありません。
マークアップとしては、dl要素もしくはtable要素が適切だと思います。
> 構造をあらわしているのはul要素自身であってリストマーカー表現では無いと思います。
これも説明不足でしたが、基本的に人間は装飾なしにHTMLの構造は読み取れないものだと理解しています。
制作者スタイルシート、デフォルトスタイルシートが何もない環境でHTML文書を描画した場合、何が何やら分からないでしょう。
ですので、構造を分かりやすくする為に、レイアウトや装飾に構造的な意味を持たせます。
リストマーカーは人間がリストと判断できるための重要な指標となっており、それは背景と切り分けて考えるべき、というのが私の考えです。
例えば、Lynxのように制作者スタイルシートを無効化した環境では、リストマーカーはそれがリストと判断する為の重要な指標となっています。
しかしながら、仰る通り、dl要素でマークアップするのであればこの問題は回避できます。
> 「前面に何らかのコンテンツが設置された時に」もデザインを考える上で当然考慮しますが、それは何が来ても問題ないように対処することでは無いので、私は「前面にあるべきもの」という結論には至りませんでした。
「前面にあるべきもの」は「意味論的に重要な前景画像とは何か」の判断指標として私が使用している考え方になりますが、わかりにくかったですね。すみません。。
この規約はCSSによる装飾にも意味論があることを示しているように、私には読めました。
背景は意味論的に重要ではありませんが、「意味論的に重要ではない」とはどういう意味なのか、という疑問に至ります。
CSS仕様には「作者は、背景画像を設定するときは，画像が可用でない状況下でもテキスト色とのコントラストは維持されるように， background-color も指定するべきである。」とありますが、私これは「背景画像は省略された場合にbackground-color で代替されるべきである」と私は解釈しました。
> 「デザイン」「ユーザビリティ」などについては定義があいまいというか共通のものをイメージできない可能性が高いので、すみませんが返答はしないと思います。
CSS仕様、WCAG等の共通認識を持つための指標はありますので、それをどう解釈するか、という問題だと思います。
「意味論的に重要な前景画像は、文書マークアップを通して提供されるべきである」に対する kei344 さんの考えが読み取れなかったので、差し支えなければ返答頂けると有り難いです。
私の説明不足から大々的に持論を展開することになってしまったので、問題があれば新たに質問をたてて広く意見を募ることを考えます。
追記しました。
重複な一文が抜け落ちていたので、編集しました。
> これは「背景画像は省略された場合にbackground-color で代替されるべきである」と私は解釈しました
0
チャレンジしてみました。
https://jsfiddle.net/pLceLxfg/
HTML
1<div class="wrapper"> 2 <div class="row"> 3 <div class="col1">ベーコン</div> 4 <div class="col2"> 5 <div class="reader">・</div> 6 <div class="reader">・</div> 7 <div class="reader">・</div> 8 <div class="reader">・</div> 9 <div class="reader">・</div> 10 <div class="reader">・</div> 11 <div class="reader">・</div> 12 <div class="reader">・</div> 13 <div class="reader">・</div> 14 <div class="reader">・</div> 15 </div> 16 <div class="col3">1枚（20g）</div> 17 </div> 18 <div class="row"> 19 <div class="col1">じゃがいも</div> 20 <div class="col2"> 21 <div class="reader">・</div> 22 <div class="reader">・</div> 23 <div class="reader">・</div> 24 <div class="reader">・</div> 25 <div class="reader">・</div> 26 <div class="reader">・</div> 27 <div class="reader">・</div> 28 <div class="reader">・</div> 29 <div class="reader">・</div> 30 <div class="reader">・</div> 31 </div> 32 <div class="col3">3個（330g）</div> 33 </div> 34</div>
CSS
1.wrapper{ 2 width:300px; 3} 4.row{ 5 width:100%; 6 display:flex; 7} 8.col1,.col3{ 9 flex-shrink:0; 10} 11.col2{ 12 display:flex; 13 flex-flow:wrap; 14 justify-content: center; 15 overflow:hidden; 16 height:1em; 17}
ていうか、readerじゃなくてleaderですね！ あー恥ずかしい。
投稿2017/10/10 13:08
総合スコア36117
「CSS-offにしたらリーダが10個になりました」と指摘したら、意地悪かなあ…。
実際のところ、デザインの為にリーダの数を増減させるのは論理構造を司るHTMLの概念から外れている感じがします。
おっしゃるとおりでございます。
リーダの画像を用意して真ん中のブロックの背景に敷き詰めるほうがいいでしょうけれど、画像用意するのが面倒だったんですよね←
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/10 16:13
2017/10/10 16:14 編集