ITOBEN STYLE > CKeditorとレスポンシブWebデザイン(1):CSSの設定 2013年8月21日カテゴリー:未分類 CKeditorとレスポンシブWebデザイン(1):CSSの設定 HTMLの記述 CKeditorの記述箇所を、 と で挟んでいます。 は、EC-CUBEでデータベースから記事内容を読み込んでいる記述。 [php] [/php] CSS [css] #document_area { margin-bottom:20px; } #document_area img { clear:both; max-width:98%; margin:1%; } /*テーブル共通*/ #document_area table th, #document_area table td { vertical-align:top; } #document_area table.no_border, #document_area table.no_border th, #document_area table.no_border td { border:none; } /*テーブルセルに画像を配置したとき*/ #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; } } /*テーブルのレスポンシブ*/ @media only screen and (max-width: 459px) { #document_area table.responsive, #document_area table.responsive tbody, #document_area table.responsive tr { display:block; } #document_area table.responsive th, #document_area table.responsive td { display:list-item; } } [/css] CSSをどのように適用するかは、次の記事(2)~(6)をご覧ください。
HTMLの記述
CKeditorの記述箇所を、
で挟んでいます。
は、EC-CUBEでデータベースから記事内容を読み込んでいる記述。
[php]
[/php]
CSS [css] #document_area { margin-bottom:20px; } #document_area img { clear:both; max-width:98%; margin:1%; } /*テーブル共通*/ #document_area table th, #document_area table td { vertical-align:top; } #document_area table.no_border, #document_area table.no_border th, #document_area table.no_border td { border:none; } /*テーブルセルに画像を配置したとき*/ #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; } } /*テーブルのレスポンシブ*/ @media only screen and (max-width: 459px) { #document_area table.responsive, #document_area table.responsive tbody, #document_area table.responsive tr { display:block; } #document_area table.responsive th, #document_area table.responsive td { display:list-item; } } [/css] CSSをどのように適用するかは、次の記事(2)~(6)をご覧ください。