(Copy) サンプルページ

shukutoku (2015年7月27日 16:55)

■見出し・テキスト

H2見出し

<h2 class="commonH2">テキスト</h2>

H2見出し（強調）

<h2 class="commonH2b">テキスト</h2>

H3見出し

<h3 class="commonH3">テキスト</h3>

H4見出し

<h4 class="commonH4">テキスト</h4>

テキストテキストテキストテキストテキストテキストテキストテキスト

<p>テキスト</p>

■カラー

レッド：サンプルテキスト
オレンジ：サンプルテキスト
ピンク：サンプルテキスト
グリーン：サンプルテキスト
ブルー：サンプルテキスト

<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>
番号付きリスト
  1. 番号つきリスト
  2. 番号つきリスト
  3. 番号つきリスト
<ol>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ol>
番号付きリスト(丸数字)
  1. リスト
  2. リスト
  3. リスト
<ol class="maru">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>
番号付きリスト(abc)
  1. リスト
  2. リスト
  3. リスト
<ol class="abc">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

リストの入れ子1

  • リスト
    • リスト
    • リスト
    • リスト
  • リスト
    1. リスト
    2. リスト
    3. リスト
  • リスト

リストの入れ子2

  1. リスト
    • リスト
    • リスト
    • リスト
  2. リスト
    1. リスト
    2. リスト
    3. リスト
  3. リスト
※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>

■テーブル

1234
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>
1 1-1 1-2
2 2-1 2-2 
<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

alt文キャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

キャプション無し 
<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>

alt文キャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

キャプション無し 
<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>

alt文キャプション

キャプション無し 
<p class="image_center"><img src="画像URL" alt="alt文"></p>

キャプションあり 
<p class="image_center"><span class="imgBox"><img src="../images/second/dummy.gif" alt="alt文" /><span class="center">キャプション</span></span></p>

■テキストと画像（回り込み無し）

alt文 キャプション

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="readBlock">
<div class="imgBox">
<p><img src="画像URL" alt="alt文">
<span>キャプション</span></p>
</div>
<p>テキスト</p>
</div>

alt文 キャプション

alt文 キャプション

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<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="../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="../images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>

<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="../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="../images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>

<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="../images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>

<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="../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="../images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>

<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="../images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>

<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="../images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>

<div class="inner">
<p><a href="#" target="_blank"><img alt="" src="../images/second/dummy.gif" /></a>
<span class="cap">あああああ</span></p>
</div>

</div>

■左右組み

Together最新号

見出し2

見出し3

見出し4

  • リスト
  • リスト
  • リスト(dot)
  • リスト(dot)
  1. リスト(ol)
  2. リスト(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>

検索

2021年10月

日 月 火 水 木 金 土
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

カテゴリ

月別 アーカイブ