peeks-blog

解説動画

かーとまん氏の解説動画が参考になりそう

関連知識

OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。
★og:title
og:titleにはページのタイトルを指定します。タイトルの設定はで通常行いますが、og:titleに別のタイトルを設定すると、ソーシャルなどでシェアされた際は、そちらが優先して表示されます。設定しない場合は、が表示されます。
★og:type
content属性に、オブジェクトタイプを記述します。様々なものが選択できます。
★og:image
og:imageは画像を指定することができます。画像を指定すると、シェアされたときなどに表示する画像を決めることができます。画像の指定方法は絶対パスで行う必要があります。



「isara模写ではどんなスキルが学べるの？」このサイトを模写することで、次のスキルを学ぶことができました。他にも色々あったので、また後日詳しくまとめていこうと思います。
・CSS
背景画像の挿入・背景画像の表示
ボタンを角丸にする方法
ブロック要素の中央揃えにする方法
レスポンシブデザイン
レスポンシブサイトでの改行調整（display: none;）
見出しに鍵カッコの装飾
枠線の上に画像を乗せる
リスト表示（中点なし）
CSSで三角形を描く方法
ナビゲーションバーの追従
・jQuery
アコーディオンメニュー
ページの一番上に戻るボタン
・その他
fontawesome
bootstrap
twitter・facebookボタンの挿入



始めた当初は、最初の頭の部分を作って1日終わりました(笑)ですが、途中からは少し悩んで止まるくらいで、サクサク進めることができました。おそらく、詰まってしまうポイントさえわかっていれば、こんなに時間はかからなかったと思うので、準備とコツの紹介をしていきます。
★素材の入手
ChromeのImage Downloaderを使う
⇒全ての画像は入手できない
Chromeのディベロッパーツールを使う
⇒ディベロッパーツールを開く
⇒Sourcesを選択
⇒wp-content→themes→imgで画像が見れる
⇒右クリックでダウンロード
結局はディベロッパーツールを使わないと必要な素材は入手できませんので、注意しましょう。
★Flexboxとgridの知識
例えば、要素を横に並べる時に使う方法は色々あります。blockやfloatなどなど。ですがFlexboxとgridのみで十分です。また、今最も人気があるレイアウトを組む方法です。ですが、Flexboxでは要素を並べる割合を指定できないため、gridを用いて割合を変えます。
★jQueryのほんの少しの知識
先ほども述べましたが、テキストの格納とサイトの一番上に戻るボタンのみに用います。以下の記事で詳しいやり方が述べられているため、参考にしてください(上は私の記事です)。
★その他
max-width:100%にしておけば、だいたい崩れない
bodyにmin-width:1024pxで、レスポンシブの謎の余白を消す
display:noneで要素を消滅させる
⇒HTMLにクラス指定
⇒PCサイズでは消滅させるようにする
⇒スマホのみにクラスを適用させることができる
background-img:url(画像の場所)を指定し、
background-size:coverで画像を背面配置
位置はbackground-position:で調整
困ったらググる



iSaraのLP（ランディングページ）は，このBootstrapを使用して作られています．container，row，colといったクラスClass名は，BootstrapのクラスClassです．模写コーディング前に，Bootstrapを学んでおきましょう．学習方法としては，私の場合，ドットインストールを使って勉強しました．
Bootstrapの最新版は，バージョン4です．しかし，iSaraのLP（ランディングページ）では，バージョン3が使用されています．Bootstrap3と4では，異なる点がいくつかあります．

学習メモ

使ったことが無ければ、SASSのSCSS記法がいいかなと思います。とくにBEMを採用するのであれば、”&”がかなり威力を発揮します。それに変数化できるものは極力変数化しておくと、特に後述のメディアクエリ周りでかなり威力を発揮します。
現時点では、FLOCSSをちゃんとやることが最適解かなと思います。ドキュメントも日本語で整備されているし、説明も細かいのでおすすめ。Frontrend in Nagoya で存在を知ってから3ヶ月くらい取り入れてやっていますが、SMACSSとかやっている時のモヤモヤが解決されてていいです。 最初からBEMを使うことが前提になっていることも良いと思います。
とりあえず何かしら公開されているCSS設計思想を取り入れる。大事なのはそれがドキュメントになっていることです。オレオレ設計なんて、1年もすれば、オレオレ設計ver5.0（下位互換性無し）くらいになっている事が多いので、ろくなもんじゃないです。
特に何も考えたくなければ、BEMを採用することをおすすめします。CSSには名前空間という概念が存在しないので、classの命名には気を遣わないとすぐに破綻しますし、一般的な名詞を使うと、それが他のCSSと干渉しがちです。
モジュールごとにファイルを分ける。面倒くさいと思いますが、PHPとかでClassごとにファイルを分けるくらいのノリで分割しましょう。モジュールの量、粒度が視覚化されやすいです。また、感覚的に一つのモジュールから他のモジュールに触りづらくなります。CSSがどんどんプログラミングチックになってきているので、プログラミングで割と使われているやり方を取り入れると都合がいいことが多かったりします。



【meta X-UA-Compatible】をわざわざ指定する必要はあまりないかもしれません。
この指定をするとInternet Explorerを使用している人が最新バージョンでサイトを表示する、例えばInternet Explorer8の人でも最新バージョンのInternet Explorerと同じ様に見られるようになる、と誤解している方が多くいるようですが、実際は違います。正確には『利用できる中で互換性のモードを設定できる』ということです。実際はどちらかと言うと、下位互換またはバージョンの指定、といった感じではないでしょうか。



行間、文字サイズ、各ブラウザ間の誤差、表示速度の改善、コーディング完了後のデザイン検証、画質調整、オリジナルのJavaScript開発、アニメーションの導入、多くのアップデートに耐えられるコード設計など、自分自身が納得し、「これで完璧です」と胸を張って言えるようにするためにはとても多くの時間が必要になります。
必ず「納期」というタイムリミットが存在します。この納期までにいかに質の高いものをこだわって作れるかが勝負であり、「コードやデザインを調整する時間」をいかに確保するかが重要になってきます。
コーディングを効率的に行うことでスケジュールに余裕が出ることはもちろん、デザイン検証に多くの時間を使えるというメリットもあります。特にJavaScriptやSVG、Canvasを用いた動きのあるデザイン（アニメーション）は実際に開発してみないとLPのデザインとマッチしているかどうかの判断が難しいため、検証の時間は欠かせません。
そして、各ブラウザにおける表示のチェック、誤字脱字の確認と修正も大切な仕事です。これらを行う時間も余裕を持って用意したいところです。「客観的に自分たちが作った物を見直す」ためには時間を空けることがとても重要だからです。
さらに、昨今のフロントエンドは非常に進化し、難解さが増しているため、余裕をもって勉強できる時間を確保しなければなりません。効率化を常に意識して行い、ハイクオリティの仕事を素早く完遂し、新たな技術を取り入れ次の仕事でアウトプットする。この正のサイクルを作り出せない技術者の価値はどんどん下がり、新たな時代の流れに取り残されると言っても過言ではないほど進化は高速です。
Sassやタスクランナーの導入など、コーディングを効率化するツールは数多く存在していますし、日々進化しています。ですから、どんどん新しい技術を導入し、一番作業が速くできる環境を構築することが大切です。



レスポンシブデザインでは、共通のHTMLファイルをcssで画面サイズに合わせて調整します。画面サイズが異なるPCとスマートフォンでは、当然見せ方も変わります。例えば、PCでは画像を2枚横並びで配置しているが、スマートフォンへの場合は縦一列に表示させたいといったことが想定されます。その場合は、「flexbox」が便利です。flexboxは「Flexible Box Layout Module」のことで、柔軟なレイアウトを可能としたボックス要素です。レスポンシブデザインと相性が良く、要素の並び方や配置を簡単に制御できます。「display:flex」と指定することでFlexboxコンテナーを定義することができ、その子要素にさまざまなプロパティを使用できます。
→レスポンシブのコーディングでは、Flexboxが欠かせない。



LPのコーディング案件はとても多くて、数をこなしている内に「よく出くわすパターン（構成要素）」みたいなものが分かってきました。今コーディングを勉強しているほとんどの方は仕事に繋げるためにHTMLやCSS、JavaScriptを勉強していることと思います。ただ、いったい何ができれば仕事ができるレベルなのか分からない、という疑問や不安は常に胸の中にあるかと思います（わたしもそうでした…）
1.1 横並び
1.2 カード
1.3 固定ヘッダー
1.4 スムーススクロール
1.5 トップへ戻る
1.6 背景画像
1.7 ヒ－ローイメージ
1.8 スライダー
1.9 ドロワーメニュー
1.10 モーダル
1.11 お問い合わせフォーム
1.12 リスト
1.13 テーブル
1.14 パララックス
1.15 アコーディオン
1.16 埋め込み
1.17 ボタン
1.18 マウスホバー（アニメーション）
1.19 ローディング画面
1.20 on / off
1.21 SNSボタン



letter-spacingとは文字間の隙間を指定するプロパティです。負の値を指定することもできます。
・normal（初期値）；ブラウザやフォントに応じた通常の文字間隔が使用されます。
・長さ：デフォルトの文字間に付け加える隙間を数値＋単位（px, %, pt, emなど）で指定します。



metaタグとはmeta要素とも言って、Webページの情報を検索エンジンやブラウザなどに伝えるタグのことです。イメージとして、metaタグは検索する人への道標のようなものだと思ってください。
特に設定をおすすめしているのがこの2つです。
・メタディスクリプション（meta description）
検索エンジンに対して「このWebページの概要はこんな感じです」と伝えるmetaタグです。先ほども説明した通り、検索結果のタイトルの下に表示されます。目安としては100〜120字程度で、少し文字数をオーバーしても問題ありません。また、書く内容としては、全ページ違うものを設定します。直接SEOに関わるわけではありませんが、検索した人がまず目にする部分です。クリックしたくなるような文章を書いておけば、クリック率が上がるので、間接的ですがSEOに効果があるかもしれません。ただし、こちらは必須ではありませんので、書かないという選択肢もあります。その場合は、検索エンジンが本文の中から自動で拾って表示してくれますのでご安心ください。
・メタキーワード（meta keywords）
そのWebページの内容を表すキーワードを半角カンマ（,）区切りで複数書きます。titleタグや本文に書かれたキーワードで特に重要だと思われるキーワードや表記ゆれを書いていきます。キーワードの数は3～5個程度です。書きすぎると検索エンジンによってはスパム判定されてしまうこともあるようなので気をつけてください。基本的にWebページを見に来てくれた人がこのタグを見ることはありません。あくまでも、システムのためのタグです。ただし、Googleは検索順位を決めるうえでメタキーワードを一切見ていないので、こちらも記載は必須ではありません。しかし、将来的にメタキーワードを使うようになった場合に、全てのページにキーワードを入れていく作業は大変な労力になります。なので、念のために入力しておくことをおすすめしています。


backgroundはWebデザインで必ずと言っていいほど使用するプロパティの一つです。つまり、確実にマスターすることが求められます。ちょっと難しいなという人も安心してください。backgroundプロパティは注意するポイントが決まっており、それを意識すれば恐れることはありません。
★backgroundとは
「background」は、設定することより、背景の色を変更したり、画像を表示したりできるCSSプロパティです。backgroundで色や画像を設定するメリットは、HTMLで要素として表示させ、「display」などを使って、要素を上や下に配置するよりも、より容易に効果的な見栄えを実現できるからです。
「imageタグ」との違いは、「imageタグ」はインライン要素として検索エンジンも認識しますが、「background」で表示した画像はデザインとして扱われます。従って、検索エンジンにも認識してほしい重要度の高い画像はhtmlで書いた方が良いですが、それほど重要度が高くないものは「background」で画像を設定する方が良いでしょう。
★backgroundプロパティの種類と値
backgroundプロパティには、「background-」で始まる幾つかの種類があります。以下の表では、よく使われる7つのbackgroundプロパティです。それぞれに設定ができますが、一括でも指定できます。また、それぞれに取れる値も違います。
・background-color
「rgba()」か「#fef4f4」など16進数の値が取れます。
・background-image
url(絶対パス)かurl(相対パス)を設定します。
・background-size
「cover」、「contain」、「%」、「px」などが設定できます。
・background-position
この値は、「px」、「%」の指定の他に「center」などの指定が可能です。
・background-repeat
値は「repeat」「repeat-X」「repeat-Y」「no-repeat」の4つをとることができます。
・background-attachment
値は、「scroll」、「fixed」、「local」のうちどれか1つをとります。
・background-origin
値は、「border-box」、「padding-box」、「content-box」の3つをとります。
・background-clip
値は、「border-box」、「padding-box」、「content-box」、「text」の4つをとります。



●OGPってなんのこと？
OGPとは、「Open Graph Protcol」の略でFacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。 SNS上でURLが共有された際に設定しておいたタイトルや画像、説明文などが表示されるようになり、ユーザーに対してWEBページの内容を詳しく伝えることができます。

●OGPを設定した際のメリットは？
OGP設定をしていなかった場合、Facebook側が自動的に説明文や画像を表示してしまい、ページ内容がユーザーに正しく伝わらなくなります。適切に設定することで、どのようなページで何を伝えたいのかが明確になります。そうすることで、共有されたユーザーの訴求率が高まり、より多くの人に記事を見てもらうことが可能になります。

●OGPの基本的な設定方法とは
OGPはmetaタグをHTMLソースコード中の~内に記述することで、設定ができます。

●Facebookでシェアする際の設定方法
Facebookでは、上記で説明した基本設定にプラスして「fb:app_id」を設定することができます。
アプリ ID(fb:app_id)
サイトやブログの管理者をFacebookに伝えるためのタグになります。また、いいねの数やどれくらいの人が見てくれたのか、どの時間帯がユーザーの目にとまりやすいかなど、Facebookからサイトへのトラフィック分析ができるFacebookインサイトを利用できるようになります。

●Twitterでシェアする際の設定方法
Twitterでは「Twitte:card」と「twitter:site」を設定します。
・Twitterカード(Twitte:card)
Twitter上での表示タイプを指定するタグになります。カードの種類はブログやwebサイト用、アプリ配布用、動画サイト用と全部で4種類あり、それぞれ見せ方が変わってきます。
・ユーザー名(twitter:site)
@から始まる、Twitterのアカウント名を入力します。