2段組または3段組の文章を作成するためのCSS

2013年5月14日現在は、「display:table」等を使って(記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)」参照)2段組または3段組の文章を作成しています。
2段組または3段組の文章を作成するためのCSSについての覚書です。

3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム


以下のCSSを追加し、

.box2 {
width:45%;
float:left;
padding:10px;
}

.box3 {
width:30%;
float:left;
padding:7px;
}

以下のHTMLを投稿編集画面に記述すると、

<div class="box2" >2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム </div>
<div class="box2" >2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム </div>
<div class="box3" >3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム </div>
<div class="box3" >3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム </div>
<div class="box3" >3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム </div>

以下のように表示されます。

2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム
2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム 2カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム
3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム 3カラム

5件のコメント

  1. こんにちはいつも参考にさせていただいています。
    サイトのトップページを段組で作成したくて試行錯誤していたのですが、この記事はドンピシャでした。

    早速同じように書き込んでみたのですが、CSSが反映されません。
    http://822468.com/819-2
    どうしてでしょうか?

    他のサイトや記事、テンプレートなどのデザインを参考にhtmlとCSSを書き込んでも反映されず行き詰まっています。

    お手すきの時にでもご助言いただけますと大変助かります。
    どうぞ宜しくお願いします

    いいね

    1. とりあえず、プラグイン「My Custom CSS」をインストールして、スタイルシートを貼ってみてはいかがでしょうか。style.css に上書きされる形で CSS を適用することができます。

      なお、css が反映されない原因の一つとして、{ } に過不足があるケースがあります。

      いいね

    2. 適切なご助言を頂き誠にありがとうございます。

      My Custom CSS
      http://wordpress.org/extend/plugins/my-custom-css/

      をインストールして、CSSの構文チェックを行ったら表示されるようになりました。

      すれ違いですが、このコメントシステムも大変興味がありこれから調べて導入したいと思っていますこの度はありがとうございましたm(__)m

      いいね

      1. うまくいかれたようでよかったです!

        なお、このコメントシステムは、ブログサービス WordPress.com 独自のものです。お気にめすかどうかわかりませんが、プラグイン「JetPack by WordPress.com」をインストール(参照:プラグイン「Jetpack by WordPress.com」のインストールのしかた | orgmemo)すると、Twitter や Facebook でログインしてコメントできるようになると思います(最近、追加された機能で、使い勝手等はまだチェックしていません(>_<))。

        いいね

        1. 早速利用してみたいと思います。ありがとうございます

          いいね

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。