ビジネスメールコミュニケーション講座head

★スタイルサンプル

class=”button”申し込みはこちら

■見出し

h1

h2※spanで囲んだ部分は右寄せになります

h3

h4

h5
h6※spanで囲んだ部分は細字になります

■アンカータグ

class=”arrow”を与えたaタグ
class=”button”を与えたaタグ

■リストタグ

  • 番号無しリストです
  • ulにclass=”listCheck”を与えると
  • 直下のliにチェックマークがつきます
  • 番号無しリストです
  • ulにclass=”listArrow”を与えると
  • 直下のliに矢印マークがつきます
  • 番号無しリストです
  • ulにclass=”listCheck2″を与えると
  • 直下のliにチェックマーク(緑)がつきます
  • 番号無しリストです
  • ulにclass=”listArrow2″を与えると
  • 直下のliに矢印マーク(緑)がつきます
  1. 番号つきリストです
  2. 整形済みなので
  3. クラスは特に必要はありません

■テーブルタグ

クラス無しの テーブルです
特にスタイルは 与えていません
class=”tableSemi”を与えたテーブルです 枠線が描かれ、幅は100%になります
またth内は背景はグレー、文字がセンタリングされ td内の背景は白になります
見出し 見出し 見出し
テキスト テキスト テキスト
テキスト テキスト テキスト
自信がある 15名 / 31%
自信がない 33名 / 69%

■その他のスタイル

class=”boxOption”を与えたdivです。
class=”boxShadow”を与えたdivです。

class=”figRight”を与えたdiv内のfigureタグは、右寄せになります

同様に、class=”figLeft”を与えたdiv内のfigureタグは、左寄せになります

class=”twoColumn”を与えたdivの直下の要素は
2列に並ぶようになります
また、カラム落ちを起こさないよう
jQueryで制御しています

■キャプションについて

ビジネスメールを利用し始めて何年目ですか
ビジネスメールを利用し始めて何年目ですか

画像を<figure>タグで囲み、その中に<figcaption>キャプション文言</figcaption>を入れてもらえば上のように表示されます
画像の前なら上に、うしろなら下に追加されます。

 

■微調整用のクラス

mt10,20,30,40 → margin-topを10〜40ピクセルにします
mr10,20,30,40 → margin-rightを10〜40ピクセルにします
mb10,20,30,40 → margin-bottomを10〜40ピクセルにします
ml10,20,30,40 → margin-leftを10〜40ピクセルにします
pt10,20,30,40 → padding-topを10〜40ピクセルにします
pr10,20,30,40 → padding-rightを10〜40ピクセルにします
pb10,20,30,40 → padding-bottomを10〜40ピクセルにします
pl10,20,30,40 → padding-leftを10〜40ピクセルにします

 

markで色をつける

■セミナー登録についての注意事項

「公開セミナー」コンテンツの入力欄、「会場住所」について、
こちらはGoogleMapにデータを渡すための入力欄です。
郵便番号ほか郵便番号やタグを入れるとエラーになりますのでご注意ください。

ページの先頭へ