作品一覧ページが作りたい作品ごとのページを作りたいこんな方に向けた記事です。ここまでHTML・CSS・jQueryとサイト制作に関する基礎知識を含め、実際に手を動かして制作してきましたよね。いやいやしてないよ!という方は、ポートフォリオサイトの作り方【初心者向け】で順番に進めてください。実際にトップページを作り終えた方は、これからよりサイトっぽく下層ページを作っていく手順を開設していきますので、このまま読み進めてください。最後にポートフォリオサイトの下層ページを作るこの記事では新しく5つのことをします下層ページ制作1.Work(作品)の一覧ページ2.作品ごとの一覧ページ新しくリンクをつける新規CSS追加デモサイトを元に解説まず、デモサイトをご覧ください。デモサイトを開き、下の方にスクロールして「詳しく見る」をクリック。Work(作品)一覧ページ作品を一覧で見せるページです。HTMLで追加します。作品ごとのページ作品ごとのページです。作品の概要やこだわったポイントなどまとめるページにも使えます。トップページにもリンクトップページに表示しているWorkの記事にもリンクを入れてます。「イラストサイト様」の画像をクリックすると、作品ごとのページに飛びます。この記事のフォルダ新規追加で画像の通り下記の2つのファイルを準備してください。page-work.htmlsingle.htmlファイルの追加方法がわからない方へファイルの追加方法がわからない方向けに、下記の記事でその方法をまとめていますので参考にしてください。先ほども紹介しましたが、こちらのデザインで解説していきます。書く場所を間違えないように注意してください。src="js/script.js"></script></body></html>トップページとは違い、作品を横並び3列で表示しています。その画像を押すと「作品ごと」のページに飛ぶようになっています。基本的にトップページと同じトップページのHTMLコードと基本の形は同じなのですが、一部変更します。src="js/script.js"></script></body></html><main>~/<main>の中身を消します。消したら例のコードのようになります。src="images/sample.jpg"><p>なになに様</p></a></div></section>中身を消した<main>~/<main>に例のコードを追加します。class="works">で画像と作品名のタイトルを入れてます。class="works">~</div>を丸ごと記述します。src="images/画像名.拡張子">、文言なら<p>ここに文言</p>を変更してください。0;}}CSSのコードはかなり少ないですね。これは、すでにトップページでCSSをある程度書いて、それを活用しているからです。今回のポートフォリオサイトの講座では、比較的わかりやすくをテーマにしていますので、CSSが少し長いですが、もっと短くすることもできます。CSSは書けば書くほど、サイトは重くなってしまうという性質がありますので、なるべく少なく書くように意識すると効率的です。left;で行なっています。leftという文字通り、「左」から並べるという意味があります。説明が長くなるので、詳しい使い方に関しては下記の記事でまとめました。0;}:nth-of-typeとは、擬似クラスの一種で「n番目の要素に対してCSSを適用するよ」という意味があります。今回のコードに関しては、:nth-of-type(3n)と書いてあります。これは「3,6,9,12...」番目の要素にCSSを適用するという意味になります。0;を指定しているので、下記のような状態になっています。#ccc;}:hoverとは、「hoverを指定した要素にマウスが上に乗ったら、CSSを適用する」という意味になります。デモサイトでは、ふわっと表示していますよね。これは、「マウスが乗ったら浮かせた感じにしてね」とCSSで書いています。ちなみに上に動かしているCSSは下記になります。-3pxの部分を変えると、可動域が変わります。translateY(-3px);ポートフォリオサイトの作品ごとのページこちらのデザインで解説していきます。書く場所を間違えないようにしてください。src="js/script.js"></script></body></html>Workの時同様、<main>~</main>の中身を消します。src="images/sample3.jpg"><p>ここはサンプルここはサンプルここはサンプルここはサンプルここはサンプルここはサンプル</p></div></section><main>~</main>に新しくコードを記述します。上記のコードを分解して役割を解説します。single-wrap"></section>基本的にこの<section>の中に書いていきます。class="title">イラストサイト様</h2>h2に作品名などを書きます。src="images/sample.jpg">サムネイル的な役割です。どんな作品なのかファーストビューでユーザーに知らせます。class="work-post">中身はご自身で決めてください</div>中身は、作品に対する思いを書いてもいいですし、経緯を書いてもいいと思います。class="work-post">~</div>の中に書くということです。class="work-post"に次で解説するCSSでスタイルを適用しているので、必ずこの間に書いてください。0;}}新しいCSSが出てきています。分解して考えると簡単ですので、この機会に覚えましょう。1s;}上記のCSSがアニメーションを作っています。厳密にいえば、上の@keyframesというのが、ここでは重要です。.titleに適用しています。@keyframesをここで解説するとかなり長くなるので、別記事で解説します。トップページなどにリンクをつけるここまで作業ができた方は、次にリンクをつける作業をします。サイトでリンクをつけると別のページに飛びますよね。デモサイトを例にすると下記のようなイメージになりますイメージがつきにくい方は、画像のようにデモサイトで試してみてください。href=""></a>ちなみにリンクをつける方法は、こちらのコードのみです。aタグと言われていて、リンクをつける際に必ず書くコードになります。書く場所はHTMLです。target="_blank"></a>1つ半角スペースを空けてtarget="_blank"というのを書くと、別のタブで開くことができます。それと一緒にrel="noopener"もセットで書いておきましょう。このrel="noopener"に関しては、一度調べてみてください。例として、下記の2つのリンクをクリックしてみてください。※どちらともデモサイトに飛びます。デモサイトに直接飛ぶデモサイトを別タブで表示この2つの使い方がわかったら実際に箇所ごとにリンクを貼っていきましょう。ロゴにリンクをつけるほとんどのサイトが「ロゴの部分」にリンクをつけています。デモサイトでは、上記のようにh1で囲った「Sample」というロゴに対して、aタグでリンクをつけています。ここで以前書いたHTMLに対して、aタグを追加してみましょう。ファイルはすべてのHTMLです。class="nav-inner"><ul><li>aaaa</li><li>aaaa</li><li>aaaa</li></ul></nav></div></div></div></header>index.html・page-work.html・single.htmlで共通する部分「header」のh1に追加していきましょう。今回は例として、「上から二番目の要素」と「詳しくみる」に対してaタグを貼っていきます。index.htmlのみに書きます。--></section>二番目の要素には、直接作品ページに飛ぶように「single.html」を書き、「詳しくみる」には作品一覧が見られるよう「page-work.html」を追加しましょう。重要:後でリンクは変わります現在は作っている環境は「ローカル環境」といい、ネットが繋がらない状態です。実際にサイト名で検索しても出てきません。これはなぜかというと、Web制作の流れと必要なもの【イラスト付き】で解説していますが、「ドメインとサーバー」というものを開設していないからです。それぞれの詳細は上記の記事を読んでいただければと思いますが、とりあえずここでは「ドメインとサーバーを開設したらリンクの内容が変わる」と覚えておいてください。ちなみに当ブログのロゴ部分のリンクは下記のようになっていますhttps://cocoro-re.com/httpというものから始まり、よく見かける「〜.com」で終わってますよね。こんな感じで自分のサイトの名前をつけることで、ネットで閲覧できるようになります。最後にこの記事はここまでです。ちなみにもっとページを増やしたいという方もいると思いますが、そういった方は今回の手順通りにHTML・CSSを追加してみてください。作品を作ったら「作品一覧ページ」に載せたいですよね。いう場合はやることは下記の3つだけ。名前はなんでもいいので、「〇〇.html」という作品ごとのページファイルを作る(作り方はこちら)今回作った「page-work.html」に追加(追加方法はこちら)page-work.htmlに追加したものにリンクをつける(リンクの付け方はこちら)今回学んだことをまとめます。PROFILEかれめIKIDISHIKIの中の人+とにかく色々やってみる人+WEBサイトいじりが好きな人+このテーマはオリジナルです。ARTICLEIT業界がつまらない人がやるべき3ステップ【すぐに行動しよう】IT業界が合わない人は職種を変えるべき【離れたい...】IT業界は未来がない。TWSのレビュー】格安だけど使用感は問題なしPROFILEかれめIKIDISHIKIの中の人+とにかく色々やってみる人+WEBサイトいじりが好きな人+このテーマはオリジナルです。ARTICLEIT業界がつまらない人がやるべき3ステップ【すぐに行動しよう】IT業界が合わない人は職種を変えるべき【離れたい...】IT業界は未来がない。IKIDISHIKI.。