【デイトラ】Web制作コース初級編④『ポートフォリオ作成編』の感想と学習記録

こんにちは、アルパカ（@engineeraru）です。

デイトラのWeb制作コース初級編『ポートフォリオ作成編』を学習するときに役立つ情報をまとめました。

デイトラ Web制作コース初級編『ポートフォリオ作成編』の学習記録

【DAY15】HTMLテンプレートを使う ＋ ポートフォリオサイト①

EnvatoMarketで購入する

私はEnvatoMarketで「Kerri – Responsive Bootstrap 4 One Page Portfolio Template」というテンプレートを購入しました。

シンプルで使いやすいので、迷ったらコレで良いと思います。

参考「Envato Market」のアカウントの作り方や購入方法を日本語で解説

Kerriの変更点

私が変更した所は以下の通りです。参考にどうぞ。😊

などなど。

私が作ったポートフォリオはこちら↓

Portfolio

【DAY16】ポートフォリオサイト②

私はKerriを利用しているので、Kerriのソースコードの中身を分析してみました。

「テンプレートが膨大すぎて理解できない！」という人は参考にしてみてくださいね。

Kerriのファイル構成（CSS)を見る

Kerriのファイル構成（CSS)を見てみましょう。

「bootstrap.min.css」はbootstrapを使うために必須ですね。

次に「sytle.css」で基本的なCSSのデザインが記述されています。

こいつがボスみたいなもんです（残りの奴らは子分です）

残りのCSSについては、実は大体元ネタがあります。

• magnific-popup　→　モーダルウィンドウ用jQueryプラグイン（公式サイト）
• materialdesignicons.min　→　Material Design Icons
• mobiriseicons　→　Free Icon Font
• owl.carousel、owl.theme、owl.transitions　→　GitHub
• ytplayer　→　GitHub

何が言いたいかというと、こんなにスゴく見えたテンプレートも、実はすでにある色々なパーツの組み合わせで出来ているということです！

以下で、私が最初に「どうやってるんだこれ・・・」と疑問を持った画面上部にある背景動画について同じように調べてみます。

ページの背景動画でYoutubeを流す方法

www.youtube.com

私が購入したKerriっていうテンプレートでは画面上部で、この動画が流れていました。

どうやらYoutube動画を背景動画として流しているようです（ソースコードを読むと分かります）。

ソースコードを見てみると、こんな指定で、Youtube動画を使っていました

• classタグとして”youtube-bg” を利用
• scriptタグで$(“.youtube-bg”).mb_YTPlayer();を指定

この記述から、JavaScriptとCSSで色々設定しているんだなーということが分かります。

※「jquery.mb.YTPlayer.js」と「mb.YTPlayer.css」に処理が書いていました

さらにそのCSSやJSファイルの中を見ると、元ネタはここだと分かりました（Licences: MIT, GPLです）

• pupunzi (jquery.mb.components) · GitHub
• https://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/

細かい＆専門的な話が出てきましたが、何が言いたいかと言うと、

• 行っている処理の元ネタまで遡れば、自分でも作れる（パーツを利用すれば良い）
• とはいえ、使い方を調べたり細かいデザインの設定するのは超面倒くさい

ということですｗ

style.cssを確認する

話は戻りまして、style.cssを見てみます。

このCSSファイルが、このテンプレートの大きな価値（独自の記述）ですね。

ソースコードの中の区分に注目です。

BASICで基本的な記述をして、後はセクション（パーツ）ごとに、独自の名前をつけて書いていますね。

あとは「RESPONSIVE」というセクションを設けて、メディアクエリを設定していますね（@media～ってやつ）

CSSファイルで扱っているクラス名をまとめて見る方法

CSSファイルで扱っているクラス名をまとめて見ようとしても記述量が膨大で萎えますよね。

そんなときには、インデントを折りたたんで見るのがオススメです。

style.css内で以下のショートカットキー操作をすると、セレクタ内の記述が折り畳まれるので、分かりやすくなります。

ショートカットキー（Windows）

• 「Ctrl + K Ctrl + 0」→すべてのインデントを折りたたむ
• 「Ctrl + K Ctrl + J」→すべてのインデントを展開する

ショートカットキー（Mac）

• 「⌘ + K ⌘ + 0」→すべてのインデントを折りたたむ
• 「⌘ + K ⌘ + J」→すべてのインデントを展開する

その後に行の隣りにある「＞」記号を押すことで、折りたたんだり、開いたり出来ますよ😃

【DAY17】ポートフォリオサイト公開

【ドメインとサーバーのイメージ】

引用元：mixhost

自分以外のパソコンから、Webページ（Webサイト）にアクセスしてもらうには、インターネット上に情報をアップロードする必要があります。

Webという広い空間の中に、自分の家を建てるようなイメージですね。

その際には「土地」と「住所」が必要になるということです。

この辺りは分かりづらいので、もう少し、具体的な話をしてみます。

今までは、自分のパソコンの上で、HTMLファイルとCSSファイルを表示していました。

しかし、自分のパソコンの上にあるファイルを見られるのは当然ながら自分だけです。

これを「世界中の人」が見られるようにするためには、24時間動いていてインターネットとつながっている「別のコンピュータ」の上に置く必要があります。

その別のコンピュータが「レンタルサーバー」(レンタル＝借りる、サーバ＝Webページを表示する専用のコンピュータ)というものです。

そして世界中の人がアクセスできるように「ドメイン」という窓口を用意して、そこにファイルをアップロード(置いておく作業)が必要になるのです。

つまり、流れとしては

1. レンタルサーバーを契約する(24時間動いているコンピュータを借りる)
2. ドメインを契約する(世界中の人がアクセスするための特定の場所＝窓口を借りる)
3. サーバー上に自分の作ったWebページをアップロードする
4. サーバーとドメインを紐付けて、ドメイン(窓口)にアクセスされたら、Webページを表示するようにする

という感じです。

ちなみに「土地（サーバー）」はシェアNo.1で一番信頼性ある「エックスサーバー」がオススメ。

さらに「住所（ドメイン）」はエックスサーバーと同じ会社がやっている「エックスドメイン」にすると設定が楽ですよ！

※お名前ドットコムも有名ですが、迷惑メールが多いので、あまりおすすめしないです…

デイトラ Web制作コース初級編『ポートフォリオ作成編』まとめ

自分のページがネットからアクセスできると嬉しいですよね！

テンプレートの分析については、今は完璧じゃなくても全然平気です。

まずは手を動かして「完成」まで持っていければOKだと思いますよ😊

以上、アルパカ(@engineeraru)でした。