アラフォーがお金持ちになるためエンジニア目指すブログ

お金も根性も学歴もないアラフォーまきのがエンジニアになってお金持ち目指すよ!

初めてのBootstrap1 下準備編

どうも、アラフォーまきのです。

昨日、侍エンジニア塾2回めの授業で、メンターさんに教わったCSS(だけじゃないけど)の便利ツール「Boot strap (ブートストラップ)」をいじってみたいと思います!

 

 

CSSはデザイナーさんにならないなら最低限でOK

ウェブデザイナーさんは、CSSなどでサイトを素敵なデザインにするのが仕事だからしっかりおさえておく必要があるけれど、プログラマはこういう便利ツールがあるし、デザイナーさんがいるし、最低限使えればOKとのこと。

ホッ。

 

靴ひも…? 

普通にブーツストラップって聞こえてたんで「靴ひもかあ…ネットスラングとかでなんかかっこいい意味なのかな?」と思ってました。

 

実際bootってブーツとか長靴とかそんな意味な訳ですが、当然この場合のbootが長靴なわけない(笑)

ともあれ便利アイテムということなら使わない手はないよね!ということで触って見ることに。

 

ありがたいことにドットインストールで無料講座が22もあるとのこと!

すごい!さあやってみよう、Bootstrap!

 

getbootstrap.com

 

https://dotinstall.com/lessons/basic_twitter_bootstrap_v5

※↑ドットインストールをかっこよくリンクできないまきのです。くっそー。

 

レッツBootstrap1 とりあえずサイトに移動

基本的に、Bootstrapからコードをコピペするだけでかっこよくできちゃうという話なんですが、そのために基本になるコードを最初に貼り付ける必要があるそうで。

 

単に参照先を指定するって意味合いみたいですが、それすらコピペでいいっていうんだから、もはや何も怖いもんなし。

よっしゃよっしゃ、サイト見て見よう!

 

f:id:MmRevorution:20180910192904j:plain

 

全部英語じゃないですかやだー!

もうっ、プログラミングやろうとすると大概英語っ!!

プログラミングをとっつきにくくしてるのって、英語ばっかってのもあるんじゃないのかしらっ。

 

まあ、クロームさんなら翻訳してくれるんだけれども。

 

f:id:MmRevorution:20180910214303j:plain

 

でも、英語表示のままサクサクやる方がなんかかっこいいので、英語も頑張ります٩( ᐛ )و

ということで英語表示に戻してやってみよう。

 

レッツBootstrap2 ベースをコピペする

 

ほう、このトップページのGet startedをクリックすんの?

 

f:id:MmRevorution:20180910185342j:plain

 

そんで、表示されたページの少し下にあるStarter templateをコピればいいんだ。

あ、なに、ドラッグせず右上のCopyクリックでいいの?

おぉ、さすが便利ツール。便利。

 

f:id:MmRevorution:20180910185406j:plain

 

で、これをエディタにはればいいんだ。

f:id:MmRevorution:20180910185458j:plain

 

これでベースはOKなんだ!へえー!こんだけでいいんだ!

簡単!私でもできたー!

 

レッツBootstrap3 ベースに書かれているもの

ドットインストールさんもメンターさんも中身を説明してくれました。

ここから少し自分の勉強のために読み下し書いていくので長くなります。

もしかしたら嘘が書いてあるかも…(笑)

 

<!doctype html>

HTMLの最新版5でやるよ!という宣言。

 

<html lang="en">

"en"だと英語になっちゃうので"jp" "ja"にして日本語に。

 ※jpじゃなくてjaだったです!直しました!失礼しました!18.9.11

 

<head>〜</head>

このHTMLの文書のヘッダ情報にあたる<title>(タブの表示名)やら<meta>(文字コード指定とかTHML文書情報の設定)を書いておくところ。

 

<meta charset="utf-8">

文字コードをutf-8にするよ!という宣言。

 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

メンターさん曰く「おまじない」

viewportは「たった2日で楽しく身につくHTML/CSS入門教室」によると、「スマホとかで見たとき、そのデバイスの横幅と等倍になるよう綺麗に表示するための設定に必要なもの」だそう。

 ※↑Kindleなら2,138円なんでこんな高くないです。超わかりやすいので超おすすめ。

 

これやらないと、スマホ画面で見たとき単純にPCサイトを縮小しただけの表示になって見にくい。

width=device-widthで実際に見るときに使うデバイスに合わせて横幅を調整してくれる。すごい。

 

initial-scale=1は、iOSだと一行が長すぎて見辛そうだとiOSが判断すると、自動でフォントサイズを調整してくれる機能があるそうで、そのせいでむしろダサレイアウトになることがあるので、「勝手に調整してくれるなよ」というお願いをするものだそう。

1は1倍、つまりこっちの指定したフォントサイズのままにしてねってことだそうです。ここ0.5にしたら半分のサイズになるんだね。

 

shrink-to-fit=noは、画面を縮めた時のなんかに作用するんだっていっていたけれど、なんだか忘れた(笑)これもiOSがらみで、とりあえず書いておけばいいと。

この一文は本当に「とりあえず書いとけ、意味はそこまで理解しなくておk」ということらしくて、そういった意味でもメンターさんは「おまじない」って言ってたみたい(笑)

ちなみにネットで調べると、リーバイスばっかりでてきて「なんでや」ってなるけれど、そもそもデニム生地に関する用語らしい。おしゃれか。

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdkn

LPMO" crossorigin="anonymous">

 Bootstrapのスタイルシートを読みにいくよというリンクの記載。

ちなみに、メンターさんにこのながーい記述中にあるリンクの「.min」について豆知識を教えてもらった。

 

これ実際クリックできるようになってるんで"https:〜.css"をブラウザで表示するとこんな感じに。

 

f:id:MmRevorution:20180910205115j:plain

 

ギャース!!

なにこれ!!バグってる!!

(バグってない)

 

で、こんどは「.min」を外して同じものをブラウザで表示すると。

f:id:MmRevorution:20180910210834j:plain

 

あー、これならなんか見慣れた感じ!

 

.min」ってのはまあminimum(ミニマム)=最低限ってことですよね。

 

普段私たちが書いてるHTMLってのは、誰が見ても読みやすいようにインデントや改行が入ってるわけですが、PCからしたら「余計なもん入ってて逆に読みにくいねん」ということなんだそうです。

 

なもんで「.min」をつけてPCが読みやすいようにインデントや改行を消して最低限の情報にしてあげる。

且つ余計なインデントや改行を省くことで容量を抑えて、サクサク表示されるようにしよ、という2つの目的があるんだそうです。

 

なんかこういうの知ると「エンジニアっぽい!」って気がしてちょっと嬉しい(笑)

 

<title>Hello, world!</title>は 、上部のタブんところですね。

f:id:MmRevorution:20180910212410j:plain

 

<h1>Hello, world!</h1>これはまあいいか。

 

最後の<script src=…> の3行は、JavaScript。今自分が書こうとしているコードにJavaScript使うようならこの3行は必要。

 

本当にちょっとしたコードしか書かなくてJavaScript登場の余地がないならなくてもいいんだそうですが、いつコードに足したくなるかわからないから、とりあえず載っけとけばいいよとのことでした。

 

案外なんとかなりそう

超長くなりましたが、こんな感じでとりあえずコピペだけでBootstrapを使う下準備は完了しちゃいました!

簡単!

 

次回は実際にBootstrapからcssをあててみよう。

 

まとめ

  • CSSは便利ツールがあるから、ウェブデザイナーさん目指すんじゃないなら猛勉強は不要!最低限でOK!
  • Bootstrapは基本コピペでOK!
  • 超初心者のまきのでもとりあえずベースが準備できた!