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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML

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

CSS

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

Q&A

解決済

2回答

242閲覧

リストの表示方法について

ikt_erk122

総合スコア40

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/10/23 13:15

リンクの表示方法で縦2列で表示させたいんですけどどうすればできますか?

表示させたいリンクはこちらです↓

<h1>球団一覧</h1> <div class="list1"> <ul> <p>セ・リーグ</p> <li>読売ジャイアンツ</li> <a href="http://www.giants.jp/top.html" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_g_l.gif"></a> <li>東京ヤクルトスワローズ</li> <a href="http://www.yakult-swallows.co.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_s_l.gif"></a> <li>横浜DeNAベイスターズ</li> <a href="http://www.baystars.co.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_db_l.gif"></a> <li>中日ドラゴンズ</li> <a href="http://dragons.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_d_l.gif"></a> <li>阪神タイガース</li> <a href="http://hanshintigers.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_t_l.gif"></a> <li>広島東洋カープ</li> <a href="http://www.carp.co.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_c_l.gif"></a> </ul> </div> <div class="list2"> <ul> <p>パ・リーグ</p> <li>福岡ソフトバンクホークス</li> <a href="http://www.softbankhawks.co.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_h_l.gif"></a> <li>埼玉西武ライオンズ</li> <a href="http://www.seibulions.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_l_l.gif"></a> <li>北海道日本ハムファイターズ</li> <a href="http://www.fighters.co.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_f_l.gif"></a> <li>千葉ロッテマリーンズ</li> <a href="http://www.marines.co.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_m_l.gif"></a> <li>東北楽天ゴールデンイーグルス</li> <a href="https://www.rakuteneagles.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_e_l.gif"></a> <li>オリックス・バファローズ</li> <a href="http://www.buffaloes.co.jp/" target="_blank"><img src="http://p.npb.jp/img/common/logo/2018/logo_bs_l.gif"></a> </ul> </div>

今のcssはこちらです↓

.list1{ li{ color: #fff; padding-top: 30px; padding-bottom: 10px; } p{ color: #fff; } } .list2{ li{ color: #fff; padding-top: 30px; padding-bottom: 10px; } p{ color: #fff; } }

list1とlist2を縦2列に表示させたいです

ちなみに今表示されている状況はこんな感じです↓

セ・リーグ 読売ジャイアンツ 東京ヤクルトスワローズ 横浜DeNAベイスターズ 中日ドラゴンズ 阪神タイガース 広島東洋カープ パ・リーグ 福岡ソフトバンクホークス 埼玉西武ライオンズ 北海道日本ハムファイターズ 千葉ロッテマリーンズ 東北楽天ゴールデンイーグルス オリックス・バファローズ

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

そもそもですが、<ul>直下には<li>以外を入れてはいけません。
私だったら以下のように。

HTML

1<div id="box"> 2 <dl> 3 <dt>セ・リーグ</dt> 4 <dd> 5 <ul> 6 <li>球団名<br><a><img></a></li> 7 </ul> 8 </dd> 9 </dl> 10 <dl> 11 <dt>パ・リーグ</dt> 12 <dd> 13 <ul> 14 <li>球団名<br><a><img></a></li> 15 </ul> 16 </dd> 17 </dl> 18</div>

CSS

1#box dl { 2 float:left; 3 width:50%; 4}

本当は#boxをflexにしたほうが今は主流だと思います。
その他装飾は追記してください。

投稿2018/10/23 21:45

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ikt_erk122

2018/10/24 01:53

回答ありがとうございます 勉強不足でした、 おかげさまで解決できました
guest

0

縦のリストが横並びに表示という意味でしたら、.list1.list2をfloatさせてはどうでしょうか?

css

1.list1{ 2 float:left;/*--- これを追加 ---*/ 3 li{ 4 color: #fff; 5 padding-top: 30px; 6 padding-bottom: 10px; 7 } 8 p{ 9 color: #fff; 10 } 11} 12 13.list2{ 14 float:left;/*--- これを追加 ---*/ 15 li{ 16 color: #fff; 17 padding-top: 30px; 18 padding-bottom: 10px; 19 } 20 p{ 21 color: #fff; 22 } 23 24}

list2のあと、floatを解除するのをお忘れなく。

html

1<p style="clear:both;"></p>

投稿2018/10/23 14:13

colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ikt_erk122

2018/10/24 01:57

回答ありがとうございます 左側に縦2列になってしまって、別の方の方を参考にしたら真ん中に縦2列になったのでそっちを参考にさせていただきました。 でもいい勉強になりました。ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問