LPを作ろう！その3

2020-08-30

こんにちは、0371です。

今回は、heroセクションの作成（CSS）、gitの導入を行います。

前回のレクチャーはこちら

LPを作ろう！その2
"https://0371.blog/practice-lp-2"

heroセクションの実装

それでは、CSSをBEM記法もどきで書いていきたいと思います。
本来であれば、Sassを使用することが条件なのですが、練習用なのでこれでOKです。
クラス名が長くなりますが、何をしているのかが一目でわかりやすくなるのでおすすめです。

htmlの記述

まずは、index.htmlから書いていきましょう。

index.html

=== 省略 ===

<!-- hero -->
	<section id="hero" class="hero__relative hero__h-400 hero__w-full">
		<figure class="hero__absolute hero__z--10">
			<img src="img/hero.JPG" class="hero__w-full" alt="ひよこのhero画像">
		</figure>
		<div class="hero__relative hero__t-35 hero__r-0 hero__l-0 hero__text-center hero__text-white hero__text-shadow">
			<h2 class="hero__mb-40 hero__text-2xl">ひよこ王国へようこそ！</h2>
			<p class="hero__text-xl">ひよこがいっぱい！！！！！！！！！！！！！！</p>
		</div>
	</section>

=== 省略 ===

画像と文字を<div class="hero__relative">とclass="hero__absoluteでhero sectionからの相対的な中心位置を指定します。
left; 0;と right: 0;を指定することで、中央揃えにすることが可能です。

そして、<figure class="hero__z--10"> の部分も重要です。
画像を文字の上に被せるようにするために、z-index: -10;を指定します。

CSSの記述

書き終わったら、続けてCSSファイルの記述も行います。

hero.css

.hero__relative {
  position: relative;
}

.hero__absolute {
  position: absolute;
}

.hero__h-400 {
  height: 400px;
}

.hero__w-full {
  width: 100vw;
}

.hero-fixed {
  position: fixed;
}

.hero__object-cover {
  object-fit: cover;
}

.hero__z--10{
  z-index: -10;
}

.hero__t-35 {
  top: 35%;
}

.hero__l-0 {
  left: 0;
}

.hero__r-0 {
  right: 0;
}

.hero__mb-40 {
  margin-bottom: 40px;
}

.hero__text-center {
  text-align: center;
}

.hero__text-shadow {
  text-shadow:0px 0px 4px #000057,0px 0px 10px #04c251;
}

.hero__text-white {
  color: #ffffff;
}

.hero__text-2xl {
  font-size: xx-large;
}

.hero__text-xl {
  font-size: x-large;
}

ここで注目して欲しいことは、一つのクラスで一つのスタイルを適応する設計であるというところです。

昨今のCSSフレームワーク(Bootstrapやbulma)は、一つのクラスにつき、複数のスタイルを適応する設計になっています。

上記のフレームワークは、よく使用されるデザインをすぐに適応することができるため、便利ではあります。
一方で、既存のデザインに囚われすぎて、自由な発想でレイアウトを組みにくくなるという弊害があります。

また、一度に複数のスタイルを適応できることによって、どのスタイルがどのような影響を及ぼすのかがわかりにくくなっていることも懸念すべき点です。

表現の幅を広くする、CSSをきちんと理解するという意味では、使用を控えたほうがいいと思います。

ただ、TailwindCSSというフレームワークは例外で、一つのクラスで一つのスタイルを適応する設計であるため、個人的には好きなフレームワークです。

cssファイルを一切書かずにhover:やレスポンシブ対応ができ、必要であれば一つのクラスにつき、複数のスタイルを適応することも可能なので、臨機応変にスタイルを適応できます。

Tailwind CSS
"https://tailwindcss.com/"

gitの導入

ここで、一度作業を中断し、gitと呼ばれるバージョン管理システムを導入しようと思います。

gitは、Web系でもIT系でも広く使用されるサービスであり、自分の作業履歴をインターネット上で管理できるものです。

gitを使用することで、

プロジェクトを壊してしまった時にすぐに復旧できる
チーム開発時のソースコードのやりとりが楽
外部サービスと連携することによって、開発の効率が上がる

などの大きなメリットを受けることができます。

今回は個人開発ですが、gitに慣れるという意味で使っていきます。

gitのインストール

macOSの人はターミナルで、Homebrewをインストールした後に、gitをインストールします。

// Homebrewのインストール
// インストール中に Press RETURN to continue or any other key to abort と表示されたらEnterを押してください。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

// gitのインストール
brew update
brew install git

// gitがインストールされたかの確認
git --version

// gitのバージョンがインストールしたものと一致しない場合
echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.zshenv
source ~/.zshenv

// gitのアップグレード
brew upgrade git

windowsの人は、下記のURLからインストーラーをダウンロードして起動してください。

Git for Windows
"https://gitforwindows.org/"

基本的には設定はデフォルトでいいのですが、Configuring the line ending conversionの選択肢では、三番目を選択してください。

詳しい導入手順は下記のURLに記載されています。

Git 2.28 のインストール（Windows 上） "https://www.kkaneko.jp/tools/win/git.html"

gitのインストールが終わると、Git bashというソフトウェアも一緒にインストールされるはずです。
Git bashはLinux系のコマンドが使用できるターミナルのようなツールです。

今後、gitを扱っていく時はGit bashを使用しますので、覚えておいてください。 WSL2が使える方は、そちらでもいいかもしれません。

Bitbacket のサインアップ

gitをインストールするだけでは、gitの機能を全て使用することはできません。 Gitのホスティングサービスである、GitHub,Bitbucket,Gitlabなどのwebサービスを活用する必要があります。

今回は、Bitbucketを使用していきますが、GitHubでも構いません。
以下の記事をみながら、サインアップからリモートリポジトリ作成までを行ってください。

今日からはじめるGitHub
"https://employment.en-japan.com/engineerhub/entry/2017/01/31/110000"

BitBucketを使ってみる - tanaka's Programming Memo
"http://am1tanaka.hatenablog.com/entry/2018/06/30/014141"

リモートリポジトリのタイトルはhiyoko-lpにしておきましょう。（なんでもいいです。）
中身はまだ空のままでOKです。

gitコマンドの入力

それでは、gitを使います。下記のコマンドを順に入力してください。

// 自分の作業ディレクトリに移動する
cd ~/abc-circle/hiyoko

git init
git add .
git commit -m "[init] first-commit"

ls -al ~/.ssh
// ssh鍵の確認 id_rsa.pub id_rsa があればOK
// ssh鍵がなければ以下の作業を行う

ssh-keygen -t rsa -C "githubやbitbucket等で作成したメールアドレス"

// 入力する部分は全て空欄でEnter
// passphrase はお好みで

pbcopy < ~/.ssh/id_rsa.pub

ここまで終わったら、いったんgitから離れ、githubやbitbucket等のアカウントのsettingsで、ssh公開鍵を設定してください

// fingerprintうんたらかんたらと聞かれたら、yesと入力してEnter

git remote add origin 作成したリモートリポジトリのURL
git push -u origin master

// origin はURLのショートカットのような役目をする。
// git push -u origin master は、次回以降からは git push でリモートリポジトリに変更を送信することができるようになる

これで、ソースコードをインターネットでも管理できるようになりました。 githubやbitbucketのリポジトリにアクセスし、ソースコードがアップロードされていることを確認しましょう。

以降は、新しいプロジェクトを作成するたびに、gitで管理する癖をつけておくと就職した時に経験が役に立つと思います。積極的にgitに触れましょう。

わからなくなったら、以下の記事にいろいろ書いているので、見てみてください。

gitのメモ
"https://0371.blog/git"

今回はここまでです。お疲れ様でした。

今日の一言

ひよこっこ〜。

LPを作ろう！ その3