カテゴリー: CSS

レスポンシブ対応table レイアウトまとめ

CSSで出来るレスポンシブ対応を考えた table レイアウト

WEB DEVELOPMENTさん　http://www.unionnet.jp/develop/responsive-table-css/

リキッド・レイアウトでチェックボックスを綺麗に並べる

WebOS Goodiesさん　http://webos-goodies.jp/archives/51275332.html

table に指定しておきたい CSS メモ

understandardさん　http://www.understandard.net/css/css009.html

以上の参考サイト様方のおかげでたどり着いた
わたしが大体のサイトに貼り付けているCSSはこちらです

レスポンシブサイトでtableレイアウトに困ったときの、とりあえず貼っておくCSS

 
@media screen and (max-width: 480px) {
	table.smart {
		margin: 0 -10px;
		table-layout: fixed;
	}
	table.smart th,
	table.smart td {		
        	width: 100%;
		display:block;
		padding:5px;
		border:none;
	}
	table.smart input[type="email"],
	table.smart textarea,
	table.smart input[type="submit"] {
		width:95%;
	}
	/* ラベルタグで囲んだチェックボックスの表示 */
	table.smart .wpcf7-list-item label {
		display: inline-block;
		width: 100%;
	}
	table.smart .wpcf7-list-item label:hover {
		background: #E4E4E4;
		font-weight:bold;
	}
}

CSSで文字列を省略して「…」を付与する

表示領域を決めて、text-overflowを使う

text-overflowを使うと、widthで指定した表示領域からはみ出した文字列を「…」で省略することができます。

text-overflowを使った例

どこまでも広がる空に光がさして、地球の最後の日になって欲望のタガが外れたら、アダムとイヴになれる。タフにこの世を生きる為に必要なもの、ちょっとぐらいの絶望も長い目で見りゃ極上のスパイスを味わえるoh yes

HTML

<p class="ellipsis">どこまでも広がる空に光がさして、地球の最後の日になって欲望のタガが外れたら、アダムとイヴになれる。タフにこの世を生きる為に必要なもの、ちょっとぐらいの絶望も長い目で見りゃ極上のスパイスを味わえるoh yes</p>

CSS

.ellipsis {
    padding: 10px;
    width: 474px;
    border: 1px solid #A7D5CC;
    background: #C7F4E8;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
}

さらに、「…」をなしにすることも可能です。

省略記号「…」を付けずに文字列を省略

どこまでも広がる空に光がさして、地球の最後の日になって欲望のタガが外れたら、アダムとイヴになれる。タフにこの世を生きる為に必要なもの、ちょっとぐらいの絶望も長い目で見りゃ極上のスパイスを味わえるoh yes

.clip {
    padding: 10px;
    width: 474px;
    border: 1px solid #D3CB93;
    background: #F2F1A9;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    -webkit-text-overflow: clip; /* Safari */
    -o-text-overflow: clip; /* Opera */
}

ブログ記事の抜粋などでよく見かける、文字数を制限して省略記号「…」を付ける方法ですが
大体の場合、設計の段階でPHP等で文字数を決めておくことが多いと思います。

実際にこの方法を使う場面は限られているかな、とは思いますが
わたしは以下のような場面でtext-overflowを使っています。

・半角と全角が混在する抜粋文で、文字数での制限だと長さがまちまちになってしまうとき
・動的に変化する表示領域にフィットさせたいとき
・複数箇所に抜粋文を表示させたいけれど、いちいちPHPを書くのが面倒なとき

他にもJQueryを使った方法なんかもあるようですが、
cssだけでシンプルに完結するので、気に入っています。

参考：Developers.IO　http://dev.classmethod.jp/ria/string-replace-css-and-jquery/