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

タキのデイトラ学習記録

こんにちは、タキ(@engineeraru)です。

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

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

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

POINT
テンプレートを理解する!

EnvatoMarketで購入する

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

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

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

 

Kerriの変更点

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

<html lang=”ja”>

 

→日本語を使うのでjaに変更した(japaneseのjaです)

「Client」が不要だったので「Skills」に変更した

 

→IDを#clientから#skilsに変更しました。

ただし一括置換でclientをskillsに変更すると、CSSのクラス名も変わってしまうのでご注意を。

画像を張り替えたり、テキスト変えたりした

 

→これはそのまま画像変えたり、テキスト変えたり…ってだけです。

良い文章の書き方はおいおい勉強するとして、とりあえず変えてみました。

「お問い合わせへのページ内リンクボタン」を追加

 

→課題で指定が合ったとおり、ボタンを追加しました。

既に良いボタンがあったのでそれを流用して間に合わせました。

見出しに色を付けた

 

→黒一辺倒だと寂しかったので…。配色はこちらが参考になります

headの中の設定

 

→①titleの変更
→②meta name=”author”に自分の名前を設定
→③twittercard設定
などなど。

footerを設定

 

→SNSアイコンは削除
→Copyrightに自分の名前を追加

などなど。

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

Portfolio

 

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

POINT
テンプレートのソースを分析

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

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

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

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

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

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

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

ここがポイント!

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

 

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

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

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

 

ページの背景動画で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です)

 

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

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

ということですw

 

style.cssを確認する

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

話は戻りまして、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】ポートフォリオサイト公開

POINT
サーバー&ドメイン契約

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

ドメイン 関係

引用元:mixhost

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

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

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

 

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

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

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

 

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

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

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

つまり、流れとしては

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

という感じです。

 

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

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

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

 

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

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

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

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

 

以上、タキ(@engineeraru)でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です