固定ページ内？の２カラム表示について

PR 2016/4/30

このトピックには9件の返信、2人の参加者があり、最後にみさみさにより10年、 5ヶ月前に更新されました。

9件の返信スレッドを表示中

投稿者

投稿
- 2016年3月23日 5:14 PM #37918
  
  みさみさ
  ゲスト
  
  初めて書き込ませて頂きます。よろしくお願いいたします。
  
  Simplicity導入サイトに掲載されているhttp://cherry-blossom.ciao.jp/のトップページのような固定ページを作りたいと考えています。
  
  上記のサイトの「はじめに&日記ブログ」の中のようにトップページ内だけ２段に表示するにはどのようにしたら良いのでしょうか？
  
  子テーマ内のcssに記述を足せば良いのでしょうか？
  
  初歩的な質問で申し訳ありません。
  ご教授いただけると幸いです。
- 2016年3月23日 6:19 PM #37919
  みさみさ
  ゲスト
  連投失礼致します。
```
#a {
	width: 45%;
	float: left;
	border-right: solid #CCC 1px;
	margin-right: 5px;
	padding: 0 15px 0 10px;
}

#b {
	width: 48%;
	float: left;
	margin-right: 5px;
	padding: 0 0 0 10px;
}
```
  以上のようなCSSを足すことによって一応は再現できました。
  まだ、イメージ通りにはできてはいないもののあとはもう少しh3,4タグいじくればなんとかなりそうです。
  お騒がせいたしました。
  不具合がなければいいのですが。
- 2016年3月23日 7:29 PM #37920
  
  テツ
  ゲスト
  
  素敵やん
  こんなことできるんや
  真似したいわー
- 2016年3月23日 8:28 PM #37923
  わいひら
  キーマスター
  僕の環境では、こんな感じでいけました。
  
  HTML
```
<div class="left">吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</div>
<div class="right">私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。</div>
```
  CSS
```
.left{
  float: left;
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}

.right{
  float: right;
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
```
  これに関しては、いろいろなやり方があると思います。
  marginやpaddingは、環境に合わせて調整は必要かもしれません。
- 2016年3月23日 9:56 PM #37927
  
  テツ
  ゲスト
  
  box-sizing: border-box;
  コピペしてみたけど
  うまくいかないや
  
  環境のせい？
- 2016年3月23日 11:14 PM #37931
  
  Hidekichi
  ゲスト
  
  サンプル: css columnsを使う | jsFiddle
  
  参考サイト: 文章の段組み | HTMLクイックリファレンス
  
  can i useによるとfirefoxで一部プロパティが利用できないようですが、サンプルみたいな感じなら問題なくfirefoxでも表示できました。
- 2016年3月24日 1:59 AM #37935
  
  Hidekichi
  ゲスト
  
  サンプル: flexの例 | codepen
  flexでする場合はこんな感じです。
- 2016年3月24日 1:59 AM #37936
  
  Hidekichi
  ゲスト
  
  レスポンシブで、480px以下になった時1列になります。
- 2016年3月24日 7:41 PM #37968
  
  わいひら
  キーマスター
  
  #37927
  hidekichiさんも書かれていますが、Can I use… で動作環境を確かめてみてください。
- 2016年4月30日 5:48 PM #40252
  みさみさ
  ゲスト
  お返事ありがとうございます！
  また、お礼が遅れてしまい申し訳ございません。
  
  教えていただいたCSSを参考にして実現できました。
  私の環境では以下のように記述するのがベストですた。
```
.left{
  padding: 0;
}
.right{
  padding: 0 0 0 5px;
  box-sizing: border-box;
  float: left;
  width: 50%;
}
```
  レスポンシブも確認できました。
  
  初歩的な質問をしてしまった事をお詫びいたします。
  もっとググって検証すべきでした。
  
  本当にありがとうございました！
投稿者

投稿