よくあるご質問

カテゴリー: CSS, shuttoの使い方   タグ:   この投稿のパーマリンク

tableのcell(セル)を縦積みで変換できますか?

このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。

tableのcell(セル)を個別にスマホレイアウト画面に設置していただければ、縦積みする事が可能です。

また、table内の行の増減の更新を自動で反映させるようにするには、tableの段組みにもよりますが、CSSを使用すれば反映可能です。

■CSSの設定方法

(1)編集画面のPCビュー画面でtable内の適当な要素を選択し、下部のナビゲーションから、「table」を選択し、スマホレイアウト画面へドラッグ&ドロップします。

shutto_faq2014062406

(2)編集メニューの「要素の抽出 > HTML構造を保持」をチェックします。

shutto_faq2014062407

(3)編集メニューに下記、CSSを追加します。

@current table {
  width: 100%;
  border: none;
}
@current tr,
@current th,
@current td {
  display: block;
}
@current th,
@current td {
  border-bottom: none;
}
@current table {
  border-bottom: solid 1px #ccc;
}

shutto_faq2014062408

■変換見本
http://shutto.com/view/liAh6mP

または、tableの段組みによっては、CSSを書かずに個別にtableのセルを設置し、
「リピート機能」を使用して、増減に対応できる場合もございます。

■CSSとは
CSSとは、スタイルシートの一種で、HTML文書やXML文書の表示方法を指定するためのものとしてW3Cから勧告された仕様のことである。
CSSはWebページのレイアウト指定に標準的に用いられている。単に「スタイルシート」といった場合にCSSのことを指す場合が多い。
IT用語辞典「シーエスエス 」

■[動画]shutto「繰り返し機能」
■[マニュアル]shuttoマニュアル(PDF)
■[LINK]CSSの基本 ― HTMLクイック リファレンス

カテゴリー: CSS, shuttoの使い方   タグ:   この投稿のパーマリンク

「shuttoを使ってきれいなページを作りたい」「ページが多いので、外部の会社の手を借りたい」 そういったご要望がございましたら実績のある制作パートナー様にご相談ください。