サポート » プラグイン » テーブルのようなレイアウトをスマートにするには

  • 解決済 WP_manabu

    (@wp_manabu)


    固定ページにて、添付したURLのページのようなレイアウトがスマートにできるプラグインがありましたら、ご紹介くださいませ。というのも、いままでTableを利用してレイアウトしていたのですが、レスポンシブを勘案するのに手間が掛かるし、じっさい現状をチェックしてみると、iPadで閲覧したばあい、テーブルの中に、イラストがうまく納まっていなかったりしているからです。どうぞ、よろしくお願いいたします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • DRILL LANCER

    (@rickaddison7634)

    スマートかどうかはわかりませんが、
    Bootstrap 4 ではレスポンシブ対応するために、
    下記のようにスクロールするようになっているようです。
    参考サイト
    HTML

    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>

    CSS

     .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    P.S.
    BizVektor を一時期使用していたみたいですが、( github から判断 )
    同じ作者がリリースしている Lightning は Bootstrap 3 ベース
    ( 夏には Bootstrap 4 にも対応予定らしい ? )
    で作られたテーマなのでより簡単に実装可能だと思います。

    • この返信は3年前にDRILL LANCERが編集しました。
    • この返信は3年前にDRILL LANCERが編集しました。
    • この返信は3年前にDRILL LANCERが編集しました。
    スレッド開始 WP_manabu

    (@wp_manabu)

    RICKさん、ご回答、ありがとうございまーす !

    該当ウェッブページは、こちらです。
    https://tsurumaki-office.com/sukino_hataraki/

    レスポンシブにあたっては、ピクセルの大きさにより条件を分岐させ、対応しています。ただし、宣言(プロパティと値)については、記述直後は理解していたと思うのですが、現在、改めてみたところ、理解があやしくなっています :-)

    @media (max-width: 650px) {
    	table td{
    		display: block;
    		padding: 0.6em;
    		text-align: center;
    	}
    }

    で、手持ちのMacBookAirとiPhoneでは、うまく表示されていたのですが、せんじつ(ショップに置いてある)iPadProを、なにげに、チェックしたところ、画像が、はみだしていたのですね〜、というわけで、当質問に至りました。

    BootStrap4ということです、ね。すみません、勉強不足です。こちらを活用した場合、テーブルによるレイアウト&レスポンシブの利点は、どういう感じになりますでしょうか。

    ま、それ以前に、テーブルというのは、そもそもセルのように使うものであって、レイアウトに使うのは適していないような気もし出したりして…

    末筆になりましたが、WordPressとは離れてしまった内容になってしまっていることを、ご容赦くださいませ。

    P.S.
    ご指摘のとおり、以前はBizVectorを利用させて頂いていましたが、げんざいのテーマはTWENTY SEVENTEENとなっております。

    DRILL LANCER

    (@rickaddison7634)

    手持ちのMacBookAirとiPhoneでは、うまく表示されていたのですが、せんじつ(ショップに置いてある)iPadProを、なにげに、チェックしたところ、画像が、はみだしていたのですね〜、というわけで、当質問に至りました。

    画像がはみ出すも問題は、CSSに下記を追記すれば解決すると思います。

    img {
        max-width: 100%;
    }

    BootStrap4ということです、ね。すみません、勉強不足です。こちらを活用した場合、テーブルによるレイアウト&レスポンシブの利点は、どういう感じになりますでしょうか。

    テーブルにおける利点はスクロールが可能になるので変なところで折り返す必要がなくなるということが挙げられます。

    Bootstrap は横並びの数をデバイスの幅によって制御できます。
    例えば Bootstrap 3 を適用していて、下記を記述を何回か繰り返した場合
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">(略)</div>

    • 767pxまでの場合は1列表示
    • 991pxまでの場合は2列表示
    • 1199pxまでの場合は3列表示
    • 1200px以上の場合は4列表示

    となります。

    ようは、全体を12としてその部分にいくつ使うかを
    col-xx-yyで割り当てることで横並びを制御できます。

    また、そこそこ面白い機能も付いているのでページ作成が楽しくなると思います。

    スレッド開始 WP_manabu

    (@wp_manabu)

    Bootstrap、おもしろそうですねぇ。連休の後半を使って、勉強してみまーす!

    スレッド開始 WP_manabu

    (@wp_manabu)

    解決済みでーす、

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「テーブルのようなレイアウトをスマートにするには」には新たに返信することはできません。