View article
Talk page

テキスト、画像の横並び構成

a.kubota により 2019年 1月 31日, 05:14が変更された | 履歴

    2024年 9月 30日, 13:32 現在の版

    この版へ。

    版の一覧 に戻る。

    現在の版を閲覧

     

    分割

    2分割(1:1)

    (1)「[Toggle Editor]」をクリックし、下記のコードをコピー貼り付けします。
    
<div class="row">
  <div class="col-md-8 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
  <div class="col-md-4 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
</div>
    (2)必要箇所を適宜変更していきます。
    ※変更する箇所がわかりやすいように、文字色を赤にしました。
    
<div class="row">
  <div class="col-md-6 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
  <div class="col-md-6 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
</div>
    (3)「[Toggle Editor]」をクリックし、いつもの表示に切り替えます。
    (4)「ここに内容を入れて下さい。」をドラッグで範囲指定して、挿入したい内容を入れて下さい。
    画像を挿入したい場合は、範囲指定をしたまま、上部の画像挿入ボタンをクリックして画像を挿入して下さい。
    (5)保存ボタンをクリックして、ページを確認してください。
     

    2分割(6:4)

    
<div class="row">
  <div class="col-md-8 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
  <div class="col-md-4 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
</div>
     

    2分割(6:4)

    
<div class="row">
  <div class="col-md-4 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
  <div class="col-md-8 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
</div>
     

    3分割(1:1:1)

    3分割のときには下記コードをコピーして使用して下さい。
    
<div class="row">
  <div class="col-md-4 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
  <div class="col-md-4 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
  <div class="col-md-4 col-sm-12 col-xs-12">
  ここに内容を入れて下さい。
  </div>
</div>