エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

DAY19.『自分のポートフォリオサイトを作ろう②』 #30DAYSトライアル

DAY19.『自分のポートフォリオサイトを作ろう②』 #30DAYSトライアルです。 

ポートフォリオサイトを作成中です。

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY19.『自分のポートフォリオサイトを作ろう②』

DAY19. 『自分のポートフォリオサイトを作ろう②』ということでポートフォリオサイトづくり&ソースコードの勉強です。

 ポートフォリオサイトは大体完成していたので、ソースコードの分析をしてみました。

 

HTMLからスキルアップにつなげるためにソースコードを分析をしてみた

企画主催者のショーへーさんがブログで語っているように「効率的なクラス分けを学ぶ」ためにソースコードを分析してみました。

» 参考:【30日】未経験からコーディングの副業で月5万を稼ぐためのステップ DAY19|from Garage

 

私(アルパカ)は「こういうところに着目した」という情報を書くことで、受講生のみなさんがソースコードを見る時のヒントになれば幸いです。

ちなみに私はKerriを利用しています。

 

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

Kerriのファイル構成(CSS)を見てみました。

f:id:alpacajp:20190125214211p:plain

Kerriのファイル構成(CSS)

 

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

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

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

※複数のファイルを見るときは、どのファイルを「中心」に見ればいいのかを把握しておくのがオススメです

 

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

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

 

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

 

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

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

これ、Youtube動画を背景動画として流しているようです(ソースコードを読むと分かります)。

デフォルトだとこの動画です↓

www.youtube.com

 

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

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

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

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

 

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

 

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

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

ということですw

 

style.cssを確認する

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

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

 

ソースコードの中を見ると、以下のように区分されていました。

/***********************
1.BASIC
2.HELPER
3.NAVBAR
4.HOME
5.ABOUT
6.SERVICES
7.CLIENTS
8.WORK
9.CONTACT
10.FOOTER
11.RESPONSIVE
************************/

 

中を見ると分かりますが、BASICで基本的な記述をして、後はセクション(パーツ)ごとに、独自の名前をつけて書いていますね。

 

あとは、過去に学んだように「RESPONSIVE」というセクションを設けて、メディアクエリを設定していますね(@media~ってやつ)

※progateやドットインストールではなくYoutube動画でLP作成の課題だったはず

 

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

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

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

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

※【復習】CSSは「セレクタ{ プロパティ:バリュー }」という形式で書かれています。この中のプロパティとバリューが折り畳まれて表示されます

 

>Ctrl + K Ctrl + 0 すべてのインデントを折りたたむ

※Windowsキーです

 

逆にインデントを展開するときは以下のショートカットキーでOKです。

>Ctrl + K Ctrl + J すべてのインデントを展開する

 

そんな感じで色々とソースコードを見てみましょ~。

以上、DAY19.『自分のポートフォリオサイトを作ろう②』 というお話でした。

 

【関連記事】

  1. DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』 #30DAYSトライアル
  2. DAY19.『自分のポートフォリオサイトを作ろう②』 #30DAYSトライアル
  3. DAY20.『ポートフォリオを公開しよう』 #30DAYSトライアル

www.engineer-step.com