Difference between revisions of "Team:Kyoto/ExpertInterview"

Line 4: Line 4:
 
<head>
 
<head>
 
<meta charset="utf-8">
 
<meta charset="utf-8">
−
<title>フリーHTML5/CSS3ホームページテンプレート NO.006</title>
+
<title>フリーHTML5/CSS3ホームページテンプレート NO.008</title>
 
<meta name="viewport" content="width=device-width">
 
<meta name="viewport" content="width=device-width">
 
<meta name="keywords" content="">
 
<meta name="keywords" content="">
Line 13: Line 13:
 
<script src="js/jquery.smoothscroll.js"></script>
 
<script src="js/jquery.smoothscroll.js"></script>
 
<script src="js/jquery.scrollshow.js"></script>
 
<script src="js/jquery.scrollshow.js"></script>
−
<script src="js/jquery.slideshow.js"></script>
 
 
<script>
 
<script>
 
$(function($){
 
$(function($){
 
$('html').smoothscroll({easing : 'swing', speed : 1000, margintop : 50, headerfix : $('header'), outersmooth : true});
 
$('html').smoothscroll({easing : 'swing', speed : 1000, margintop : 50, headerfix : $('header'), outersmooth : true});
 
$('.totop').scrollshow({position : 500});
 
$('.totop').scrollshow({position : 500});
−
$('.slide').slideshow({
 
−
touch        : false,
 
−
bgImage      : false,
 
−
autoSlide    : true,
 
−
effect      : 'fade',
 
−
repeat      : true,
 
−
easing      : 'swing',
 
−
interval    : 5000,
 
−
duration    : 1000,
 
−
imgHoverStop : false,
 
−
navHoverStop : false,
 
−
navImg      : false,
 
−
navImgCustom : false,
 
−
navImgSuffix : ''
 
−
});
 
 
});
 
});
 
</script>
 
</script>
Line 87: Line 71:
 
<li class="subnav"><a href="sample.html">サンプル</a>
 
<li class="subnav"><a href="sample.html">サンプル</a>
 
<ul>
 
<ul>
−
<li><a href="sample.html#sample">ページ外リンク</a></li>
+
<li><a href="#sample">ページ内リンク</a></li>
 
<li class="subnav"><a href="sample.html">サブメニュー</a>
 
<li class="subnav"><a href="sample.html">サブメニュー</a>
 
<ul>
 
<ul>
Line 101: Line 85:
 
</div><!-- /.inner -->
 
</div><!-- /.inner -->
 
</header>
 
</header>
−
 
−
<div class="slide">
 
−
<ul class="slideInner">
 
−
<li><img src="images/slide01.jpg" alt=""></li>
 
−
<li><img src="images/slide02.jpg" alt=""></li>
 
−
<li><img src="images/slide03.jpg" alt=""></li>
 
−
</ul>
 
−
</div><!-- /.slide -->
 
  
 
<div id="contents">
 
<div id="contents">
−
<h2>PRODUCTS<br><span>商品情報</span></h2>
+
<h2>写真レイアウト</h2>
 +
<p style="text-align:center">写真のみバージョンです。横に２枚並びます。スマートフォンでは横並びせずに縦に並びます。</p>
 +
<div class="twoCol">
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
</div><!-- /.twoCol -->
 +
 
 +
<p style="text-align:center">写真のみバージョンです。横に３枚並びます。スマートフォンでは横並びせずに縦に並びます。</p>
 
<div class="threeCol">
 
<div class="threeCol">
 
<div class="inner">
 
<div class="inner">
−
<div class="image zoom"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
+
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
−
<h4>商品A</h4>
+
−
<p>商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。商品Aの内容。</p>
+
−
<div class="btn"><a href="sample.html">詳しく見る</a></div>
+
 
</div><!-- /.inner -->
 
</div><!-- /.inner -->
 
<div class="inner">
 
<div class="inner">
−
<div class="image zoom"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
+
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
−
<h4>商品B</h4>
+
−
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
+
−
<div class="btn"><a href="sample.html">詳しく見る</a></div>
+
 
</div><!-- /.inner -->
 
</div><!-- /.inner -->
 
<div class="inner">
 
<div class="inner">
−
<div class="image zoom"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
+
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
−
<h4>商品C</h4>
+
</div><!-- /.inner -->
−
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
+
<div class="inner">
−
<div class="btn"><a href="sample.html">詳しく見る</a></div>
+
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 
</div><!-- /.inner -->
 
</div><!-- /.inner -->
 
</div><!-- /.threeCol -->
 
</div><!-- /.threeCol -->
  
−
<h2>INFORMATION<br><span>お知らせ</span></h2>
+
<p style="text-align:center">写真のみバージョンです。横に４枚並びます。スマートフォンでは横に２枚並びます。</p>
 +
<div class="fourCol">
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
</div><!-- /.inner -->
 +
</div><!-- /.fourCol -->
 +
 
 +
<p style="text-align :center">写真＋テキストバージョンです。</p>
 +
<div class="imgL">
 +
<img src="images/dummy.jpg" alt="">
 +
<h3>写真左・テキスト右</h3>
 +
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 +
</div><!-- /.imgL -->
 +
<div class="imgR">
 +
<img src="images/dummy.jpg" alt="">
 +
<h3>写真右・テキスト左</h3>
 +
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 +
</div><!-- /.imgR -->
 +
<div class="imgC">
 +
<h3>写真中央・テキスト中央</h3>
 +
<img src="images/dummy.jpg" alt="">
 +
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 +
</div><!-- /.imgC -->
 +
 
 +
<p style="text-align :center">写真のバージョンは、テキストも挿入できます。</p>
 +
<div class="twoCol">
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
<h4>見出し（左）</h4>
 +
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
<h4>見出し（左）</h4>
 +
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
<h4>見出し（左）</h4>
 +
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 +
</div><!-- /.inner -->
 +
<div class="inner">
 +
<div class="image"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
<h4>見出し（左）</h4>
 +
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 +
</div><!-- /.inner -->
 +
</div><!-- /.twoCol -->
 +
 
 +
<h2>写真のオプション</h2>
 +
<p>写真にホバーしたした際、拡大するには、写真を囲んでいるdiv要素に「.zoom」クラスをつけてください。その際、div要素には表示させたい画像サイズを指定してください。</p>
 +
<div class="imgC zoom" style="width:300px;"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
<p>写真にホバーしたした際、暗かった画像を明るくするには、写真を囲んでいるdiv要素に「.overlay」クラスをつけてください。その際、div要素には表示させたい画像サイズを指定してください。</p>
 +
<div class="imgC overlay" style="width:300px;"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
<p>「.zoom」クラスと「.overlay」クラスを併用することも可能です。</p>
 +
<div class="imgC  zoom overlay" style="width:300px;"><a href="sample.html"><img src="images/dummy.jpg" alt=""></a></div>
 +
 
 +
<h2>ボタンデザイン</h2>
 +
<p>基本は左寄せですが、「.center」クラスを付ければ中央寄せ、「.right」クラスを付ければ右寄せになります。</p>
 +
<div class="btn"><a href="sample.html">リンク先へ</a></div>
 +
<br>
 +
<div class="btn center"><a href="sample.html">リンク先へ</a></div>
 +
<br>
 +
<div class="btn right"><a href="sample.html">リンク先へ</a></div>
 +
 
 +
<h2>お知らせ</h2>
 
<dl class="information">
 
<dl class="information">
 
<dt>20XX-01-01</dt>
 
<dt>20XX-01-01</dt>
Line 141: Line 219:
 
<dt>20XX-01-01</dt>
 
<dt>20XX-01-01</dt>
 
<dd>
 
<dd>
−
更新情報などを掲載するのに便利なデザインです。更新情報などを掲載するのに便利なデザインです。更新情報などを掲載するのに便利なデザインです。更新情報などを掲載するのに便利なデザインです。更新情報などを掲載するのに便利なデザインです。
+
更新情報などを掲載するのに便利なデザインです。
−
</dd>
+
−
<dt>20XX-01-01</dt>
+
−
<dd>
+
−
更新情報などを掲載するのに便利なデザインです。更新情報などを掲載するのに便利なデザインです。更新情報などを掲載するのに便利なデザインです。更新情報などを掲載するのに便利なデザインです。更新情報などを掲載するのに便利なデザインです。
+
 
</dd>
 
</dd>
 
</dl>
 
</dl>
  
−
<h2>RECRUIT<br><span>採用情報</span></h2>
+
<h2 id="sample">サンプルタグについて</h2>
−
<div class="threeCol">
+
<p>
−
<div class="inner">
+
以下、サンプルタグになります。ご利用の際は参考にしてみてください。
−
<a href="sample.html">
+
</p>
−
<div class="image zoom overlay"><img src="images/dummy.jpg" alt=""></div>
+
<h2>h2タグ</h2>
−
<div class="text">新卒採用</div>
+
<h3>h3タグ</h3>
−
</a>
+
<h4>h4タグ</h4>
−
</div><!-- /.inner -->
+
<h5>h5タグ</h5>
−
<div class="inner">
+
<h6>h6タグ</h6>
−
<a href="sample.html">
+
<p>
−
<div class="image zoom overlay"><img src="images/dummy.jpg" alt=""></div>
+
<em>強調（em）</em>
−
<div class="text">キャリア採用</div>
+
<strong>より強い強調（strong）</strong>
−
</a>
+
<ins>追加（ins）</ins>
−
</div><!-- /.inner -->
+
<del>削除（del）</del>
−
<div class="inner">
+
<a href="#option">テキストアンカー</a>
−
<a href="sample.html">
+
</p>
−
<div class="image zoom overlay"><img src="images/dummy.jpg" alt=""></div>
+
<blockquote>
−
<div class="text">グローバル採用</div>
+
引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。
−
</a>
+
</blockquote>
−
</div><!-- /.inner -->
+
<h3>リスト</h3>
−
</div><!-- /.threeCol -->
+
<h4>普通のリスト</h4>
 +
<ul>
 +
<li>普通のリスト1</li>
 +
<li>普通のリスト2</li>
 +
<li>普通のリスト3</li>
 +
</ul>
 +
<h4>番号付きリスト</h4>
 +
<ol>
 +
<li>番号付きリスト1</li>
 +
<li>番号付きリスト2</li>
 +
<li>番号付きリスト3<br>li要素の中はブロックレベルのタグを使用することが出来ます。例えば、&lt;p&gt;タグも記述することが出来ます。<br></li>
 +
</ol>
 +
<h4>定義リスト</h4>
 +
<dl>
 +
<dt>定義リスト1</dt>
 +
<dd>定義した用語の説明</dd>
 +
<dt>定義リスト2</dt>
 +
<dd>定義した用語の説明</dd>
 +
<dt>定義リスト3</dt>
 +
<dd>定義した用語の説明<br>dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、&lt;p&gt;タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。</dd>
 +
</dl>
 +
<h3>テーブル</h3>
 +
<table>
 +
<tbody>
 +
<tr><th>見出し1<br>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr>
 +
<tr><td>セル1<br>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
 +
<tr><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
 +
<tr><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
 +
</tbody>
 +
</table>
 +
<table>
 +
<tbody>
 +
<tr><th>見出し1</th><td>セル1<br>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
 +
<tr><th>見出し2<br>見出し2</th><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
 +
<tr><th>見出し3</th><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
 +
<tr><th>見出し4</th><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
 +
<tr><th>見出し5</th><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td></tr>
 +
</tbody>
 +
</table>
 
</div><!-- /.contents -->
 
</div><!-- /.contents -->
  

Revision as of 13:45, 8 October 2018

<!DOCTYPE html> フリーHTML5/CSS3ホームページテンプレート NO.008

SAMPLE SITE

写真レイアウト

写真のみバージョンです。横に２枚並びます。スマートフォンでは横並びせずに縦に並びます。

写真のみバージョンです。横に３枚並びます。スマートフォンでは横並びせずに縦に並びます。

写真のみバージョンです。横に４枚並びます。スマートフォンでは横に２枚並びます。

写真＋テキストバージョンです。

写真左・テキスト右

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

写真右・テキスト左

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

写真中央・テキスト中央

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

写真のバージョンは、テキストも挿入できます。

見出し（左）

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

見出し（左）

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

見出し（左）

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

見出し（左）

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

写真のオプション

写真にホバーしたした際、拡大するには、写真を囲んでいるdiv要素に「.zoom」クラスをつけてください。その際、div要素には表示させたい画像サイズを指定してください。

写真にホバーしたした際、暗かった画像を明るくするには、写真を囲んでいるdiv要素に「.overlay」クラスをつけてください。その際、div要素には表示させたい画像サイズを指定してください。

「.zoom」クラスと「.overlay」クラスを併用することも可能です。

ボタンデザイン

基本は左寄せですが、「.center」クラスを付ければ中央寄せ、「.right」クラスを付ければ右寄せになります。

リンク先へ

リンク先へ

リンク先へ

お知らせ

20XX-01-01
更新情報などを掲載するのに便利なデザインです。dlタグに『class="information"』を追加してください。
20XX-01-01
更新情報などを掲載するのに便利なデザインです。

サンプルタグについて

以下、サンプルタグになります。ご利用の際は参考にしてみてください。

h2タグ

h3タグ

h4タグ

h5タグ
h6タグ

強調（em） より強い強調（strong） 追加（ins） 削除（del） テキストアンカー

引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。

リスト

普通のリスト

  • 普通のリスト1
  • 普通のリスト2
  • 普通のリスト3

番号付きリスト

  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3
    li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。

定義リスト

定義リスト1
定義した用語の説明
定義リスト2
定義した用語の説明
定義リスト3
定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。

テーブル

見出し1
見出し1		見出し2見出し3見出し4見出し5
セル1
セル1		セル2セル3セル4セル5
セル1セル2セル3セル4セル5
セル1セル2セル3セル4セル5
見出し1セル1
セル1		セル2セル3セル4セル5
見出し2
見出し2		セル1セル2セル3セル4セル5
見出し3セル1セル2セル3セル4セル5
見出し4セル1セル2セル3セル4セル5
見出し5セル1セル2セル3セル4セル5
ページのトップへ戻る