■見出し?テキスト
H2見出し
<h2 class="commonH2">テキスト</h2>
H2見出し(強調)
<h2 class="commonH2b">テキスト</h2>
H3見出し
<h3 class="commonH3">テキスト</h3>
H4見出し
<h4 class="commonH4">テキスト</h4>
テキストテキストテキストテキストテキストテキストテキストテキスト
■カラー
レッド:サンプルテキスト
オレンジ:サンプルテキスト
ピンク:サンプルテキスト
グリーン:サンプルテキスト
ブルー:サンプルテキスト
<span class="txt_red">レッド:サンプルテキスト</span>
<span class="txt_orange">オレンジ:サンプルテキスト</span>
<span class="txt_pink">ピンク:サンプルテキスト</span>
<span class="txt_green">グリーン:サンプルテキスト</span>
<span class="txt_blue">ブルー:サンプルテキスト</span>
■リスト
<ul class="dot">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
<ul class="arrow">
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
</ul>
番号付きリスト
- 番号つきリスト
- 番号つきリスト
- 番号つきリスト
<ol>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ol>
番号付きリスト(丸数字)
- リスト
- リスト
- リスト
<ol class="maru">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ol>
番号付きリスト(abc)
- リスト
- リスト
- リスト
<ol class="abc">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ol>
リストの入れ子1
リストの入れ子2
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
※ol ul どちらが親でも子でも可
<ol>
<li>リスト
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
</li>
<li>テキスト</li>
<li>テキスト</li>
</ol>
- 定義用語
- テキストテキストテキストテキストテキストテキスト
- 定義用語
- テキストテキストテキストテキストテキストテキスト
<dl>
<dt>テキスト</dt>
<dd>テキスト</dd>
<dt>テキスト</dt>
<dd>テキスト</dd>
</dl>
左右リスト(左カラム幅固定:150px)
- 平成27年5月25日
- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
- 平成27年12月12日
- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<dl class="dlList">
<dt>テキスト</dt>
<dd>テキスト</dd>
<dt>テキスト</dt>
<dd>テキスト</dd>
</dl>
左右リスト(左カラム幅可変)
- 項目名項目名項目名項目名
- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
- 項目名項目名項目名項目名
- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
※<dl>は1セット毎に閉じてください。
<dl class="dlList free">
<dt style="width:200px;">テキスト</dt>
<dd>テキスト</dd>
</dl>
<dl class="dlList free">
<dt style="width:200px;">テキスト</dt>
<dd>テキスト</dd>
</dl>
■ボタン
<div class="commonBt"><a href="#">テキスト</a></div>
<div class="btList">
<a href="#"><span>テキスト</span></a>
<a href="#"><span>テキスト</span></a>
<a href="#"><span>テキスト</span></a>
<a href="#"><span>テキスト</span></a>
</div>
■テキスト装飾?リンク
リンク
<a href="#" class="innerLink">テキスト</a>
テキストリンク
<a href="#" class="textLink">テキスト</a>
テキストリンク(下向き)
<a href="#" class="textLinkD">テキスト</a>
PDFファイルリンク
<a href="#" target="_blank">リンクテキスト<span class="ico_pdf"></span></a>
Excelファイルリンク
<a href="#" target="_blank">リンクテキスト<span class="ico_excel"></span></a>
PPTファイルリンク
<a href="#" target="_blank">リンクテキスト<span class="ico_ppt"></span></a>
Wordファイルリンク
<a href="#" target="_blank">リンクテキスト<span class="ico_word"></span></a>
ファイルリンク
<a href="#" target="_blank">リンクテキスト<span class="ico_file"></span></a>
タブリンク
<a href="#" target="_blank">リンクテキスト<span class="ico_tab"></span></a>
■テーブル
1 | 2 | 3 | 4 |
1-1 |
2-1 |
3-1 |
4-1 |
1-2 |
2-2 |
3-2 |
4-2 |
<table cellpadding="0" cellspacing="0" class="rowTable">
<tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
<tr><td>1-1</td><td>2-1</td><td>3-1</td><td>4-1</td></tr>
<tr><td>1-2</td><td>2-2</td><td>3-2</td><td>4-2</td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="colTable">
<tr><th width="30%">1</th><td>1-1</td><td>1-2</td></tr>
<tr><th>2</th><td>2-1</td><td>2-2</td></tr>
</table>
■枠?レイアウト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="borderBox">テキストテキストテキスト</div>
体系的な教育課程の編成を行い、履修における順次性と関連性を明確に示す。基礎教育科目では、基本的リテラシーの修得ならびに社会人としての幅広い知識の獲得をめざし、専門教育科目では、専門分野で必要な知識?技能の修得をめざす。また、学内外でのアクティブラーニングを取り入れた授業運営を行う。
<div class="blueBox">テキストテキストテキスト</div>
<div class="redBox">テキストテキストテキスト</div>
適宜、htmlタグを変更してください
- テキスト
- テキストテキストテキストテキストテキスト
- テキスト
- テキストテキストテキストテキストテキスト
<div class="columnBox">
<タグ class="midashi">適宜、htmlタグを変更してください</タグ>
<div class="inner">
<タグ>
テキストテキストテキストテキストテキスト
</タグ>
</div>
</div>
適宜、htmlタグを変更してください
タグやテキスト
適宜、htmlタグを変更してください
タグやテキスト
※外側を<div class="section">で囲って下さい。崩れる可能性があります。
<div class="section">
<div class="columnBox w2">
<h3 class="midashi">適宜、htmlタグを変更してください</h3>
<div class="inner">
タグやテキスト
</div>
</div>
<div class="columnBox w2">
<h3 class="midashi">適宜、htmlタグを変更してください</h3>
<div class="inner">
タグやテキスト
</div>
</div>
</div>
適宜、htmlタグを変更してください
タグやテキスト
適宜、htmlタグを変更してください
タグやテキスト
適宜、htmlタグを変更してください
タグやテキスト
※外側を<div class="section">で囲って下さい。崩れる可能性があります。
<div class="section">
<div class="columnBox w3">
<h3 class="midashi">適宜、htmlタグを変更してください</h3>
<div class="inner">
タグやテキスト
</div>
</div>
<div class="columnBox w3">
<h3 class="midashi">適宜、htmlタグを変更してください</h3>
<div class="inner">
タグやテキスト
</div>
</div>
<div class="columnBox w3">
<h3 class="midashi">適宜、htmlタグを変更してください</h3>
<div class="inner">
タグやテキスト
</div>
</div>
</div>
■テキストと画像(回り込み有り)
推奨画像サイズ:300px×200px
キャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
キャプション無し
<p class="image_in"><img src="画像URL" class="image_right" alt="alt文">テキスト</p>
キャプションあり
<p class="image_in"><span class="imgBox"><img src="画像URL" alt="alt文"><span>キャプション</span></span>テキスト</p>
キャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
キャプション無し
<p class="image_in"><img src="画像URL" class="image_left" alt="alt文">テキスト</p>
キャプションあり
<p class="image_in"><span class="imgBox left"><img src="画像URL" alt="alt文"><span>キャプション</span></span>テキスト</p>
キャプション
キャプション無し
<p class="image_center"><img src="画像URL" alt="alt文"></p>
キャプションあり
<p class="image_center"><span class="imgBox"><img src="/extra/seisaku/blog/2015/images/second/dummy.gif" alt="alt文" /><span class="center">キャプション</span></span></p>
■テキストと画像(回り込み無し)
キャプション
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="readBlock">
<div class="imgBox">
<p><img src="画像URL" alt="alt文">
<span>キャプション</span></p>
</div>
<p>テキスト</p>
</div>
キャプション
キャプション
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="readBlock2">
<div class="imgBox">
<p><img src="画像URL" alt="alt文">
<span>キャプション</span></p>
<p><img src="画像URL" alt="alt文">
<span>キャプション</span></p>
</div>
<p>テキスト</p>
</div>
横2列レイアウト(スマホでは縦になります。)
<div class="col2box">
<div class="inner">
<ul class="arrow">
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>
<div class="inner">
<ul class="arrow">
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>
</div>
横3列
<div class="col3box">
<div class="inner">
<ul class="arrow">
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>
<div class="inner">
<ul class="arrow">
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>
<div class="inner">
<ul class="arrow">
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>
</div>
<div class="movieBox">
<iframe width="100%" height="100%" src="URL" frameborder="0" allowfullscreen></iframe>
</div>
■リセットcss
margin【PC】
.m0 , .mT0 ~.mT40 , .mB0 ~.mB40 , .mR0 ~.mR40 , .mL0 ~.mL40
padding【PC】
.p0 , .pT0 ~.pT40 , .pB0 ~.pB40 , .pR0 ~.pR40 , .pL0 ~.pL40
display:block【PC】
.dspBlock
float【PC】
.floatL , .floatR
margin【smartphone】
.sp_m0 , .sp_mT0 ~.sp_mT40 , .sp_mB0 ~.sp_mB40 , .sp_mR0 ~.sp_mR40 ,
.sp_mL0 ~.sp_mL40
padding【smartphone】
.sp_p0 , .sp_pT0 ~.sp_pT40 , .sp_pB0 ~.sp_pB40 , .sp_pR0 ~.sp_pR40 ,
.sp_pL0 ~.sp_pL40
display:block【smartphone】
.sp_dspBlock
text-align【共通】
.alignR , .alignL , alignC
vertical-align【共通】
.valignT , .valignM , valignB
■セット
プロフィールなど
- XXXXさん
- XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXX
<div class="profile_section">
<div class="g_profile">
<div class="imgWrap"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></div>
<div class="y_middle">
<dl>
<dt>XXXXさん</dt>
<dd>XXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXX</dd>
</dl>
</div>
</div>
</div>
画像を並べる
2列(スマホでは1列になります)
あああああ
あああああ
<div class="col2box">
<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>
<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>
</div>
3列(スマホでは2列になります)
<div class="col3box">
<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>
<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>
<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>
</div>
4列(スマホでは2列になります)
<div class="col4box">
<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>
<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>
<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>
<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="/extra/seisaku/blog/2015/images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>
</div>
■左右組み
見出し2
見出し3
見出し4
- リスト(ol)
- リスト(ol)
- 定義リスト(dt)
- テキスト(dd)
<p class="floatL">
<a href="#">
<img src="画像URL" alt="alt文" width="300">
</a>
</p>
<div class="floatR w330">
<h3 class="commonH2">見出し2</h3>
<h3 class="commonH3">見出し3</h3>
<h4 class="commonH4">見出し4</h4>
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
<ul class="dot">
<li>リスト(dot)</li>
<li>リスト(dot)</li>
</ul>
<ol>
<li>リスト(ol)</li>
<li>リスト(ol)</li>
</ol>
<dl>
<dt>定義リスト(dt)</dt>
<dd>テキスト(dd)</dd>
</dl>
<div class="commonBt"><a href="#">テキスト</a></div>
</div>