HTML/CSSのコーディング教材を公開【実績セクション】

htmlcssコーディング実績

今回は、HTML/CSSコーディングで、実績をするページ

実績セクションを制作していきますね。

今回の概要

  • 所要時間:30分
  • 使用言語:HTML&CS、jQuery
  • 実績部分を制作する

完成したサービス部分はこちら

コーディングの完成

JQueryを使って、スライドショーを作っていることが特徴です。

実績セクションとは?

実績セクションとは、ポートフォリオサイトでいう過去実績紹介ページです。

過去に携わってきたお仕事を一覧で表示させることができればOKです。

ポートフォリオサイトでは、次のように実績を公開している例もあります。

  • Googleドライブに画像とURLを保存しているパターン
  • Githubへのリンクを設置してるパターン
  • ブログのように実績を過去実績を並べいるパターン

今回のポートフォリオでは、スライドショー形式で表示させています。

このスライドショーのようなものを、カルーセルといいます。

Web制作の現場では広く使われる手法なので、詳しく確認してみましょう。

カルーセルとは?

カルーセルとは、大きな画像をスライドショー形式のように表示するデザインを指します。

カルーセルのサンプル
カルーセルのサンプル

画像の左右に矢印がついており、クリックすることで画像をスライドさせることができます。

また、画像の下部には黒いドットが用意されており、画像の切り替えなどもできます。

導入するメリットは次の通りです。

  • 狭いエリアにたくさんの情報スライド式に詰め込める
  • 画像を用いて、ユーザーに確認してもらいやすい

たくさんのコンテンツを一列に並べると、情報過多によってユーザーは困惑してしまいます。

しかし、カルーセルで一つずつコンテンツを表示させれば、大事な情報をしっかりと伝えることができます。

実績セクションでHTMLをコーディングする

それでは、実績セクションのHTMLをコーディングしていきましょう。

index.htmlを開きます。

</section>
<!--これより以下に記述してください-->
<section class="works-wrapper" id="works">
        <div class="works-path">
            <img src="./img/works-path.svg" alt="青い模様">
        </div>
        <div class="container">
            <div class="section-title-container works-title">
                <h2 class="section-title">WORKS</h2>
                <p>過去の作品です。</p>
			</div>
       </div>
       <div class="works-carousel">
     <!--カルーセル用のHTML追加します-->
    </div>
</section>

打ち間違えないように気をつけてくださいね。

カルーセルはjQueryと一緒に解説するので、HMTLも記述していません。

注目ポイント

<div class="works-path">
	<img src="img/works-path.svg" alt="青い模様">
</div>

前回同様、青い模様を採用しています。

完成版ページを参照すると、左側の部分に当たります。

コーディングの完成

サービスセクションのCSS部分をコーディングする

次は、CSS部分をコーディングしていきましょう。

style.cssの一番下のコードから、に次の様に記述していきます。

.works-path {
    position: relative;
}
.works-path img {
  height: 1300px;
  position: absolute;
  top: 100px;
   left: 0;
    z-index: -10;
}
.works-title {
    margin-left: 35%;
}
コーディング途中経過

左側に青い模様、そしてその模様を避けるようにタイトルが右上に表示されました。

これから、jQueryを使ってカルーセルを設置していきます。

Slick.jsでカルーセルを制作する

カルーセルを設置する時は、一からコードを記述する必要はありません。

なぜなら、すでにカルーセル用のjQueryがあり、誰でも利用できるからです。

今回利用するjQueryは、Slick.jsです。簡単にカルーセルを設置できます。

早速ダウンロードしましょう。

公式ページにアクセスして、メニューバーのget it nowをクリックします。

Slick.js

ダウロードしたら解凍ます。ファイルの中身はこんな感じです。

Slick.jsのファイル

slickフォルダ内にある以下のファイルをコーディング練習フォルダへ移動させます。

  • ajax-loader.gif
  • fonts(フォルダ)
  • slick-theme.css
  • slick.css
  • slick.min.js

そして、head内で読み込んでいきましょう。

まずはCSSを読み込みましょう。

<head>
    <link href="slick-theme.css" rel="stylesheet" type="text/css">
    <link href="slick.css" rel="stylesheet" type="text/css">
    <!--style.cssより上に記述-->
	<link rel="stylesheet" href="style.css">
</head>

次に、ダウンロードしたslick.min.jsとmain.jsのファイルを読み込みましょう。

bodyの一番下にjsを読み込む記述をします。

<script type="text/javascript" src="slick.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<!--bodyの閉じタグ直前に記述->
</body>

ですが、これだとファイルを読み込むだけなので、jQueryを読み込みます。

以下の内容を記述てください。コピペでOK

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--上記3行を記述->
<script type="text/javascript" src="slick.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>

注目ポイント

jQueryの読み込みには以下の3行が必要です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

この記述によって、jQueryを記述できるようになりました。

以上で全ての読み込みが完了したので、記述を加えていきましょう。

html→jQuery→CSSという順番で記述していきます。

まず、HTMLに記述を加えましょう。

index.htmlのwork-carousel内に記述を加えます。

<div class="works-carousel">
	<ul class="carousel">
		<li><a href="/"><img src="img/works-1.png" alt="image01"></a></li>
		<li><a href="/"><img src="img/works-2.png" alt="coming soon"></a></li>
		<li><a href="/"><img src="img/works-3.png" alt="coming soon"></a></li>
		<li><a href="/"><img src="img/works-4.png" alt="coming soon"></a></li>
	</ul>
</div>

ポイントは、ulタグにcarouselというクラスがついていることです。

このクラスとjQueryが連動させることができます。

次は、main.jsにコードを記述してきましょう。

$(function () {
	$('.carousel').slick({
			dots: true
		}
	);
});

これだけで、カルーセルが完了しました。確認してみましょう。

実績セクションのhtml

カルーセルは設定によって、自動スライドや複数画像表示なども可能です。

具体的なオプションについては、この記事にて確認してください。

カルーセルは完成しましたが、カルーセルの位置が整っていません。

まずはカルーセルの位置をCSSで調整しましょう。

.works-carousel {
    width: 60%;
    margin-left: 35%;
}

カルーセルが右側に配置されました。

実績セクションのコーディング途中

しかし、スライドの境界が分かり辛かったり、カルーセルのボタンが分かりづらいです。

そこで、黒色を塗って分かりやすくしましょう。

ul.carousel {
	border: 1px solid #333 ;
}
ul.carousel li img{
	width: 100%;
	height: 450px;
	object-fit: cover;
}
.slick-prev:before, .slick-next:before{
	color: #333;
}

ボタンが黒塗りになり、境界が分かりやすくなりました。

実績セクションのコーディング途中

これで完成です!

HTML/CSSのコーディング教材【お問い合わせセクション】へ行く

お疲れ様でした。

次回は、『HTML/CSSのコーディング教材【お問い合わせセクション】』(準備中)です。

所要時間は1時間、ぜひ挑戦してください。