背景を斜めに区切ったレイアウトにする方法を紹介します。
色々なやり方がありますが、画像を使わずCSSのみでできる２パターンを紹介します。

目次

• 参考サイト例
• borderを使った方法
• transform: skew を使った方法
• 最後に

参考サイト例

斜めに区切るレイアウトを使っているサイトをピックアップしてみました。
よければご覧ください。

・有休調整さん presented by Club Med×調整さん

・+graph Cloud & Agent

実装方法

borderを使った方法

borderで三角形を作る仕組みを利用して、セクション間に配置する方法です。
セクションに擬似要素（before,after）で三角形を作ります。

背景画像を使った方法と同じく、ブラウザサイズによって、三角形の形が多少伸縮するので、角度が変わると困る場合は 気をつけてください。

※三角形の作り方が よくわからない人は、「三角形の作り方」を書いているページがあるので、ご覧ください。
「CSSで三角形をつくる方法 | たねっぱ！」

    <div class="section1">
      <p>コンテンツ</p>
    </div>

    <div class="section2">
      <p>コンテンツ</p>
    </div>
    

    .section1,
    .section2{
      /*レイアウト用のCSS*/
      padding: 50px;
    }
    .section1{
      position: relative;

      /*レイアウト用のCSS*/
      background-color: pink;
    }
    .section1::before{
      content:"";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;

      /*ここで三角形のサイズを決める。
      必ず幅100vwにして、ブラウザサイズいっぱいにしてください。*/
      border-width: 0 0 100px 100vw ;

      border-color: transparent transparent #fff transparent;
    }
    

transform: skew を使った方法

transform: skew を使って、セクションの擬似要素に平行四辺形を作り、配置する方法です。

    <div class="section1">
      <p>コンテンツ</p>
    </div>

    <div class="section2">
    	<p>コンテンツ</p>
    </div>
    

    .section1,
    .section2{
      padding: 50px 30px;
    }

    .section1 {
      background:pink;
    }
    .section2 {
      position: relative;
      z-index: 0;
    }
    .section2::after{
      content: '';
      position: absolute;
      left:0;
      top: 0;

      /*四角形を傾けます*/
      transform: skewY(-5deg);
      transform-origin: bottom left;

      z-index: -1;
      width:100%;
      height:100%;
      background:#fff;
    }
    

最後に

webサイトではよく見かけるレイアウトなので、チャレンジしてみてください♪

順番を入れ替えたり、子要素の伸縮率でを指定したり。flexアイテムに指定できるプロパティをまとめて紹介します。

目次

• ベースのHTML
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
• まとめ

ベースのHTML

今回はul、liを使って紹介します。他のタグでももちろんOKです。

		<ul class="sample">
			<li class="item01">1</li>
			<li class="item02">2</li>
			<li class="item03">3</li>
		</ul>
		

		.sample{
			display: flex;
		}
		

また、今回はflexアイテムに対して指定するプロパティについて紹介します。

order

flexアイテムの順番を変えられます。マイナスの数値も可能。初期値は０です。

		.item01 { order: -1;}
		.item02 { order: 3;}
		.item03 { order: 0;}
		.item04 { order: 2;}
		.item05 { order: 1;}
		

• 1
• 2
• 3
• 4
• 5

flex-grow

flexコンテナーにスペースがある場合、flexアイテムの伸びる比率を指定できます。

		.item01 { flex-grow: 1;}
		.item02 { flex-grow: 2;}
		.item03 { flex-grow: 0;}
		

• 1
• 2
• 3

flex-shrink

flex-growとは真逆のプロパティです。flexコンテナーにスペースがない場合、flexアイテムの縮む比率を指定できます。初期値は０です。

		.item01 { flex-shrink: 1;}
		.item02 { flex-shrink: 2;}
		.item03 { flex-shrink: 0;}
		

• 1
• 2
• 3

flex-basis

flexアイテムの幅を、widthと同じように決めることができます。初期値はautoです。

		.item01 { flex-basis: 1;}
		.item02 { flex-basis: 2;}
		.item03 { flex-basis: 0;}
		

• 1
• 2
• 3

flex

「flex-grow」、「flex-shrink」、「flex-basis」の順でまとめて指定できるショートハンドです。

		/*記述例*/
		.item01 { flex: 1 0 40%;}
		

align-self

align-itemと同じように垂直方向の指定ができますが、flexアイテムに対してになります。また、flexコンテナーの指定（align-item）よりも優先されます。

		.item01 { align-self: center;}
		.item02 { align-self: flex-end;;}
		.item03 { height: 150px;}
		

• 1
• 2
• 3

まとめ

いかがでしたか？
今回はflexアイテム編でしたが、よければこちらも合わせて読んでみてくださいね。
「Flexible Boxについて（flexコンテナー編）」それでは、みなさん善きコーディングライフを♪

簡単に横並びや、中央寄せができたり。便利なプロパティがたくさんあるので、振り返るのにも役立つようにまとめてみます！

目次

• ベースのHTML
• display: flex;
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

ベースのHTML

今回はul、liを使って紹介します。他のタグでももちろんOKです。

		<ul class="sample">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		

• 1
• 2
• 3
• 4
• 5

display: flex;

親要素に指定するだけで、中にある子要素が横並びになります。

display: flex;を親要素に書くことで、親要素に当たる部分（今回ならul）が「flexコンテナー」、その中にある子要素（今回はli）が「flexアイテム」となります。ざっくり名前だけでも覚えておくと良いと思います。

• 1
• 2
• 3
• 4
• 5

		.sample {
			display: flex;
		}
		

		/*インライン要素に使う場合は、こちらを指定します。*/
		.sample {
			display: inline-flex;
		}
		

flex-direction

「flex-direction」は、flexアイテムが並ぶ方向を指定できます。たて・よこ方向があります。

row

左から右へ（初期値）

		.sample {
			display: flex;
			flex-direction: row;
		}
		

• 1
• 2
• 3
• 4
• 5

row-reverse

右から左へ

		.sample {
			display: flex;
			flex-direction: row-reverse;
		}
		

• 1
• 2
• 3
• 4
• 5

column

上から下へ

		.sample {
			display: flex;
			flex-direction: column;
		}
		

• 1
• 2
• 3
• 4
• 5

column-reverse

下から上へ

		.sample {
			display: flex;
			flex-direction: column-reverse;
		}
		

• 1
• 2
• 3
• 4
• 5

flex-wrap

「flex-wrap」は、１行で並んでいるflexアイテムの折り返しの有無と、並ぶ方向を指定できます。

nowrap

折り返ししない（初期値）

				.sample {
					display: flex;
					flex-wrap: nowrap;
				}
				

• 1
• 2
• 3
• 4
• 5

wrap

折り返しをする

				.sample {
					display: flex;
					flex-wrap: wrap;
				}
				

• 1
• 2
• 3
• 4
• 5

wrap-reverse

下から上方向に、折り返しをする

				.sample {
					display: flex;
					flex-wrap: wrap-reverse;
				}
				

• 1
• 2
• 3
• 4
• 5

flex-flow

「flex-direction」と「flex-wrap」をまとめて指定できるショートハンドです。
flex-flow:のあとに、flex-directionの値　半角スペース flex-wrapの値の順に指定します。

flex-flow: （flex-direction）（flex-wrap）;

初期値は「row nowrap」です。

.sample {
	display: flex;
	flex-flow: row-reverse wrap;
}

• 1
• 2
• 3
• 4
• 5

justify-content

水平方向の揃え方の指定ができます。

flex-start

flexアイテムが左寄せで並びます。flex-startが初期値です。

.sample {
	display: flex;
	justify-content: flex-start;
}

• 1
• 2
• 3
• 4
• 5

flex-end

flexアイテムが下寄せで並びます。

.sample {
	display: flex;
	justify-content: flex-end;
}

• 1
• 2
• 3
• 4
• 5

center

flexアイテムが中央寄せで並びます。

.sample {
	display: flex;
	justify-content: center;
}

• 1
• 2
• 3
• 4
• 5

space-between

flexアイテムの最初と最後を両端に配置し、残りの要素は均等に間をあけて配置する。

.sample {
	display: flex;
	justify-content: space-between;
}

• 1
• 2
• 3
• 4
• 5

space-around

flexアイテムを全て均等に配置する。space-betweenとの違いは、最初と最後の要素の両側にも均等にスペースが入ります。

.sample {
	display: flex;
	justify-content: space-around;
}

• 1
• 2
• 3
• 4
• 5

align-items

垂直方向の揃え方の指定ができます。

stretch

初期値になります。flexアイテムの一番高い要素に合わせて 他のflexアイテムも高さが伸びるため、便利です。

.sample {
	display: flex;
	align-items: stretch;
}

• 1
• 2
• 3
• 4
• 5

flex-start

垂直方向に上寄せで配置します。

.sample {
	display: flex;
	align-items: flex-start;
}

• 1
• 2
• 3
• 4
• 5

flex-end

垂直方向に下側に配置します。

.sample {
	display: flex;
	align-items: flex-end;
}

• 1
• 2
• 3
• 4
• 5

center

垂直方向に中央に配置します。

.sample {
	display: flex;
	align-items: center;
}

• 1
• 2
• 3
• 4
• 5

baseline

flexアイテムのベースラインで揃えます。
※わかりやすくするため、それぞれ文字サイズを変えています。

.sample {
	display: flex;
	align-items: baseline;
}

• 1
• 2
• 3
• 4
• 5

align-content

flexアイテムが複数行あるとき、垂直方向の揃え方の指定ができます。

stretch

初期値になります。flexアイテムの一番高い要素に合わせて 他のflexアイテムも高さが伸びるため、便利です。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
}

• 1
• 2
• 3
• 4
• 5

flex-start

垂直方向に上寄せで配置します。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

flex-end

垂直方向に下側に配置します。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

center

垂直方向に中央に配置します。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

space-between

flexアイテムの最初と最後を上下両端に配置し、残りの要素は均等に行間をあけて配置する。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

space-around

flexアイテムを全て均等に配置する。space-betweenとの違いは、最初と最後の要素の上下にも均等にスペースが入ります。

.sample {
	display: flex;
	flex-wrap: wrap;
 	align-content: center;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

まとめ

いかがでしたか？
使い慣れるまで、どのプロパティだっけ？となるかもしれませんが・・、まずはよく使うものから覚えていけると良いと思います。フレックスボックスは便利な使い方が色々できるので、頑張って覚えていきましょー♪

目次

• はじめに
• ３列のとき
• ４列のとき
• 最後に

はじめに

Flexbox（justify-content: space-between、flex-wrap: wrap;）を使って並べると、最終行が下記のレイアウトになります。これを、均等配置のまま 最終行は左揃えにする方法を紹介します。

ベースになるHTML・CSS

		<ul class="sample">
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
		</ul>
		

		<style>
			ul.sample {
				max-width: 400px;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
		</style>
		

３列のとき

サンプル

		<ul class="sample">
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
		</ul>
		

		<style>
			ul.sample li {
				width: 26%;
			}

			ul.sample1::after {
				content: "";
				display: block;
				width: 26%;
				height: 0;
			}
		</style>
		

ポイント

ulのafter（一番後ろの位置）に、liと同じ幅（高さは不要）の擬似要素を入れることで、左寄せになります。

４列のとき

最後の行が２つのときのサンプル

最後の行が３つのときのサンプル

		<style>
			ul.sample li {
				width: 21%;
			}

			ul.sample::after,
			ul.sample::before {
				content: "";
				display: block;
				width: 21%;
				height: 0;
			}

			ul.sample::before {
				order: 1;
			}
		</style>
		

ポイント

３列のときと違うのは、afterだけでは要素が足りないので、beforeも使います。ここで気をつけないといけないのは、beforeにorderを指定して、順番を変えることです。

最後に

もし５列以上ある場合は、floatを使うか、javascriptで調整できます。
flexboxは便利なところもあり、今回のように調整が必要なところもあるので うまく使っていきたいですね(´▽`*)♪

左右交互になっているレイアウトを、Flexboxで作ってみましょう。

目次

• ベースになるHTML・CSS
• flex-directionを使ってみよう
• 最後に

ベースになるHTML・CSS

はじめに、下記のようなレイアウトを作ります。
テキストと写真をまとめて<li>で囲み、その部分に「display: flex;」をかけて横並びにしています。

• 

  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

• 

  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

• 

  テキストが入ります。テキストが入ります。テキストが入ります。

• 

  テキストが入ります。テキストが入ります。

		<style>
			ul {
				max-width: 600px;
			}

			ul li {
				display: flex;
				align-items: center;
			}


			ul li .photo,
			ul li .txt {
				width: 50%;
				box-sizing: border-box;
			}
		</style>


		<ul>
			<li>
				<p class="photo"><img src="https://unsplash.it/300/200?image=875" alt="Photo"></p>
				<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</li>
			<li>
				<p class="photo"><img src="https://unsplash.it/300/200?image=896" alt="Photo"></p>
				<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</li>
			<li>
				<p class="photo"><img src="https://unsplash.it/300/200?image=872" alt="Photo"></p>
				<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</li>
			<li>
				<p class="photo"><img src="https://unsplash.it/300/200?image=938" alt="Photo"></p>
				<p class="txt">テキストが入ります。テキストが入ります。</p>
			</li>
		</ul>
		

flex-directionを使ってみよう

<li>に「flex-direction: row-reverse;」を指定することで、flexアイテムが主軸と逆方向（右から左）へ配置されます。
これを奇数or偶数行にかけることで、互い違いのレイアウトができます。

		<style>
			/* 奇数の行に対して指定 */
			ul li:nth-child(odd) {
				flex-direction: row-reverse;
			}


			/* 必要に応じて余白つけてください */
			ul li:nth-child(odd) .txt {
				padding-right: 10px;
			}

			ul li:nth-child(even) .txt {
				padding-left: 10px;
			}
		</style>
		

• 

  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

• 

  テキストが入ります。テキストが入ります。テキストが入ります。

• 

  テキストが入ります。テキストが入ります。

• 

  テキストが入ります。

最後に

いかがでしたか？シンプルな形を例にしましたが、左右に振り分けたレイアウトはよくあると思いますので、チェックしてみてくださいね。

文字の左右に、水平線があるデザインってよくありますよね。
文字をspanで囲んだり、色々なやり方があるのですが…

htmlは触らずにするなら、flexboxを使うのがわかりやすいので紹介しますー！

水平線のひき方（flexboxを使った方法）

サンプル

サンプル

複数行になっても
大丈夫です

ソースコード

  <p class="sample">サンプルです</p>
  <p class="sample">複数行になっても<br>大丈夫です</p>
  

  <style>
    .sample{
      display: flex;  /* 横並びにする */
      align-items: center;  /* 垂直方向に中央 */
      text-align: center;  /* 文字のセンタリング(複数行になったとき用) */
    }


    /* 共通部分はまとめる */
    .sample::before,
    .sample::after{
      content:"";
      flex-grow: 1;  /* 線の伸び率 */
      border-bottom: 1px solid #333;
    }

    /* 左側の線 */
    .sample::before{
      margin-right: 10px;  /* 線と文字の間のスペース */
      padding-left: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
    }

    /* 右側の線 */
    .sample::after{
      margin-left: 10px;  /* 線と文字の間のスペース */
      padding-right: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
    }
  </style>
  

ポイント解説＆まとめ

左右の線の部分（::afterと::before）にflex-grow: 1;を記載する部分がポイントです！
これがないと、左右の線が伸縮してくれないので、忘れずにつけてくださいね。
↓※サンプルです

flex-growがないver

あとは、コード部分にコメントを入れているので、わかりづらいところは読んでみてください。

また、よく見るシリーズ（？）の紹介などもしていきますね。それでは、みなさん良いコーディングライフを〜(・ω・)ノ

参考記事

・flex-growプロパティの意味と使い方

CSSの中央寄せでつまずいた経験、みなさんありますよね…？
こちらの記事「CSSで中央寄せにする方法まとめ」を見に来てくださる方が多かったので、つまづいてる人も多いんだと思います＞＜

やり方もいっぱいあって、状況によってやり方も変わりますし。最近では、flexboxもよく見るようになりましたよね。

ということで、先ほどの記事に追加という形で、紹介していきます♪

Flexboxを使った中央寄せ

Flexboxなら、CSSの量も少なく、インライン要素もブロック要素でもOK！
また、中央に寄せたい要素のwidth指定がなくても使えるため、レスポンシブしやすいです。

注意点としては、flexboxのプロパティを使う場合は、diplay:flex;を親要素にかける必要があること。 また、IE10までの古いブラウザなどは非対応になります。

ボックスを中央寄せ

          <div class="wrap">
            <div class="centerBox"></div>
          </div>

          <style>
            .wrap{
              display: flex;
              justify-content: center;
            }

            /* ボックス */
            .wrap .centerBox{
              width: 100px;
              height: 150px;
              background-color: hotpink;
            }
          </style>
          

テキストの中央寄せ

          <div class="wrap">
            <p class="txt">中央寄せ</p>
          </div>

          <style>
            .wrap{
              display: flex;
              justify-content: center;
            }

            /* テキスト */
            .wrap .txt{
              color: hotpink;
            }
          </style>
          

上下中央にする（おまけ）

          <div class="wrap">
            <div class="centerBox"></div>
          </div>

          <style>
          .wrap{
            /* 枠 */
            height: 200px;
            width: 100%;

            display: flex;
            justify-content: center;
            align-items: center;
          }

          .wrap .centerBox{
            width: 100px;
            height: 100px;
            background-color: hotpink;
          }
          </style>
          

transformを使った中央寄せ

こちらも、インライン要素、ブロック要素どちらでもOK！
また、中央に寄せたい要素のwidth指定がなくても使えるため、使いやすいのですが、親要素のサイズ幅を超えるとはみ出してしまうので気をつけてくださいね。

今までpositionを使った中央寄せは、要素のwidthの半分を計算してmargin-leftなどで寄せていましたが、transformを使うことで、同じことが簡単にできます。

ボックスを中央寄せ

          <div class="wrap">
            <div class="centerBox"></div>
          </div>

          <style>
            .wrap{
              /* 枠 */
              height: 150px;
              width: 100%;

              position: relative;
            }

            /* ボックス */
            .wrap .centerBox{
              position: absolute;
              top: 0;
              left: 50%;
              transform: translate(-50% , 0);

              width: 100px;
              height: 100px;
              background-color: orange;
            }
          </style>
          

ボックスを上下中央にする（おまけ）

          <style>
            .wrap{
              position: relative;
              height: 200px;
              width: 100%;
            }

            /* ボックス */
            .wrap .centerBox{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50% , -50%);

              width: 100px;
              height: 100px;
              background-color: orange;
            }
          </style>
          

最後に

やり方もいろいろありますが、その時の状況によって合っているやり方を考えるのが大切です。
PC用、SP用、もしくはレスポンシブが必要なのか・・・という部分も含め、わからないときは実際に試しながらやってみましょう♪

今回は「属性セレクタ」についてお話します。

外部リンクのものだけデザイン変更したい！とか、より細かい指定ができるようになります。

属性ってなに？

classと書いている部分が属性になります。
他にも、id、title、style、href、lang、dir、accesskey・・・なども同じように属性です。

属性セレクタのまとめ

では、例と合わせて紹介していきます。

E[foo]　“foo”属性を持つE要素

例：aタグがtitle属性を持っているとき、文字の色を変える

  <p><a href="#" title="taneppa">title属性あり</a></p>
  <p><a href="#">title属性なし</a></p>

  <style>
    a[title] {
      color: #8b6a4e;
      font-weight: bold;
    }
  </style>
  

E[foo="bar"]　“foo”属性の値が”bar”であるE要素

例：外部リンク（target=”_blank”）がついてるとき、文字の色を変える

<p><a href="#" target="_blank">target="_blank"あり</a></p>
<p><a href="#">なし</a></p>

<style>
  a[target="_blank"] {
    color: #8b6a4e;
    font-weight: bold;
  }
</style>

E[foo~=”bar”]　“foo”属性が空白区切りの値をとり、その値の1つが”bar”であるE要素

例：pタグがtaneというクラスを持っているとき、文字の色を変える

<p class="txt tane">クラス名：txt tane</p>
<p class="txt Tane">クラス名：txt Tane</p>
<p class="txt taneppa">クラス名：txt taneppa</p>

<style>
  p[class~="tane"] {
    color: #8b6a4e;
    font-weight: bold;
  }
</style>

E[foo^=”bar”]　“foo”属性の値が”bar”から始まるE要素

例：pタグに、taneで始まるクラス名があるとき、文字の色を変える

<p class="tane_txt">クラス名：tane_txt</p>
<p class="taneppa">クラス名：taneppa</p>
<p class="Tane">クラス名：Tane</p>

<style>
  p[class^="tane"]{
    color: #8b6a4e;
    font-weight: bold;
  }
</style>

E[foo$=”bar”]　“foo”属性の値が”bar”で終わるE要素

例： pタグに、taneで終わるクラス名があるとき、文字の色を変える

<p class="txt_tane">クラス名：txt_tane</p>
<p class="tane">クラス名：tane</p>
<p class="Tane">クラス名：Tane</p>

<style>
  p[class$="tane"]{
    color: #8b6a4e;
    font-weight: bold;
  }
</style>

E[foo|="en"] “foo”属性の値がハイフン区切りの値をとり、その値が”en”から始まるE要素

例： pタグに、taneというクラスがあるとき、文字の色を変える

<p class="txt_tane">クラス名：txt_tane</p>
<p class="tane">クラス名：tane</p>
<p class="Tane">クラス名：Tane</p>

<style>
  p[class|="tane"]{
    color: #8b6a4e;
    font-weight: bold;
  }
</style>

E[foo*="bar"]　foo属性の値にbarを含むE要素

例： aタグに、taneという文字を含むクラスがあるとき、文字の色を変える

<p class="txt_tane">クラス名：txt_tane</p>
<p class="tane">クラス名：tane</p>
<p class="Tane">クラス名：Tane</p>

<style>
  a[class*="tane"]{
    color: #8b6a4e;
    font-weight: bold;
  }
</style>

まとめ

いかがでしたか？
属性セレクタを使えば、まとめて指定できるようになり 便利なので、ぜひお役立てください♪

参考サイト

• 「Selectors Level 3 (W3C Recommendation 29 September 2011)」の日本語訳
• HTMLクイックリファレンス 属性セレクタ－スタイルシートリファレンス

目次

• はじめに
• １.丸
• ２.チェックマーク
• ３.矢印
• ４.四角
• ５.連番
• ６.特殊記号
• まとめ

<ul>
  <li>テキストが入ります。<br>改行しました。</li>
  <li>テキストが入ります。</li>
  <li>テキストが入ります。</li>
</ul>

<style>
  ul{
    font-size: 14px;
    line-height: 1.5;
  }

  li + li{
    margin-top: 5px;
  }
</style>

<style>
li{
  position: relative;
  padding-left: 15px;
}

li:before {
  content: "";
  position: absolute;
  top: .4em;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #8b6b4e;
  border-radius: 50%;
}
</style>

<style>
  li{
    position: relative;
    padding-left: 15px;
  }

  li:before {
    content: "";
    position: absolute;
    top: .4em;
    left: 0;
    width: 10px;
    height: 10px;
    border: 1px solid #8b6b4e;
    border-radius: 50%;
  }
</style>

<style>
  li{
    position: relative;
    padding-left: 15px;
  }

  li:before {
    content: "";
    position: absolute;
    top: .1em;
    left: 0;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    width: 5px;
    height: 10px;
    border-right: 3px solid #8b6b4e;
    border-bottom: 3px solid #8b6b4e;
  }
</style>

<style>
  li{
    position: relative;
    padding-left: 25px;
  }

  li:before {
    content: "";
    position: absolute;
    top: .35em;
    left: 6px;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    width: 3px;
    height: 7px;
    border-right: 2px solid #8b6b4e;
    border-bottom: 2px solid #8b6b4e;
  }

  li:after {
    content: "";
    position: absolute;
    top: .2em;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #8b6b4e;
    border-radius: 2px;
  }
</style>

<style>
  li{
    position: relative;
    padding-left: 10px;
  }

  li:before {
    content: "";
    position: absolute;
    top: .35em;
    left: 0;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #8b6b4e;
  }
</style>

<style>
  li{
    position: relative;
    padding-left: 10px;
  }

  li:before {
    content: "";
    position: absolute;
    top: .45em;
    left: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    border-top: 2px solid #8b6b4e;
    border-right: 2px solid #8b6b4e;
  }
</style>

<style>
  li{
   position: relative;
   padding-left: 15px;
  }

  li:before {
   content: "";
   position: absolute;
   top: .1em;
   left: -3px;
   width: 15px;
   height: 15px;
   border-top: 1px solid #fff;
   border-right: 1px solid #fff;
   border-radius: 50%;
   background-color: #8b6b4e;
  }

  li:after {
   content: "";
   position: absolute;
   top: .5em;
   left: 1px;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   width: 4px;
   height: 4px;
   border-top: 1px solid #fff;
   border-right: 1px solid #fff;
  }
</style>

<style>
  li{
    position: relative;
    padding-left: 15px;
  }

  li:before {
    content: "";
    position: absolute;
    top: .4em;
    left: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 7px;
    height: 7px;
    border-top: 2px solid #8b6b4e;
    border-right: 2px solid #8b6b4e;
  }

  li:after {
    content: "";
    position: absolute;
    top: .65em;
    left: 1px;
    width: 8px;
    height: 2px;
    background-color: #8b6b4e;
  }
</style>

<style>
  li{
    position: relative;
    padding-left: 15px;
  }

  li:before {
    content: "";
    position: absolute;
    top: .4em;
    left: 0;
    width: 7px;
    height: 7px;
    background-color: #8b6b4e;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
</style>

<style>
  li{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    padding: 0;
    /* sampleの文字は、自由に変更できます。※ただし、before側も合わせる */
    counter-increment: sample;
  }

  li:before {
    content: "("counter(sample)")";
    margin-right: 5px;
  }
</style>

<style>
  li{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: baseline;
    /* sampleの文字は、自由に変更できます。※ただし、before側も合わせる */
    counter-increment: sample;
  }

  li:before {
    content: counter(sample,upper-latin);
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-color: #8b6b4e;
    font-size: 12px;
    color: #fff;
    line-height: 20px;
    text-align: center;
  }
</style>

<style>
  li{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: baseline;
  }

  li:before {
    content: "\02665";
    margin-right: 5px;
    color: #8b6b4e;
  }
</style>