質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • HTML

    8291questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS3

    1907questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

空白部分を・で埋めたい

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 340

AMK

score 130

色々調べたのですがいまいち解決できず質問させて頂きます。

![イメージ説明]

上記のように良くあるレシピ説明の材料の名前と数量の間に「・・・・・」があると思いますが
CSSやHTMLでは実現はできないでしょうか?

調べるにしても「・・・・」の部分の名前が解らず調べてもヒットしなくて困っています。

色々レシピサイトなどを見て「・・・・」が無いか調べてみたのですが
私の見た限り見つけれませんでした。

「・・・・」を使っているサイトか参考になるサイト
「・・・・」の名前?などおわかりなる方がいらっしゃいましたら
お手すきの際に教えていただけますでしょうか?

よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+6

的外れかもしれませんが、以下のように行ってみてはいかがでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            padding: 50px;
        }

        .ingredients {
            display: flex;
            align-items: center;
        }

        .ingredients::after {
            content: '';
            border-top: 5px dotted;
            flex: 1 1 auto;
            order: 1;
        }

        .ingredientAmount {
            order: 2;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>材料(4人分/1人当たり103cal)</h1>
    <ul class="materialBox">
        <li class="ingredients">
            <span class="ingredientName">ベーコン</span>
            <span class="ingredientAmount">1枚(20g)</span>
        </li>
        <li class="ingredients">
            <span class="ingredientName">じゃがいも</span>
            <span class="ingredientAmount">3個(330g)</span>
        </li>
    </ul>
</div>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/11 01:13

    マジで出来るんですね!!諦めていました^^;
    CSSは奥が深い・・・・

    キャンセル

  • 2017/10/11 01:14 編集

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

    キャンセル

+2

「・・・・」はリーダーの一種かとおもいます。

【リーダー (記号) - Wikipedia】
https://ja.wikipedia.org/wikii/リーダー_(記号)


CSSで、となると点々を行の背景に置き、「ベーコン」など項目の背景色を白にすれば似た状況にはなると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/10 07:14

    回答ありがとうございます

    なるほど、そう言うアプローチがありますね!勉強になります
    ですが背景付のデザインなので背景白色と言うのが難しいんです(T_T)

    キャンセル

  • 2017/10/10 11:11

    後から条件を増やされても・・・。他にも条件があるなら、質問文を具体的な記述で書き直すことをお勧めします。

    キャンセル

  • 2017/10/10 23:10

    質問文に寄せられたSSを見る限りでは右側に計量スプーンが映っているだけなので、各ラインを別の背景画像で上書きするのは不可能ではないように見えますね。
    最も、本来、背景画像にあるべきものではないので、他で背景画像が必要になれば競合してしまうという意味では緊急避難的な対策だと思います。

    キャンセル

  • 2017/10/11 00:18 編集

    > 本来、背景画像にあるべきものではないので
    (「緊急避難的」は否定しませんが)さすがにこの部分は言いすぎかと思います。デザイン次第な部分だと私は思います。

    キャンセル

  • 2017/10/11 01:13

    後だしで申し訳ないです。

    キャンセル

  • 2017/10/11 02:27

    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="…"> とマークアップするのが正解だと私は思います。)

    また、背景とは前面にコンテンツがある事を意図したものです。
    仮に背景画像を使用したとして、前面に何らかのコンテンツが設置された時に、それは意図したデザインとなるでしょうか。
    私には「・・・・」は「前面にあるべきもの」のように思えます。

    キャンセル

  • 2017/10/11 07:02

    To: think49さん
    マークアップの話が出てきましたが、先のコメントからは私は読み取れませんでした。また、マークアップの話なら画像として入れるよりも dl 要素で意味づけるほうが対応関係は担保できるとおもいます。

    > ul要素のリストマーカーのような構造を表す役割を担っています。
    構造をあらわしているのはul要素自身であってリストマーカー表現では無いと思います。ユーザビリティについても、CSSが効いていない状況を想定するのであればマークアップ側、つまり dl 要素で意味づけるほうが対応関係は担保できるとおもいます。

    > また、背景とは前面にコンテンツがある事を意図したものです。
    > 仮に背景画像を使用したとして、前面に何らかのコンテンツが設置された時に、それは意図したデザインとなるでしょうか。
    「前面に何らかのコンテンツが設置された時に」もデザインを考える上で当然考慮しますが、それは何が来ても問題ないように対処することでは無いので、私は「前面にあるべきもの」という結論には至りませんでした。

    「デザイン」「ユーザビリティ」などについては定義があいまいというか共通のものをイメージできない可能性が高いので、すみませんが返答はしないと思います。

    キャンセル

  • 2017/10/11 12:00 編集

    To: kei344 さん

    > また、マークアップの話なら画像として入れるよりも dl 要素で意味づけるほうが対応関係は担保できるとおもいます。
    そうですね。これは私の説明不足でした。申し訳ありません。
    マークアップとしては、dl要素もしくはtable要素が適切だと思います。

    > 構造をあらわしているのはul要素自身であってリストマーカー表現では無いと思います。
    これも説明不足でしたが、基本的に人間は装飾なしにHTMLの構造は読み取れないものだと理解しています。
    制作者スタイルシート、デフォルトスタイルシートが何もない環境でHTML文書を描画した場合、何が何やら分からないでしょう。
    ですので、構造を分かりやすくする為に、レイアウトや装飾に構造的な意味を持たせます。
    リストマーカーは人間がリストと判断できるための重要な指標となっており、それは背景と切り分けて考えるべき、というのが私の考えです。
    例えば、Lynxのように制作者スタイルシートを無効化した環境では、リストマーカーはそれがリストと判断する為の重要な指標となっています。
    しかしながら、仰る通り、dl要素でマークアップするのであればこの問題は回避できます。

    > 「前面に何らかのコンテンツが設置された時に」もデザインを考える上で当然考慮しますが、それは何が来ても問題ないように対処することでは無いので、私は「前面にあるべきもの」という結論には至りませんでした。
    「前面にあるべきもの」は「意味論的に重要な前景画像とは何か」の判断指標として私が使用している考え方になりますが、わかりにくかったですね。すみません。。
    この規約はCSSによる装飾にも意味論があることを示しているように、私には読めました。
    背景は意味論的に重要ではありませんが、「意味論的に重要ではない」とはどういう意味なのか、という疑問に至ります。
    CSS仕様には「作者は、背景画像を設定するときは,画像が可用でない状況下でもテキスト色とのコントラストは維持されるように, background-color も指定するべきである。」とありますが、私これは「背景画像は省略された場合にbackground-color で代替されるべきである」と私は解釈しました。

    > 「デザイン」「ユーザビリティ」などについては定義があいまいというか共通のものをイメージできない可能性が高いので、すみませんが返答はしないと思います。
    CSS仕様、WCAG等の共通認識を持つための指標はありますので、それをどう解釈するか、という問題だと思います。
    「意味論的に重要な前景画像は、文書マークアップを通して提供されるべきである」に対する kei344 さんの考えが読み取れなかったので、差し支えなければ返答頂けると有り難いです。
    私の説明不足から大々的に持論を展開することになってしまったので、問題があれば新たに質問をたてて広く意見を募ることを考えます。

    キャンセル

  • 2017/10/11 12:49

    追記しました。

    キャンセル

  • 2017/10/11 12:52

    重複な一文が抜け落ちていたので、編集しました。
    > これは「背景画像は省略された場合にbackground-color で代替されるべきである」と私は解釈しました

    キャンセル

0

チャレンジしてみました。
https://jsfiddle.net/pLceLxfg/

<div class="wrapper">
    <div class="row">
        <div class="col1">ベーコン</div>
        <div class="col2">
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
        </div>
        <div class="col3">1枚(20g)</div>
    </div>
    <div class="row">
        <div class="col1">じゃがいも</div>
        <div class="col2">
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
            <div class="reader"></div>
        </div>
        <div class="col3">3個(330g)</div>
    </div>
</div>
.wrapper{
  width:300px;
}
.row{
  width:100%;
  display:flex;
}
.col1,.col3{
  flex-shrink:0;
}
.col2{
  display:flex;
  flex-flow:wrap;
  justify-content: center;
  overflow:hidden;
  height:1em;
}


 
 
 
ていうか、readerじゃなくてleaderですね! あー恥ずかしい。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/10 22:53

    「CSS-offにしたらリーダが10個になりました」と指摘したら、意地悪かなあ…。
    実際のところ、デザインの為にリーダの数を増減させるのは論理構造を司るHTMLの概念から外れている感じがします。

    キャンセル

  • 2017/10/10 23:08

    おっしゃるとおりでございます。
    リーダの画像を用意して真ん中のブロックの背景に敷き詰めるほうがいいでしょうけれど、画像用意するのが面倒だったんですよね←

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8291questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS3

    1907questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。