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

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

ただいまの
回答率

88.03%

ループの途中で改行する方法

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,368
退会済みユーザー

退会済みユーザー

■やりたいこと

4つの要素が横一列に並ぶ状態を、2列×2行とか、4列×2列にしたいです。
このような並び方↓です。
イメージ説明
このようにするためのCSSは、下記にあるいまの状態の【style.css】をどのように変えればよさそうでしょうか?

具体的なコードでなく、ヒントでもうれしいです。
よろしくお願いいたします。

■いまの状況

このように関連記事が4つ、横一列で並んでいます。
https://jsfiddle.net/un11o6s5/1/

コードは下記のように書いています。

【single.php】

<!-- 関連記事 -->
<div class="test1rand-wrap">
<?php
 global $post;
 $term = array_shift(get_the_terms($post->ID, 'test1-category')); 
 $args = array(
  'numberposts' => 4, //4件表示
  'post_type' => 'test1', //カスタム投稿タイプ名
  'taxonomy' => 'test1-category', //タクソノミー名
  'term' => $term->slug, //ターム名 
  'orderby' => 'rand', //ランダム表示
  'post__not_in' => array($post->ID) //表示中の記事を除外
 );
?>

<ul class="test1rand">
<?php $myPosts = get_posts($args); if($myPosts) : ?>
<?php foreach($myPosts as $post) : setup_postdata($post); ?>

<li class="rand">
<a href="<?php the_permalink(); ?>">
<p class="radsumb"><?php the_post_thumbnail(); ?></p>
<?php the_title(); ?></a>
</li>
<?php endforeach; ?>
<?php else : ?>
</ul>

<p>関連アイテムはまだありません。</p>
<?php endif; wp_reset_postdata(); ?>
</div>

【style.css】

/*-- 関連記事 --*/
ul.test1rand {
    display:table;
    table-layout:fixed;
    margin-bottom: 60px;
    margin-left: 0px;
}
ul.test1rand li {
    display:table-cell;
    padding: 5px;
    line-height: 120%;
}
ul.test1rand li a {
    display:block;
    text-decoration:none;
    font-weight: bold;
}
.rand img:hover {
    opacity: 0.8;
    transition: 0.2s;
}
.rand {
    width: 25%;
}
.ft-kiji {
    background: #F3F3F3;
    border-left: 5px solid #4285F4;
    padding: 15px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

checkベストアンサー

+2

$loopCount = 0;
foreach($myPosts as $post) : $loopCount++;
    if ( $loopCount % 2 === 0 ) {} // 2,4,6,8,10...回目
endforeach;

というかCSSでやれば良い。

【これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/24 16:17

    フレックスボックス、、ほうほう?いつもありがとうございます!さっそく見に行ってまいります♪

    キャンセル

  • 2016/10/24 17:13

    やばいです!これめちゃくちゃ探していたやつです!色々な部分が解決しそうです!!!嬉しすぎます!!まだ全くできてないのですが、嬉しすぎたのでついひとこと。笑

    キャンセル

  • 2016/10/25 14:59

    ありがとうございます!無事できました!専門用語が多くて検索ワードが分からないという点が、プログラミングの勉強を阻みますな(;´・ω・)

    キャンセル

+2

なにを手がかりに切り替えるかによりますね
user agentを元におこなうならPHPでやる手もありますが
javascriptなどで読み替えることもできるかと思います
いずれにしても構造は替えずにcssでやるのが賢明です

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/24 13:49

    ありがとうございます。ただ、さすがにそのご回答ですと…(>_<)笑

    javascriptはまったくいじれないので、CSSがよさそうですね。

    たとえば何と検索すればよさそうでしょうか?
    「ループ 途中 改行」とかでは何も出なくて困っておりまして…

    キャンセル

+1

>たとえば何と検索すればよさそうでしょうか?

CSSでやるなら「メディアクエリ」で検索すればいいのではないでしょうか。

「メディアクエリ」で表示幅が変われば、

.rand {
    width: 25%;
}


width: 50%;


とかに変更するように設定すればいいのではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/24 15:32

    ありがとうございます♪

    >(パソコンの場合とケイタイの場合で表示をわけるため)
    とは書いていますけれど、実はパソコンでは「横4×縦2」にもしたかったりするのです。いろいろ試したいというか。
    なので、表題のとおり「途中で改行したい」というのが主にお聞きしたいことなのです。m(__)m

    キャンセル

0

ul.test1rand {
    display:table;
    table-layout:fixed;
    margin-bottom: 60px;
    margin-left: 0px;
}

ul.test1rand {
    table-layout:fixed;
    margin-bottom: 60px;
    margin-left: 0px;
}

とdisplaytableを消したら2*2になりましたがだめでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/24 15:23

    うむむ?
    消したましたが、4つが横一列に並んでいるだけのようすです( ;∀;)
    https://jsfiddle.net/un11o6s5/3/

    キャンセル

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

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

関連した質問

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