はい!どーもすー丸です!

それではだらだらした前置きはなしにして早速書いていきます。

まだまだプログラミングは勉強したばかりなので、本当に何にもわかんないので

こんなこともわからないの?といった心ないコメントはどうかご容赦くださいw

で!ここからは長文覚悟で進めてくださいねw

今日はLPの模写をやっていきます

初挑戦でございます。

初心者おすすめの模写サイトなんですけど、これをやっていきます。

https://flowr.is/

開始時刻10時

—————————————-

〈!DOCTYPE html〉これは宣言なんでもう覚えてしまおう

ヘッダー部分の模写~

script srcってなんや?ようわからんけど外部スクリプトに飛ぶって感じかな?

この外部スクリプトって一体なんやろ?

ほんでなんで外部スクリプトに飛ばないといけないんかようわからんw

わかんないけどここはいったんおいとこ

次これ

async=”async”ってなに?

1,async属性とは

async属性が付与されていると、利用開始とともに、スクリプトは非同期で実行されます。一方でasync属性でなければ…ユーザエージェントがページを解析する前に、スクリプトが読み込まれ、直ちに実行されます。

dev1

このような形でCSSと一緒に読み込むことができるようになります。

<Google Chrome ディベロッパーツールで確認>

参考:script 要素 – スクリプティング – HTML要素 – HTML5 タグリファレンス – HTML5.JP

async属性ってのは非同期されるんだと

非同期されるってなんだ?w

非同期処理

ですが、例えばサーバーと通信を行った際に、リクエストが返ってくるまでに数秒以上もかかると困ります。
そこで、「ある関数が呼び出されたとき、戻り値として本来渡したい結果を返すのではなく、一度関数としては終了し(=呼び出し元に戻る)、後で『本来渡したかった値』を返せる状態になったときに、呼び出し元にその値を通知する」という仕組みが考え出されました。
このような仕組みを非同期処理といい、なにかしらの処理が完了したら渡したfunctionを実行させるという関数をコールバック関数といいます。

 なんか処理したら帰ってくるって感じの理解でいいんかな?うまく絵で表現ができんな

なんかプログラミングでフリーランスの人が言ってた!調べてもわかんないとこはどんどん飛ばしてとにかくインプットとアウトプットを繰り返せ!ってだからここも飛ばしてしまう!いつか理解できることを信じてw

んでasync属性だけどなんでasyncこれを=”async”するんやろ?

ここはさっぱりわからん

非同期=非同期ってことやろ?処理進まないんじゃないのかな?

うん。次!!

window.dataLayer=window.dataLayer ||[];

これ何!?

てか何気にJS言語入ってるやんwwまだHTMLとCSSの触りくらいしかやってないのにこれはマジで未知の領域wwわからん過ぎてパニックだがこれくらいじゃ俺は折れんぞ!

1月20日からオンラインスクール通うからそこで先生にむちゃくちゃ聞こう!

すんげぇ嫌な生徒になると思うけど、こちとら金払ってるから最大限活用してやる!

んでこれはデータレイヤー変数というらしい

データレイヤー変数とは

データレイヤー変数というのはGoogleタグマネージャ上で設定できる変数の1種類ですが、その内容をざっくりと説明すると「ページ側からデータを受け渡しするのにGoogleタグマネージャが推奨している変数の種別」です。

ツール側が推奨していることもあり、規定の書式で出力すればGoogleアナリティクスのeコマース計測タグなどで難しい設定をしなくても自動で値を利用してくれたりするなどの特典があります。

GoogleタグマネージャはWebページで動作する際、dataLayerというJavaScript変数内へ様々なデータを一時的に格納し、参照しています。

このdataLayer変数にはGoogleタグマネージャが自動的に追加や取得した変数のデータが格納されますが、意図的にHTML上から「dataLayer変数へ値を渡す」JavaScriptを動作させることで「Googleタグマネージャへデータを渡す」ことができます。そしてその渡されたデータを変数として参照可能にしたものがデータレイヤー変数というわけです。

 これを入れておくと自動で値を入れてくれる変数のため、ほとんど?もしくは全部のhtml書式には入るのかな?っていう理解。

functionもわかんない

function(関数)とは?

function(関数)とは、様々な処理を1つにまとめて、名前をつけることができるものです。単調な処理を1つにまとめて、どこからでも使えるように効率化するという目的でよく使われています。

1つにまとめることで、同じ処理を何度も書く必要がなくなりミスが減るうえ、別のプログラムに使いまわすことも可能になります。

また、function(関数)は値を受け取ったり、何らかの処理を行った値を返すことも可能なので、最小のコードで最大限のパワーを引き出せる力を秘めています。

効率のよいプログラミングには必須のスキルと言っても過言ではないですね。

 んでここまでいろいろ調べたけど、むちゃくちゃ簡単なことが判明ww

ここまで調べたのはこの部分

<script src=”https://www.googletagmanager.com/gtag/is?id=ua-127225293-2″ async=”async”></script>
<script>
window.dataLayer=window.dataLayer ||[];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’,new Data());
gtag(‘config’,’UA-127225293-2′);
</script>

これが何かというと要はGoogleアナリティクスの測定するための部分で、とくに一つ一つ理解する必要性がそこまでなかったww

理解が間違っていたら教えてくださいm(__)m

ほんでさここでひとつ疑問なんだけど、俺が理解してるのは『=』の後って大体『””』で囲むってことしかしらなくてなんで『’』で囲むことができるんかな?もしくは『’』で囲むことでまた別の意味になるんかな?そこがいまいちよくわかんないな。

HTML文書のメタデータは<head>~</head>の中に、 <title>(タイトル)・ <base>(基準URL)・ <link>(リンク情報)・ <style>(スタイルシート)・ <script>(スクリプト) などのタグで指定しますが、 これらのタグで表現できないその他の様々なメタデータは<meta>で表します。

<meta>タグは<head>~</head>の中に配置します。 meta要素を指定する際には、 name属性、http-equiv属性、charset属性のうち、少なくとも一つを指定する必要があります。 また、name属性、http-equiv属性を指定する際には、必ずcontent属性とセットで利用します。 セットで利用することでメタデータの定義(名前)とその内容が関連付けられます。

 ふむふむ。<meta>は<head>~</head>の中でしか使用されないんね

文字エンコーディングの指定

charset属性は、文書の文字エンコーディングを指定する際に使用します。 日本語の文字エンコーディングの値としては、”utf-8″・”shift_jis”・”euc-jp”などが挙げられます。大文字と小文字の違いは区別されません。 charset属性を指定したmeta要素は、一つの文書に一つだけしか配置できません。 尚、XML文書にmeta要素のcharset属性を指定する場合には、値には”utf-8″を指定します。

meta要素で文字エンコーディングを指定する場合、HTML 4では以下のように記述していました。<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

HTML5でも上の記述方法のままで問題ありませんが、charset属性を使用すれば以下のように短くすることができます。<meta charset=”UTF-8″>

文字エンコーディングを指定しないと、例えば、日本語で作成されたウェブページに英語版のブラウザでアクセスした場合などに文字化けが起きることがあります。 必須ではありませんが、できるだけ指定したほうが良いでしょう。

 HTML4からHTML5になるとこれだけ簡略化できるってことね。文字エンコーティングはこれ一択っぽいから覚えてしまおう。

<meta content=’IE=edge,chrome=1′ http-equiv=’X-UA-Compatible’>

ここなんやけど

IE対策

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IEで閲覧している場合、Google Chrome Frameで表示します。

Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。

Google Chrome Frame(GCF)とは、IEでGoogle Chrome相当のレンダリングエンジンを利用可能にするIEのプラグインです。 インストールすると、IE8以下でもCanvas、CSS3、HTML5、高速なJavaScriptエンジンが利用できるようになります。

 どうやらChrome Frameへ切り替えますよ~って感じのことらしいんやけど現時点ではChrome Frameなんて知る人ぞ知るくらいのレベルらしいんでコード中の『chrome=1』は必要ないみたいです。(ってことはこのLP作った人はどっかからそのままコピペしたって可能性がむちゃくちゃ高いねwwめんどくさがりなひとやなwもしくはこのLP自体がむちゃくちゃ古いものかやね)

とりあえずいらないみたいなんでここは削除しちゃいます。

はー疲れたw

まだヘッダー部分の入り口くらいやのにどんだけ時間かかってんだよって話w

昼休憩とかネット回線関連の電話とか小休憩とかこのメモとかしてたからしゃーないけどまじで時間かかるw

ちなみに現在時刻17時15分ww

ほんで今日はなぜか7時くらいに目を覚ましてしまうということがあったんで、ちょいと眠気もきてる

というわけでちょいと仮眠たーいむ

そのまま夜の用事をしてきたんで記事追記できず