見出し画像

デイトラ Web制作コース 初級編 DAY26-30 ポートフォリオサイト制作

MIO

ご覧いただき、ありがとうございます！

今回はポートフォリオサイトの制作を行いました。


ポートフォリオサイトを作ってみる

ポートフォリオサイトとは

ポートフォリオサイトは「自分がどんな人」で、「どんなことができるのか」などを伝えるためのWebサイトです。

私は以前WordPressで制作したことがありましたが、構成も何も考えずにただ作ったので、レスポンシブ対応も甘く、なかなかひどいものでした…

制作したのは、架空ポートフォリオサイトで、Xに載せています。
今回はJavaScriptを使える状態から制作したので、ぜひ動画で見ていただけると嬉しいです。

MIOのXポスト。ポートフォリオ制作完成。

ポートフォリオサイトを制作する時のポイント

先ほども書いたように、ポートフォリオサイトで大切なのは「自分がどんな人か知ってもらうこと」と「自分にできることを知ってもらうこと」です。

今回は既に完成がある状態で制作しましたが、ご自身で制作する時は以下の項目を入れることをおすすめします。

  • できること、スキル

  • 実績紹介

  • お仕事の流れ

  • （価格表）

  • 自己紹介

  • お問合せ先

価格表もあると、読み手がWebサイト制作を頼んだ時にどのくらいなのか分かるので、とても優しいです。

ただ私がそうなのですが、最初は何をいくらで設定すればいいのか、分からないんですよね。

なので、今は価格表は書かず、お見積もりを出す時は
「このWebサイトを作ると合計何時間かな？」→「時給換算」
という形にしています。

もちろんまだまだ駆け出しなので、実際にはかなり時間を費やしており、時給換算するといくらなんでしょう…

でも、まずは経験を積むことが大切なので、最初は安価でも数をこなすことが大事かなと思っています。

参考までにWebサイト制作をフリーランスに依頼して時の相場を解説している記事を貼っておきます。

使えると便利なHTML/CSS

今度は制作中のお話で、私が制作していて便利だなと思ったHTML/CSSの書き方を三つご紹介します。

<!-- HTML -->
<タグ名 属性 = 属性値>コンテンツ< /タグ名>
/* CSS */
セレクタ {
  プロパティ: バリュー; 
}

ヘッダーナビゲーションのメニュー項目について（aタグ）

一つ目は、HTMLで行うヘッダーナビゲーションのメニュー項目の書き方です。

ヘッダーナビゲーションは「ul」と「li」を使い、リンクをつけるので「aタグ」を使うことが多いと思います。

そのaタグの「href属性」に、後々つけるid属性を書いておくという方法です。

<ul class = "nav__list">
  <li class = "nav__item">
    <a href="#service" class="header__nav-link button">Service< /a>
  < /li>
  ：

最初に全てのセクション名を決めて、id名を当てておくと、後々楽になります。

メニュー項目をタップした時、スクロールしてそのセクションまで行きたいという場合にも役立ちます。

そちらは今回やっていないので、次回書き方や便利さをお伝えしたいと思います。

共通クラスの書き方

二つ目は共通クラスのお話で、こちらもHTMLに関する書き方です。

以前、共通クラスや複数のクラス名をCSSで書く方法について他の記事で書きました。

今回は共通クラスついて、もう少し詳しくお話ししようと思います。

今回のポートフォリオサイトでは、似たようなレイアウトが何度か出てきたセクションがありました。

ポートフォリオサイトの画像。セクションの中で同じレイアウトを枠で囲っている。

上記のように、「Service」、「Works」、「Work flow」のセクションは、文字の大きさや余白など、スタイルが同じです。
「About」は少し違いますが、タイトル部分は同じスタイルになっています。

こういったところは全て、「Section」というクラス名を使用すると管理しやすいです。

「serviceセクション」で書いてみます。

<section id="service" class="section service">
  <div class="section__inner">
    <h2 class="section__head">
      <span class="section__head-main">Service -< /span>
      <span class="section__head-sub">提供サービス< /span>
    < /h2>
    <p class="section__lead-text">
      行っているサービス内容です。「Web制作を頼みたい」「既存のWebサイトを修正・改善したい」など、是非、お気軽にご相談ください。
    < /p>
  < /div>
< /section>

まず、id属性に「service」とつけることにより、ヘッダーナビゲーションでserviceを押せば、serviceセクションまでジャンプすることができます。

次に「section__inner」とあります。

「inner」もしくは「container」をタイトルのセクションにつけ、その下の本文や画像があるコンテンツ部分に「contents」をします。

これはHTML/CSSの命令規則で、構造を明確化して、分かりやすくするために用いられます。

「section」を頭につけなくてもいいですが、私はCSSで管理しやすいのでこの書き方を採用しました。

CSSの実装display:gridについて

最後に「display:grid」がとても便利だったので、ぜひお話ししたいと思います。

ポートフォリオサイトの画像。ServiceセクションとWorkセクションのコンテンツが枠で囲われている。

今回使用したのは青枠の部分です。

三つのアイテムを横並びにするとき、私はいつも「display:flex」を使っていましたが、今回は「display:grid」を習ったので、使用しました。

.service__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

display:gridは行と列を組み合わせて構成されており、非常に自由度が高いプロパティです。

「grid-template-columns: repeat（3, 1fr）;」は「三つのアイテムを同じ幅で配置する」という意味です。

ただ、自由度は非常に高いですが、覚えることが多く理解するのも難しいです。

私もまだ完全には理解できていませんが、「display:flex」や「display:grid」を使いこなせるとできることが増えるので、学び直します…

以下の記事では、図を用いてdisplay:gridを解説してくれています。
ご興味のある方はぜひ見てみてください。

感想

もうすぐ初級編が終了します。

セクションが進むにつれ、できることが増えますが、覚えることも増えます。
ブログを書いていると、忘れていることや実際にコーディングするとできて
いないことが浮上します。

初級編の内容は基本の部分なので、理解しておくべきことばかりだと思います。
なので今週末は時間を取って、復習に当てます。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8


いいなと思ったら応援しよう！