※自分用メモです
① ２等分(width・margin均等)
<!--### 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 halfItem bg-primary text-center"><h2class="title sampleTitle">タイトルがここに入ります</h2><imgclass="sampleImage u_circle"src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg"alt=""><pclass="descriptionMd sampleDescription text-left">テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
</p><buttononclick="location.href='#'"type="button"class="btn colorWhite sampleButton">まずはお問い合わせ</button></div><divclass="sampleItem halfItem bg-primary text-center"><h2class="title sampleTitle">タイトルがここに入ります</h2><imgclass="sampleImage u_circle"src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg"alt=""><pclass="descriptionMd sampleDescription text-left">テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
</p><buttononclick="location.href='#'"type="button"class="btn colorWhite sampleButton">まずはお問い合わせ</button></div><divclass="sampleItem halfItem bg-primary text-center"><h2class="title sampleTitle">タイトルがここに入ります</h2><imgclass="sampleImage u_circle"src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg"alt=""><pclass="descriptionMd sampleDescription text-left">テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
</p><buttononclick="location.href='#'"type="button"class="btn colorWhite sampleButton">まずはお問い合わせ</button></div><divclass="sampleItem halfItem bg-primary text-center"><h2class="title sampleTitle">タイトルがここに入ります</h2><imgclass="sampleImage u_circle"src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg"alt=""><pclass="descriptionMd sampleDescription text-left">テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
</p><buttononclick="location.href='#'"type="button"class="btn colorWhite sampleButton">まずはお問い合わせ</button></div></div></div></section><!--End sampleSection -->.halfItem{width:calc((100%-100px)/2);margin-right:100px;margin-bottom:40px;&:nth-of-type(2n){margin-right:0;}//スマホ時に2列にする場合は以下コメントアウトすればおk@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;}.sampleTitle{margin-bottom:30px;}.sampleImage{width:200px;height:200px;margin-bottom:30px;}.sampleDescription{margin-bottom:30px;}.sampleButton{border:1pxsolidred;background-color:blue;&:hover{color:#ffffff;}}② 左:テキスト 右:画像のレイアウト(margin均等)
<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">２分割レイアウト</h2><pclass="subHeading colorBlack">２分割レイアウト</p><pclass="mainMessage">テキストが改行される、画像はそのままの大きさ</p></div><divclass="sampleWrapper bg-info"><divclass="sampleItem01 bg-primary"><h2class="title sampleTitle">タイトルがここに入ります</h2><pclass="descriptionMd sampleDescription text-left">テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
</p><buttononclick="location.href='#'"type="button"class="btn colorWhite sampleButton">まずはお問い合わせ</button></div><divclass="sampleItem02 bg-primary"></div></div></div></section><!--End sampleSection -->.sampleWrapper{display:flex;align-items:center;@includemq('tab_sm'){flex-wrap:wrap;//ipadサイズ以下から1列に表示}@includemq('sp_lg'){flex-wrap:wrap;}@includemq('sp_sm'){flex-wrap:wrap;}}.sampleItem01{padding:20px;margin-right:60px;max-width:700px;@includemq('tab_sm'){order:2;//ipadサイズ以下から画像を上にするmargin:0auto;//ipadサイズ以下からテキスト中央寄せ}@includemq('sp_lg'){order:2;margin:0auto;}@includemq('sp_sm'){order:2;margin:0auto;}}.sampleTitle{margin-bottom:30px;}.sampleImage{width:200px;height:200px;margin-bottom:30px;}.sampleDescription{margin-bottom:30px;}.sampleButton{border:1pxsolidred;background-color:blue;&:hover{color:#ffffff;}}.sampleItem02{height:400px;min-width:400px;//これで以下のサイズにはならない(※レスポンシブで調整が必要)background-image:url(http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg);background-repeat:no-repeat;object-fit:cover;background-position:center;@includemq('tab_sm'){margin:0auto;//ipadサイズ以下から画像中央寄せ}@includemq('sp_lg'){margin:0auto;min-width:100%;//スマホサイズ以下からinner幅w100%height:300px;//スマホサイズ以下から少し画像の高さ調整}@includemq('sp_sm'){margin:0auto;min-width:100%;height:300px;}}③ 左:画像 右:テキストのレイアウト(margin均等)
<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">２分割レイアウト</h2><pclass="subHeading colorBlack">２分割レイアウト</p><pclass="mainMessage">テキストが改行される、画像はそのままの大きさ</p></div><divclass="sampleWrapper bg-info"><divclass="sampleItem01 bg-primary"></div><divclass="sampleItem02 bg-primary"><h2class="title sampleTitle">タイトルがここに入ります</h2><pclass="descriptionMd sampleDescription text-left">テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
テキストがここに入りますテキストがここに入ります
</p><buttononclick="location.href='#'"type="button"class="btn colorWhite sampleButton">まずはお問い合わせ</button></div></div></div></section><!--End sampleSection -->.sampleWrapper{display:flex;align-items:center;@includemq('tab_sm'){flex-wrap:wrap;//ipadサイズ以下から1列に表示}@includemq('sp_lg'){flex-wrap:wrap;}@includemq('sp_sm'){flex-wrap:wrap;}}.sampleItem01{height:400px;min-width:400px;//これで以下のサイズにはならない(※レスポンシブで調整が必要)margin-right:60px;background-image:url(http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg);background-repeat:no-repeat;object-fit:cover;background-position:center;@includemq('tab_sm'){margin:0auto;//ipadサイズ以下から画像中央寄せ}@includemq('sp_lg'){margin:0auto;min-width:100%;//スマホサイズ以下からinner幅w100%height:300px;//スマホサイズ以下から少し画像の高さ調整}@includemq('sp_sm'){margin:0auto;min-width:100%;height:300px;}}.sampleItem02{padding:20px;max-width:700px;@includemq('tab_sm'){order:2;//ipadサイズ以下から画像を上にするmargin:0auto;//ipadサイズ以下からテキスト中央寄せ}@includemq('sp_lg'){order:2;margin:0auto;}@includemq('sp_sm'){order:2;margin:0auto;}}.sampleTitle{margin-bottom:30px;}.sampleImage{width:200px;height:200px;margin-bottom:30px;}.sampleDescription{margin-bottom:30px;}.sampleButton{border:1pxsolidred;background-color:blue;&:hover{color:#ffffff;}}