Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8944
↧

【css】【flexbox】レイアウト３分割

September 6, 2020, 4:27 am
$
0
0

※自分用メモです

①　３等分レイアウト（marginなし）

スクリーンショット 2020-09-06 19.42.13.png
スクリーンショット 2020-09-06 19.42.25.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem_noGutter bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem_noGutter bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem_noGutter bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.trisectionItem{width:calc(100%/3);@includemq('sp_lg'){width:100%;&:last-of-type{margin-bottom:0px;}}@includemq('sp_sm'){width:100%;&:last-of-type{margin-bottom:0px;}}}.sampleItem{padding:20px;}

②　３等分レイアウト（margin均等）

スクリーンショット 2020-09-06 19.44.58.png
スクリーンショット 2020-09-06 19.45.12.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.sampleWrapper.trisectionItem{width:calc((100%-200px)/3);margin-right:calc(200px/2);margin-bottom:40px;&:nth-of-type(3n){margin-right:0;}@includemq('sp_lg'){width:100%;margin-right:0;margin-bottom:40px;&:last-of-type{margin-bottom:0px;}}@includemq('sp_sm'){width:100%;margin-right:0;margin-bottom:40px;&:last-of-type{margin-bottom:0px;}}}.sampleItem{padding:20px;}

③　３等分レイアウト（margin均等＋アイテム間に線）

スクリーンショット 2020-09-06 19.54.06.png
スクリーンショット 2020-09-06 20.02.50.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.sampleWrapper.trisectionItem{width:calc((100%-300px)/3);margin-right:calc(300px/2);margin-bottom:50px;&:nth-of-type(3n){margin-right:0;}@includemq('tab_sm'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}@includemq('sp_lg'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}@includemq('sp_sm'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}}.sampleItem.line_between{position:relative;&:after{content:"";position:absolute;display:block;top:38%;//少し上下調整right:calc(-150px/2);height:40px;width:2px;background-color:red;}//３番目は非表示&:nth-of-type(3n){&:after{content:none;}}//ipad以下サイズでは非表示@includemq('tab_sp'){&:after{content:none;}}@includemq('sp_lg'){&:after{content:none;}}@includemq('sp_sm'){&:after{content:none;}}}.sampleItem{padding:20px;}

④　３等分レイアウト PC３列 タブレット２列スマホ１列 （margin均等）

スクリーンショット 2020-09-06 20.10.25.png
スクリーンショット 2020-09-06 20.10.45.png
スクリーンショット 2020-09-06 20.10.53.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test04">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test05">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test06">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test07">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test08">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test09">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test10">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test11">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test12">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.sampleWrapper.trisectionItem{//PCは3列表示width:calc((100%-300px)/3);margin-right:calc(300px/2);margin-bottom:50px;&:nth-of-type(3n){margin-right:0;}//タブレットでは2列表示@includemq('tab_sm'){width:calc((100%-100px)/2);margin-right:100px;margin-bottom:50px;&:nth-of-type(2n){margin-right:0;}&:nth-of-type(3n){margin-right:100px;}&:nth-of-type(6n){margin-right:0;}}//スマホでは1列表示@includemq('sp_lg'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}@includemq('sp_sm'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}}.sampleItem{padding:20px;}

⑤　３等分レイアウト PC３列 タブレット２列スマホ2列 （margin均等）

スクリーンショット 2020-09-06 20.25.37.png
スクリーンショット 2020-09-06 20.25.44.png
スクリーンショット 2020-09-06 20.25.53.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-primary"><pclass="test04">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-secondary"><pclass="test05">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-success"><pclass="test06">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.sampleWrapper.trisectionItem{width:calc((100%-100px)/3);margin-right:calc(100px/2);margin-bottom:30px;&:nth-of-type(3n){margin-right:0;}//タブレットは２列@includemq('tab_sm'){width:calc((100%-100px)/2);margin-right:100px;margin-bottom:30px;&:nth-of-type(2n){margin-right:0;}&:nth-of-type(3n){margin-right:100px;}&:nth-of-type(6n){margin-right:0;}}//スマホも２列@includemq('sp_lg'){width:calc((100%-40px)/2);margin-right:40px;//アイテム間隔調整margin-bottom:30px;&:nth-of-type(2n){margin-right:0;}&:nth-of-type(3n){margin-right:40px;//アイテム間隔調整}&:nth-of-type(6n){margin-right:0;}}@includemq('sp_sm'){width:calc((100%-40px)/2);margin-right:40px;//アイテム間隔調整margin-bottom:30px;&:nth-of-type(2n){margin-right:0;}&:nth-of-type(3n){margin-right:40px;//アイテム間隔調整}&:nth-of-type(6n){margin-right:0;}}}.sampleItem{padding:20px;}
↧
Search
Viewing all articles
Browse latest Browse all 8944

Trending Articles

和歌山市でマンションの部屋全焼

September 8, 2015, 7:23 pm

更新プログラムがインストールされません

July 11, 2015, 4:06 am

井上貴博アナウンサー彼女や結婚の噂は？実家や親が話題？人気は？

September 15, 2013, 1:59 am

宇宙運命数「８」　はくちょう座

September 23, 2018, 7:32 pm

カラオケ鉄板ネタになるの間違いなし「大塚愛から福原愛」って何！？

December 2, 2016, 11:00 pm

2016年1月22日号　山口銀行（1月4日付）

January 22, 2016, 3:58 am

人気占い師・Sakkoが占う！今日のアナタの運勢と、ラッキーカラーは・・・

October 16, 2019, 2:30 pm

サキュバス戦記　攻略

February 18, 2019, 9:27 am

この記事は表示できません

August 23, 2019, 6:15 pm

【ネタバレ感想】「7人目のスタンド使い」その18

August 2, 2016, 8:00 pm

上海問屋、7色に切り替えられるアイソレーションキーボード

August 3, 2014, 2:00 pm

【変更対戦カードのお知らせ】7.23『アマチュア全日本選手権大会』

July 18, 2017, 1:47 am

Microsoft、最も議論を呼んだWindows 11のタスクバーの問題を修正中

December 28, 2021, 5:14 pm

野口興業（弘道会/山口組）

December 13, 2015, 11:12 pm

エンタープライズ モードの設定方法について

August 29, 2014, 5:07 am

【ディズニーランドパリ】日本にないオススメアトラクション13選【ウォルトディズニースタジオ】

February 21, 2019, 5:31 am

サマータイムレンダ01

April 14, 2022, 8:34 am

Article 2

September 27, 2025, 5:31 pm

【世界大学ランキング】 第１位にジュリアード音楽院とウィーン国立音大、日本勢は？

August 23, 2019, 1:32 am

株式会社アルテカ　代表　野村 紘一

March 15, 2018, 12:16 am
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>