サイト運用のためのマニュアルサイト
よく使うHTMLタグとクラス指定
HTML編集を行う画面では、よく使うタグやクラス指定を覚えておくと、改行や余白の調整、端末ごとの表示切り替えがしやすくなります。
一方で、一部のタグや操作は表示崩れの原因になることがあるため注意が必要です。
また、サイトによっては以下に記載しているクラスが実装されていない場合もございます。ご留意ください。
※本記事ではHTMLの<>半角括弧を＜＞全角括弧で記述しています。
そのままコピーペーストではお使いいただけませんので、半角括弧への書き換えをお願いいたします。
よく使うHTMLタグ
改行：＜br /＞
テキストを改行したいときに使用します。
エディタ上で Shift + Enter を押すと、自動的に挿入されます。
コメントアウト：＜!-- --＞
以下のように囲んだ内容は、公開画面に表示されません。
記述例
＜!-- ここはコメントです --＞
一時的に内容を非表示にしたい場合に使用できます。
注意：埋め込みタグ（＠exists() 等）とコメントアウトは併用できません。
埋め込みタグ：＜!--- ＠exists() ---＞等
CMSのシステム処理に使用しているタグです。
内容は編集しないでください。
記述内容の詳細を確認するには、エディタの「埋込タグ」のボタンあるいは操作メニュー最下部にある「埋込タグ一覧」を参照ください。
リスト項目：＜li＞＜/li＞
箇条書きや番号付きリストの各項目に使用します。
注意：＜li＞内にカーソルがある状態で保存すると、HTMLが崩れることがあります。
保存前は、全選択してコピーしたうえで、別の＜div＞などにカーソルを移動してから保存してください。
よく使うクラス指定
HTMLでは、class="" を使って見た目を指定できます。
下方向の余白を付ける：mb**
要素の下に余白を付けたい場合は、mb** を使用します。
記述例
＜p class="mb30"＞テキスト＜/p＞
数字は 5刻み で指定してください。
例：mb10、mb20、mb30
端末ごとに表示を切り替える：pc / pctb / sp
端末によって表示内容を切り替えたい場合は、以下のクラスを使用します。
pc ：PCのみ表示
pctb：PC・タブレットで表示
sp ：スマホのみ表示
記述例1：PCだけ改行したい場合
＜br class="pc"＞
記述例2：PC・タブレット用とスマホ用で画像を切り替えたい場合
＜img src="image_pc.jpg" class="pctb"＞
＜img src="image_sp.jpg" class="sp"＞
操作時の注意点
- コメントアウトは一時的な非表示に使えますが、埋め込みタグとは併用できません
- ＠exists() を含むタグは、内容を変更しないでください
- ＜li＞を編集したあとの保存時は、カーソル位置にご注意ください