Bootstrap 4 5Columns
今後の作業用に個人的メモも兼ねて。このやり方で大丈夫なのか自信はありませんが。
レスポンシブコーディングを行うのに何かと便利なBootstrapですが、基本的には12分割となっています。でもメニューなどデザインの関係で横列に5個や7個など並べたい時もあるかと思います。
Googleなどで検索するとCSSの追加で「width: 20%; float: left;」を使用した方法や、「col」のみで横並べする方法がよく見受けられます。前者は前時代的な気がしてBootstrapに移行した意味が薄れそうで・・・、後者はclassに指定するだけで横に並びますが、スマホサイズになっても下に落ちないので小さく見づらい。
今回は出来るだけスタイルも単純化したかったので、「col」指定に加えて「max-width: 50%;」などを使用した独自クラスでタブレットサイズ以下の時は2列になるようにしてみました。
個人的にはCSS グリッドレイアウトも試してみたいのですが、IE10をどうするかでしょうか。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout
関連記事
WordPressのインストールを終えて
さてインストールやサイトアドレスの設定も終わったので、次はWordPressのテーマ決めですね。 最近のサーバーは、殆どがWordPressのインストール機能を備えており、簡単にインストールができるので大変助かっています […]
WordPressのテーマを選ぶ（テーマの探し方）
WordPressでブログを運営していくにあたって、まずはブログの顔とも言えるテーマを決めなければいけません。 世界中で個人から企業まで有料無料問わず、様々なテーマを公開していますが、自分の運営するブログの内容によっては […]
サブディレクトリに新規インストールした、WordPressのサイトアドレスURLを変更する方法
WordPressを新規にサブディレクトリ「wp」や「wordpress」などにインストールをした場合、サイトアドレスは例として「http://example.com/wp」のような感じになります。サイトの運用上、このままでも良ければ問題ないのですが、正直なところ見栄えが悪いですよね。やっぱりドメイン直下で運営したいところ。