Skip to content

Instantly share code, notes, and snippets.

@maru0014
Created Nov 4, 2015
Embed
What would you like to do?
レスポンシブ対応等幅リストCSS
@charset "utf-8";
/***********************************************************
レスポンシブ対応リストタグ等幅カラムスタイルシート
記述順:
スマートフォン
タブレット@media screen and (min-width: 641px)
PC@media screen and (min-width: 981px)
使用方法:
リストタグのulへ該当するクラス名を記述すれば等幅カラム割が適用される。
例 <ul class="column2-3-4"> と書けば スマホ→二列/タブレット→3列/PC→4列となる。
なお、ulは幅100%指定されているため、
全体の幅を固定するには、divなどで親要素を作りサイズを指定する。
li要素に余白を付ける場合は別途padding指定。
marginを付けたい場合はwidthの修正(margin分を差引く)が必要。
*******************************************************/
/*リセット*/
.column1-2-3, .column2-3-4, .column3-4-5, .column2-2-2,
.column3-3-3, .column4-4-4, .column5-5-5, .column6-6-6,
.column7-7-7, .column8-8-8 {
display: inline-block;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
/*li要素 縦の余白*/
.column1-2-3 li, .column2-3-4 li, .column3-4-5 li,
.column2-2-2 li, .column3-3-3 li, .column4-4-4 li,
.column5-5-5 li, .column6-6-6 li, .column7-7-7 li,
.column8-8-8 li {
float: left;
margin-bottom: 5px;
box-sizing: border-box;
}
/* 1カラム */
.column1-1-1 li, .column1-2-3 li {
width: 100%;
}
/* 2カラム */
.column2-2-2 li, .column2-3-4 li {
/*calc未対応Browser用*/
width: 50%;
/*Modern Browser用*/
width: calc(100% / 2);
}
/* 3カラム */
.column3-3-3 li, .column3-4-5 li {
width: 33.33333%;
width: calc(100% / 3);
}
/* 4カラム */
.column4-4-4 li {
width: 25%;
width: calc(100% / 3);
}
/* 5カラム */
.column5-5-5 li {
width: 20%;
width: calc(100% / 5);
}
/* 6カラム */
.column6-6-6 li {
width: 16.666666%;
width: calc(100% / 6);
}
/* 7カラム */
.column7-7-7 li {
width: 14.2857142857%;
width: calc(100% / 7);
}
/* 8カラム */
.column8-8-8 li {
width: 12.5%;
width: calc(100% / 8);
}
/*タブレット用
*******************************/
@media screen and (min-width: 641px) {
.column1-2-3 li {
width: 50%;
width: calc(100% / 2);
}
.column2-3-4 li {
width: 33.33333%;
width: calc(100% / 3);
}
.column3-4-5 li {
width: 25%;
width: calc(100% / 3);
}
}
/*PC用
*******************************/
@media screen and (min-width: 981px) {
.column1-2-3 li {
width: 33.33333%;
width: calc(100% / 3);
}
.column2-3-4 li {
width: 25%;
width: calc(100% / 4);
}
.column3-4-5 li {
width: 20%;
width: calc(100% / 5);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment