scss,Code片段,代码实例,代码示例,代码片段库

scss レスポンシブ：延胡索リストを横并びに

レスポンシブ：リスト

.markdown

レスポンシブ：リスト
----------


A [Pen](https://codepen.io/anonie/pen/dybRzvE) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/dybRzvE/license).

index.html

<div class="inner sec-name">
	<ul class="p-list-row">
		<dl class="__item">
			<dt>dt</dt>
			<dd>dd</dd>
		</dl>
		<dl class="__item">
			<dt>dt</dt>
			<dd>dd</dd>
		</dl>
		<dl class="__item">
			<dt>dt</dt>
			<dd>dd</dd>
		</dl>
		<dl class="__item">
			<dt>dt</dt>
			<dd>dd</dd>
		</dl>
	</ul>
</div>

style.scss

*, *::before, *::after {  box-sizing: border-box; }

$breakpoints: (
	sp: "only screen and (max-width: 559px)",
	tb: "only screen and (max-width: 959px)",
	pc: "only screen and (min-width: 960px)"
);
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

body { background: #eee; }
.flex { display: flex; }
.inner {
  width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用

.item01 {  // 視認性用
	border: 3px solid #aaa;
}
.item02 {  // 視認性用
	border: 3px solid #ccc;
}



/// 以下モジュール -----------------------------

@charset "UTF-8";

/// 設定 -----------------------------
$border-color: #ccc;

/// html -----------------------------
// <div class="sec-name">
// 	<ul class="p-list-row">
// 		<dl clas="__item">
// 			<dt>dt</dt>
// 			<dd>dd</dd>
// 		</dl>
// 	</ul>
// </div>


/// 共通レイアウトベース ---------------------------------
.p-list-row {
	.__item {
		display: flex;
		@include media(sp) {
			display: block;
		}
		dt {
			width: 100%;
			@include media(sp) {
				max-width: 100%;
			}
		}
		dd {
			width: 100%;
			@include media(sp) {
				line-height: 1.4;
			}
		}
	}
}

/// 共通ベーススタイル ---------------------------------
%p-list-row {
	.__item {
		padding: 2em 5em;
		border-top: 1px solid rgba($border-color, 0.3);
		@include media(sp) {
			padding: 1.25em 0.5em;
			line-height: 1.75;
		}
		&:last-child {
			border-bottom: 1px solid rgba($border-color, 0.3);
		}
		dt {
			max-width: 10em;
			font-weight: bold;
		}
	}
}

/// 個別スタイル：about/クリニック情報 ---------------------------------
.sec-name .p-list-row {
	@extend %p-list-row;
}

scss レスポンシブ：テキストエリア固定，イメージエリア伸缩

レスポンシブ：テキストエリア固定，イメージエリア伸缩

.markdown

レスポンシブ：テキストエリア固定、イメージエリア伸縮
--------------------------


A [Pen](https://codepen.io/anonie/pen/PoYjWmV) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/PoYjWmV/license).

index.html

<div class="inner flex items">
	<div class="item01">
		item01
	</div>
	<div class="item02">
		item02
	</div>
</div>

<div class="inner flex items">
	<div class="item03">
		item03
	</div>
	<div class="item04">
		item04
	</div>
</div>

style.scss

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
  width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用

.items {
	position: relative;
}
.item01, .item03 {  // 視認性用
	border: 3px solid #aaa;
}
.item02, .item04 {  // 視認性用
	border: 3px solid #ccc;
}

.inner {
	width: calc( 100% - 200px );
	max-width: 1480px;
	@media screen and ( max-width: 767px ) {
		width: 84%;
		max-width: 100%;
	}
}
.item01 {
	z-index: 10;
	position: relative;
	width: 300px;
	height: 200px;
	@media screen and ( max-width: 767px ) {
		margin-top: 200px;
		width: 100%;
	}
}
.item02 {
	position: absolute;
	right: 0;
	width: calc( 100% - 300px - 50px );
	// width: 100%;
	// max-width: ( 1480px - ( 300px + 100px + 100px ) );
	height: 200px;
	@media screen and ( max-width: 767px ) {
		width: 100%;
	}
}

.item03 {
	position: absolute;
	left: -60px;
	width: calc( 100% - 300px - 50px + 60px );
	// width: 100%;
	// max-width: ( 1480px - ( 300px + 100px + 100px ) );
	height: 200px;
	@media screen and ( max-width: 767px ) {
		left: 0;
		width: 100%;
	}
}
.item04 {
	position: relative;
	width: 300px;
	height: 200px;
	margin-left: auto;
	@media screen and ( max-width: 767px ) {
		margin-top: 200px;
		width: 100%;
	}
}

scss matchSiblingH（）

非常适合弯曲的兄弟姐妹，50/50分裂。将`.matchit`添加到要调整高度的元素中。或者，只需`align-items / align-self：stretch`

js.js

 function matchSiblingH() {
    $(".matchit").css("height", ($(".matchit").parent().children('div').not('.matchit').outerHeight()));
  }

css.scss

.container {
  display: flex;
  flex-direction: row;
  .item {
    align-self: stretch;
    flex-basis: 50%;
    height: auto;
  }
}

scss matchSiblingH（）

非常适合弯曲的兄弟姐妹，50/50分裂。将`.matchit`添加到要调整高度的元素中。或者，只需`align-items / align-self：stretch`

js.js

 function matchSiblingH() {
    $(".matchit").css("height", ($(".matchit").parent().children('div').not('.matchit').outerHeight()));
  }

css.scss

.container {
  display: flex;
  flex-direction: row;
  .item {
    align-self: stretch;
    flex-basis: 50%;
    height: auto;
  }
}

scss button.scss |对象/部件

_button.scss

@charset "UTF-8";

// プロジェクト依存設定 ------------------------------------
$color-primary : $color-main; // プライマリカラーの設定
$color-secondary : $color-deep; // セカンダリカラーの設定
$color-light : #fff; // ライトカラーの設定
$line-height : 2.5; // line-height(≒ボタンの高さ)の設定
$border-width : 2px; //ボタンの枠の太さ
//  -----------------------------------------------------

%c-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: $line-height;
	border-width: $border-width;
	border-style: solid;
		&.--radius {
			@extend %c-btn;
			border-radius: 100px;
		}
}

.c-btn {
	&--primary {
		@extend %c-btn;
		border-color: $color-primary;
		background: $color-primary;
		color: $color-light;
		@at-root a#{&}:hover {
			background: $color-light;
			color: $color-primary;
		}
	}
	&--secondary {
		@extend %c-btn;
		border-color: $color-secondary;
		background: $color-secondary;
		color: $color-light;
		@at-root a#{&}:hover {
			background: $color-light;
			color: $color-secondary;
		}
	}
	&--light {
		@extend %c-btn;
		border-color: $color-light;
		background: $color-light;
		&.--primary {
			color: $color-primary;
		}
		&.--secondary {
			color: $color-secondary;
		}
		@at-root a#{&}:hover {
			color: $color-light;
			&.--primary {
				border-color: $color-primary;
				background: $color-primary;
			}
			&.--secondary {
				border-color: $color-secondary;
				background: $color-secondary;
			}
		}
	}
	&--colorless {
		@extend %c-btn;
		background: none;
		&.--primary {
			border-color: $color-primary;
			color: $color-primary;
		}
		&.--secondary {
			border-color: $color-secondary;
			color: $color-secondary;
		}
		&.--light {
			border-color: $color-light;
			color: $color-light;
		}
		@at-root a#{&}:hover {
			opacity: .8;
		}
	}
}
.--bdr-hover--white {
	@at-root a#{&}:hover {
		border-color: $color-light;
	}
}

scss レスポンシブ：リスト

レスポンシブ：リスト

.markdown

レスポンシブ：リスト
----------


A [Pen](https://codepen.io/anonie/pen/ZEzKRjY) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/ZEzKRjY/license).

index.html

<div class="inner">
  <div class="p-update-list">
  <ul>
    <li class="p-update-list__item"><div class="p-update-list__date">2019.05.30</div><div class="p-update-list__cate">カテゴリ</div><h2 class="p-update-list__link"><a href="#">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまもむめもらりるれろわをんあいうえおかきくけこさしすせそ</a></h2></li>
    <li class="p-update-list__item"><div class="p-update-list__date">2019.05.30</div><div class="p-update-list__cate">カテゴリ</div><h2 class="p-update-list__link"><a href="#">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまもむめもらりるれろわをんあいうえおかきくけこさしすせそ</a></h2></li>
    <li class="p-update-list__item"><div class="p-update-list__date">2019.05.30</div><div class="p-update-list__cate">カテゴリ</div><h2 class="p-update-list__link"><a href="#">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまもむめもらりるれろわをんあいうえおかきくけこさしすせそ</a></h2></li>


  </ul>
  </div>
</div>

style.scss

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem; } // 視認性用

.p-update-list__item { // li
  display: flex;
  align-items: center;
  margin: 1em 0;
  height: 1em;
  @media only screen and (max-width: 767px) {
    display: block;
    margin: 1.5em 0;
    height: 3em;
  }
}
.p-update-list__date {
  display: inline-block;
  min-width: 6.5em;
  // @media only screen and (max-width: 767px) {
  //   width: auto;
  // }
}
.p-update-list__cate {
  display: inline-block;
  min-width: 10em;
  background: #ccc;
  font-size: 70%;
  padding: 0.5em 3em;
  @media only screen and ( min-width: 768px ) {
      margin-right: 2em;
  }
}
.p-update-list__link { // h2
  display: inline-block;
  overflow: hidden;
  width: auto;
  height: 1em;
  @media only screen and (max-width: 767px) {
    width: 100%;
    margin-top: 0.5em;
  }
}
.p-update-list__link > a {
  display: inline-block;
}

scss インナー超えボックス

インナー超えボックス

.markdown

インナー超えボックス
----------


A [Pen](https://codepen.io/anonie/pen/zYOwZeV) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/zYOwZeV/license).

index.html

<div class="inner">
	<div class="item01">inner normal</div>
	<div class="item02">inner large</div>
</div>

style.scss

html { background: #eee; }
*, *::before, *::after {
	box-sizing: border-box;
}
.inner {
	width: 900px;
	margin: 0 auto;
}
.inner { background: #fff; padding: 3rem 0; } // 視認性用

.item01 { // 視認性用
	border: 3px solid #ccc;
	margin-bottom: 3rem;
	height: 50px;
}
.item02 {
	width: 120%;
	margin-right: -10%;
	margin-left: -10%;
}
.item02 { // 視認性用
	border: 3px solid #ccc;
	height: 50px;
}

scss SCSSネスト

.scss


// 自クラスに要素をプラス
.c-btn {
	&--primary {
		color: red;
		@at-root a#{&}:hover {
			color: blue;
		}
	}

scss imgarea，txtarea

imgarea，txtarea

imgarea-txtarea.markdown

imgarea, txtarea
----------------


A [Pen](https://codepen.io/anonie/pen/qBWmEwO) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/qBWmEwO/license).

index.html

<div class="inner inner-lg">
	<div class="items">
		
		<div class="item">
			<div class="flex u-sp-flex-reset">
				<div class="imgarea"><img src="" alt="image"></div>
				<div class="txtarea">
					<h1>見出し見出し見出し</h1>
					<div class="text">
						テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
					</div>
				</div>
			</div>
		</div>
		
		<div class="item flex">
			<div class="imgarea"><img src="" alt="image"></div>
			<div class="txtarea">
				<h1>見出し見出し見出し</h1>
				<div class="text">
					テキストテキストテキストテキストテキスト					テキストテキストテキストテキストテキスト
					テキストテキストテキストテキストテキスト
					テキストテキストテキストテキストテキスト

				</div>
			</div>
		</div>
		
	</div>
</div>

style.scss

*, *::before, *::aftr {
	box-sizing: border-box;
}
.flex {
	display: flex;
}

@media screen and (max-width: 767px) {
	.u-sp-flex-reset {
			display: block;
			overflow: hidden;
	}
}
.inner {
	width: calc( 100% - 256px);
	max-width: 1200px;
	margin: 0 auto;
	background: #eee;
}
@media screen and (max-width: 1520px) and (min-width: 1281px) {
	.inner {
    width: calc(100% - 216px);
	}
}
@media screen and (max-width: 1280px) and (min-width: 768px) {
	.inner {
			width: calc(100% - 184px);
	}
}
@media screen and (max-width: 767px) {
.inner {
    width: 84%;
    max-width: 100%;
	}
}
.inner-lg {
	max-width: 1480px;
}

.items {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.item {
	width: calc( 100% / 2 - 60px );
	// max-width: 420px;
}
.item {
	border: 3px solid #ccc;
	background: #fff;
	height: 200px;
	margin-bottom: 80px;
}
@media screen and (max-width: 1279px) and (min-width: 768px) {
	.item {
			width: 100%;
			max-width: 100%;
			margin-bottom: 24px;
	}
}
@media screen and (max-width: 767px) {
	.item {
			width: 100%;
			max-width: 100%;
			margin-bottom: 24px;
	}
}

.imgarea {
	width: calc( 100% - 320px );
}
@media screen and (max-width: 767px) {
	.imgarea {
		width: 72px;
		height: 72px;
		float: right;
		border-radius: 50%;
		margin: 0 0 8px 16px;
	}
}
.txtarea {
	width: 280px;
}
.item .textarea {
	max-width: 520px;
}
@media screen and (max-width: 767px) {
	.item .txtarea {
			width: 100%;
			margin: 0;
	}
}
.imgarea {
	background: #eee;
}

scss IE Min-Height Flex Fix

当IE拒绝在具有最小高度的容器中垂直居中内容时使用。

ie-min-height-flex-fix

&:after {
  content: '';
  min-height: inherit;
  font-size: 0;
}