ITOBEN STYLE > CKeditorとレスポンシブWebデザイン（1）：CSSの設定 2013年8月21日カテゴリー:未分類 CKeditorとレスポンシブWebデザイン（1）：CSSの設定 HTMLの記述 CKeditorの記述箇所を、 と で挟んでいます。 は、EC-CUBEでデータベースから記事内容を読み込んでいる記述。 [php] [/php] <span style="color: #ff0000;"><strong>CSS</strong></span> [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）をご覧ください。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 <span style="color: #ff0000;"><strong>CSS</strong></span>[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]