CKeditorとレスポンシブWebデザイン（1）：CSSの設定

HTMLの記述
CKeditorの記述箇所を、

で挟んでいます。
は、EC-CUBEでデータベースから記事内容を読み込んでいる記述。

<div id="document_area">
<!--{$arrRet.special_document|nl2br_html}-->
<div style="clear:both;"></div>
</div>

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をどのように適用するかは、次の記事（2）～（6）をご覧ください。