LP模写練１｜画像の保存からlink,metaの概念、titleタグまで見てみた。 - WEB初心者のグラフィックデザイナーでもLP作れるようになりたい。

f:id:aonori_dct:20190418014646j:plain

LPを模写する上で、ひとまず画像をダウンロードしようと準備を開始。

右クリック

カチッ！

あれ？

画像の保存ができない。。。

右クリックで画像が保存できない場合どうやって画像をダウンロードするか
最初はHTMLから。最初<head>からつまづくグラフィックデザイナーであった
WEBフレームワークについてとBootstrapとは
Font-awesomeはアイコンをいじれるやつ
CSSファイルをリンク
<link rel="shortcut icon" href="URL">はファビコン設定する方法
<meta charset="utf-8">は文字コードの指定
<meta http-equiv="X-UA-Compatible" content="IE=edge">はInternet Explorer用の対策
<meta name="viewport" content="width=device-width, initial-scale=1">でレスポンジブ対応できるサイトに
<title>サイトのタイトル</title>はその名の通り。
まとめ

右クリックで画像が保存できない場合どうやって画像をダウンロードするか

Googleクロムを使っている方しか多分使えない方法だと思うが、、、

まず画像を手に入れたいサイトを開いて、右クリック（Macの場合はcontrolキーを押しながらクリック）

検証をクリックする。

f:id:aonori_dct:20190417232450j:plain

するといっぱいコードが書かれたページが表示される。

右上の方にあるSourcesタブをクリック。

f:id:aonori_dct:20190417232615j:plain

フォルダマークがいっぱい出てくるので、左にもれなくついている▶マークをクリックしていけば、どこかにimgフォルダがある（はず）

imgを開くとずらっと画像が。

まとめてダウンロードできまいかやってみたけど出来なかった。

面倒だけど１つ１つクリックドラックドロップで、とりあえずデスクトップに保存していく。

f:id:aonori_dct:20190417232454j:plain

とりあえず画像準備問題は解決。

最初はHTMLから。最初<head>からつまづくグラフィックデザイナーであった

まずはHTMLから書いていく。

引き続きGoogleクロムの検証から、Elementsタブをクリックすると使用されているタブが表示されるので、のぞいてみる。

んんんん？？？

f:id:aonori_dct:20190418003149j:plain

<head>タグの中にいっぱいリンクがあるのってなんでだっけ？？

早くも壁にぶち当たる。

という訳で「head内にあるlinkは何」で検索

saruwakakun.com

するとこちらの素敵なサイトがヒット。

サルワカさんによると、<head>内に入れる要素は、metaタグとlinkタグの二つ。

metaタグは文字コードの指定やブラウザでの表示のさせ方、検索エンジンでの掲載有無を指定できるそうな。

linkタグはcssファイルの読み込み指定やページ同士の関係性を検索エンジンに伝える役割があるとな。

WEBフレームワークについてとBootstrapとは

以上を踏まえて上から順番に見て行く。

このサイトの中にある、wp-contentの中のthemes/ファイル名というファイルの中に、bootstrap・・・・・・

bootstrap!?

って何ですか。

早速ググる。

www.sejuku.net

このサイトがヒット。

Samurai Blogさんによると、

BootstrapとはHTMLやCSS、JavaScriptからなる最も有名なWEBフレームワーク

なんだそう。

いや待て。

WEBフレームワークて何。

テンプレート的なやつ？

今度はWEBフレームワークについてググる。

blog.codecamp.jp

このサイトさんが分かりやすかった。

WEBフレームワークとは、

様々なシステム開発をサポートしてくれる機能たちのこと

を言うらしい。

システム開発する上で必要な機能がセットになってるって感じなのかな。

そのおかげで速くプログラムが作れ、コストを減らし、個人差の無い開発ができるからバグも出にくいというメリットがあるそうな。

でも、WEBワイヤーフレームを使いこなすにはそれ専用のコードを覚えないとダメらしい。

BootstrapはCSSのフレームワークなんだって。

Webサイトやアプリケーションのレイアウトに使える機能がたくさんあるんだそう。

なるほど！

で、今はとりあえずbootstrapが何者か分かれば良しとして、今後こいつを使いこなそうとする場合、勉強が必要になりそう。

大丈夫！　ドットインストールで勉強できるってよ！

次！

Font-awesomeはアイコンをいじれるやつ

次もスタイルシート。

maxcdn.bootstrapcdn.com

またbootstrapと書いてあるので、Webフレームワーク関係の話かな。

そのあとのfont-awesomeとはなんぞや。

例のごとくググルと

peraichi.com

このサイトによると、

アイコンを文字として扱うことを可能にしたツール

のことを言うそうな。

フェイスブックのロゴとか、ホームボタンの家マークのアイコンとか、それらを全部文字として認識してくれるので大きさや色を自由に変更できたり、回転させられたり、画像と重ねて配置できるんだって。

ほいで、

Bootstrapでもバージョン４からFont awesomeを使えるようになったんだとか。（それまでは違うツールでもっとアイコン数が少なかったんだってさ）

使い方は後で確認するとして、ひとまず、Bootstrap（WEBフレームワーク）内にあるアイコンをいじれるヤツぐらいにぼやっと覚えておこう。

次！！！

CSSファイルをリンク

これは所謂CSSファイルをリンクしてる状態っぽい。

style.cssってあるし。

次！！！！

<link rel="shortcut icon" href="URL">はファビコン設定する方法

このタグが出てきたら、ファビコンの設定ができるそうな。

あのー、お気に入りやブックマークに表示される小さいアイコンみたいなヤツのことです。

オッケー、了解！ここまで理解。

<meta charset="utf-8">は文字コードの指定

そしてここからがmetaタグ。

おなじみのutf-8は、日本語サイトなら絶対書かないといけないやつ。

<meta http-equiv="X-UA-Compatible" content="IE=edge">はInternet Explorer用の対策

Internet Explorerって古いバージョンで開く場合があるそうな。

そうなるとデザインが崩れるので、このタグで常に標準モードで表示されるように設定するらしい。

<meta name="viewport" content="width=device-width, initial-scale=1">でレスポンジブ対応できるサイトに

<title>サイトのタイトル</title>はその名の通り。

タイトルタグはその名のとおり、サイトのタイトル。

検索結果の表示やブラウザのタブに表示されるとな。

これも必ず書いとく項目なので、要チェック！

今日はひとまずここまで！

まとめ

bootstrapなるWebフレームワークや、font-awesomeなんてもの知らんかった〜！

そんな便利な物があったのかと思う反面使いこなせる気がしないぞ。。。

いやいや、今はとりあえずサラッと、サラッと分かっとけばよいということにして、詳細はおいおいやっていこう。

次回、OGP設定から見ていくぞ！