ITOBEN STYLE > CKeditorとレスポンシブWebデザイン(4):テーブルのセルに画像を配置する 2013年8月21日カテゴリー:未分類 CKeditorとレスポンシブWebデザイン(4):テーブルのセルに画像を配置する 「高度な設定」タブをクリックし、スタイルシートクラスにimageと入力します。 が設定され、1行のセルは等分され、配置された画像は、テーブルの縮小(ブラウザの縮小)に合わせて自動的に縮小されるようになります。 列数に合わせて、セルは等分されます。 CSS [css] /*テーブルセルに画像を配置したとき*/ #document_area table.image { table-layout:fixed; } #document_area table.image th, #document_area table.image td { display:block; } #document_area table.image img { clear: none; max-width:100%; margin:0; } @media only screen and (min-width: 460px) { /*テーブルセルに画像を配置したとき*/ #document_area table.image th, #document_area table.image td { display: table-cell; } } [/css] ▼スマホでの表示
「高度な設定」タブをクリックし、スタイルシートクラスにimageと入力します。
列数に合わせて、セルは等分されます。
CSS
[css]
/*テーブルセルに画像を配置したとき*/
#document_area table.image {
table-layout:fixed;
}
#document_area table.image th,
#document_area table.image td {
display:block;
}
#document_area table.image img {
clear: none;
max-width:100%;
margin:0;
}
@media only screen and (min-width: 460px) {
/*テーブルセルに画像を配置したとき*/
#document_area table.image th,
#document_area table.image td {
display: table-cell;
}
}
[/css]
▼スマホでの表示
アーカイブ
カテゴリー