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

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

ただいまの
回答率

91.38%

  • HTML

    6151questions

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

  • CSS

    3864questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2行に渡るデータを一括りとして4つの情報を美しく表示させたい

受付中

回答 4

投稿 2017/11/30 11:30 ・編集 2017/11/30 12:26

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

eitaroichi

score 0

前提・実現したいこと

htmlとCSSを利用し、2行に渡るデータを美しくレスポンシブ対応で表示させたいのですが、良い方法がわかりません。

追記
初めての質問で、要領がわからず申し訳ありません。
nth-child疑似クラスの順番の解釈が間違っていたようです。
そうなると、リストでなくテーブルを使う方がよいのでしょうか?

希望

試したこと

初期はバックグラウンドに色を付ける予定ではなかったので、Aのようなhtmlで、それぞれのclassでwidthやpaddingを指定して、一度は思い通りに実現したのですが、バックグラウンド(偶数か奇数のみ)に色をつけることになりul liで囲いBのような形で試したのですが、上手く配色されません。

A:

<img></img>
<div class="container">
 <div class="1">日付</div>
 <div class="2">あああああああああああああ</div>
 <div class="3">いいい</div>
 <div class="4">ううう</div>
</div>

B:

<img></img>
<div class="container">
 <ul>
  <li>
   <div class="1">日付</div>
   <div class="2">あああああああああああああ</div>
   <div class="3">いいい</div>
   <div class="4">ううう</div>
  </li>
  <li>
   <div class="1">日付</div>
   <div class="2">あああああああああああああ</div>
   <div class="3">いいい</div>
   <div class="4">ううう</div>
  </li>
 </ul>
</div>
.li:nth-child(odd){
    background: #ff8080;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/11/30 11:34

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、質問テンプレートの文字列が残ってしまっていますので、不要な部分は削除してください。

    キャンセル

  • kei344

    2017/11/30 12:11

    CSSも提示されたほうが適切な回答がしやすくなります。

    キャンセル

回答 4

+3

  • img要素終了タグは必要ありません
  • .liとすると、liクラスが設定された要素」を指します。今回はli要素に対してスタイルを適用したいので、liとする必要があります。
  • li要素に背景色のスタイルを適用すると、その中のdiv要素にもその背景色が適用されます。今回は、li要素内の偶数、もしくは奇数個目の要素の背景色を変更したいので、li要素に背景色をスタイルを設定するのではなく、li要素の子要素の偶数個、もしくは奇数個目のdiv要素に背景色を設定することで正しい結果が得られます。
  • クラス名では、先頭文字が数値の場合スタイルが正常に適用できませんjavascriptで使うだけ、というならば別に良いと思いますが、後々CSSでスタイルを適用したくなったときのことを考えてちゃんとしたクラス名を設定しておいたほうが良いと思います。
  • 質問文の画像のようなデザインにすることは、現状のHTMLの構造では難しいと思いますので、変更が必要です。

以上のことを踏まえて、質問者さんの実現したいことは、以下のように行うことができると思いますが、いかがでしょうか?

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

        body {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
        }

        ul {
            list-style-type: none;
        }

        .container {
            flex-grow: 1;
        }

        .container li {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .container li:nth-child(odd) {
            background: #ff8080;
        }

        .class1,
        .class2,
        .classes {
            flex: 1;
        }

        .classes {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .class2 {
            page-break-after: always;
            break-after: always;
        }
    </style>
</head>
<body>
<img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image" alt>
<div class="container">
    <ul>
        <li>
            <div class="class1">2017年11月26日</div>
            <div class="classes">
                <div class="class2">あああああああああああああ</div>
                <div class="class3">いいい</div>
                <div class="class4">ううう</div>
            </div>
        </li>
        <li>
            <div class="class1">2017年11月26日</div>
            <div class="classes">
                <div class="class2">あああああああああああああ</div>
                <div class="class3">いいい</div>
                <div class="class4">ううう</div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

投稿 2017/12/02 12:24

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+2

.container div:nth-child(odd) {
  background: #eee;
}

.container div:nth-child(even) {
  background: #fff;
}


レスポンシブであることがどう影響しているのかわからないので、問題があれば追記願います。

-- 追記。
記述ミスですか?

/*.li:nth-child(odd){*/
li:nth-child(odd) {
    background: #ff8080;
}

投稿 2017/11/30 11:45

編集 2017/11/30 13:37

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/30 13:58

    ミスと言うか、こう表記したところ上手く動作していません。
    親のdivに対してnth-child疑似クラスを使うという事でしょうか?

    キャンセル

  • 2017/11/30 15:44

    んん?
    このように書いているのなら質問のほうを修正したほうがいいのでは?

    キャンセル

0

<img>
<div class="container">
 <div class="data">
  <span>日付</span>
  <span>概要1</span>
  <span>概要2</span>
  <span>概要3</span>
 </div>
 <div class="data" style="background-color:">
  <span>日付</span>
  <span>概要1</span>
  <span>概要2</span>
  <span>概要3</span>
 </div>
</div>


レスポンシブに変形がしやすく、偶数部分のバックグラウンドに色をつけたいならこのような感じでどうでしょうか?CSSファイルで色を変えたいなら、

.data:nth-child(2n) {
  background-color: 
}


とすればOK

投稿 2017/11/30 11:50

編集 2017/11/30 11:58

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/30 13:59

    ありがとうございます。
    同様に記述してみたのですが、バックグラウンドに色が付きませんでした。

    キャンセル

  • 2017/11/30 14:01

    background-color:だけでは色はつきませんよ?
    background-color:red とか入れてみましたか?

    キャンセル

  • 2017/11/30 14:29

    はい入れています。
    カラーが記載されていないためでなく、class="4"のfloar:left;をはずしたところ、上手くいきました。
    ただ、表示が崩れてしまっているので、もう少し検討してみます。
    ありがとうございました。

    キャンセル

0

テーブルはどうかと質問されていたのですが、4つの情報を指示通り(高さを揃えて、改行をする)表現するにはテーブルは難しいと思いました。
htmlを変えるとしたら定義リストです。
レスポンシブにもより対応しやすいかと思います。

<div class="colored">
    <dl>
        <dt>日付</dt>
        <dd>ああああああああああ<br>いいい ううう</dd>
    </dl>
    <dl>
        <dt>日付</dt>
        <dd>ああああああああああ<br>いいい ううう</dd>
    </dl>
    <dl>
        <dt>日付</dt>
        <dd>ああああああああああ<br>いいい ううう</dd>
    </dl>
</div>
dl{
    display:flex;  /*日付と情報を横並びにするため*/
    padding:10px;  /*見た目をきれいにする調整*/
    margin:0px;  /*背景色を入れたとき高さが均一になるようにするため*/

}
.colored dl:nth-child(odd){
    background-color:   ;
}

投稿 2017/11/30 13:19

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/30 13:56

    ありがとうございます。テーブルは難しいのですね。
    「いいい」と「ううう」は両者とも頭を揃えたく、文字数は可変します。

    キャンセル

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

ただいまの回答率

91.38%

関連した質問

  • 解決済

    HTMLでテーブルを2カラム表示

    html, css を用いて、テーブルを左右に2カラム表示したと考えています。 イメージとしては、アプリケーションのサイドバーとメインウィンドウという感じです。 【現状】 画面

  • 解決済

    正方形のdivの中に9つのdivを作る

    ご覧いただきありがとうございます。 下のサンプルのよう、正方形のdivの中に9つのdivを作りたいのですが、なかなか揃えません。 ・欲しいデザイン ・要件 サンプルイメー

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 受付中

    レスポンシブルデザインについて

    ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。 ちなみにこちらのサイトを参考にしました https://

  • 解決済

    レスポンシブデザインについて

    この画像の上部の油そば池袋とありますが幅を小さくしていくと 赤枠の箇所に油そば池袋と入れたいのですがどうすればよろしいでしょうか <!DOCTYPE html> <html

  • 解決済

    フォームの中の文字をクリックと同時に上に動かしたいのですが...

     やりたいこと inputのテキストボックスにプレースホルダーのような形で文字を置いて、クリックと同時にその文字が上に動くようにしたいです。 参考: http://material

  • 受付中

    中央寄せした要素の左にlabel

    下記のように、セレクトボックスを画面中央に配置し、左に”ユーザー”というlabelを配置、 同じく画面中央に配置したテキストボックスの左に”PASS”というlabelを配置したいで

  • 解決済

    Bootstrapで左寄せ・右寄せの要素を一行に共存させるには。

    前提・実現したいこと Ruby on Railsにてbootstrapを使って、フロント実装をしています。 デザインに沿った実装がどうしても出来ないです。どうしたら宜しいでしょうか

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

  • HTML

    6151questions

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

  • CSS

    3864questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。