2日目やってみた

• 日中出たり入ったりが多々あったせいか、疲れてしまい1ページ（フォントカラーとサイズ）だけしか出来なかった
• 次は背景色変更とサイズの修正
• 個人的にはなんかHTMLらしくなってきたと思う

参考サイト↓
http://www.htmq.com/html/indexm.shtml

insert mode 勝手に発動していた

css

class は　."class名"
id は　#"id名"

pタグの中のclassを指定するのは　　　p."class名"
h1,p 　　　　　　　両方を指定
h1,".class名" 　　　両方を指定
div p 　　　　　　　divタグのpを指定　
h2:hover 疑似クラスを使ったセレクタ　状態を指定している　
padding 内側の余白
margin 外側の余白　
padding:○px.○px.○px.○px.; 上から時計回りに指定できる　
<!-margin :auto; よく使う　

他のメモはHTMLタグが反応しまくって見えにくいので割愛しますｗ　

どうも7noteです。分かっているようで難しいautoと100%の違い。

widthを指定する際、初期値でautoが入っています。
しかし、場合によっては100%を指定しなければならない場面もあります。

特に初心者の方がごっちゃになりやすいと思うので、違いを分かりやすくまとめてみました。

違い① ブロック要素かインライン要素での違い

ブロック要素の場合

• width: auto;
  • 横幅　＝　親要素の幅いっぱい
• width: 100%;
  • 横幅　＝　親要素の幅いっぱい

インライン要素の場合

• width: auto;
  • 横幅　＝　コンテンツ分
• width: 100%;
  • 横幅　＝　コンテンツ分（widthは効かない）

インラインブロック要素の場合

• width: auto;
  • 横幅　＝　コンテンツ分
• width: 100%;
  • 横幅　＝　親要素の幅いっぱいまで広がる

※コンテンツ分 = 文字なら文字数分、画像なら画像の横幅分が要素の幅になる。

違い② 左右のmarginが加わると・・・

ブロック要素の場合

• width: auto; margin: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白
• width: 100%; margin: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

インライン要素の場合

• width: auto; margin: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; margin: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白（widthは効かない）

インラインブロック要素の場合

• width: auto; margin: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; margin: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

違い③ 左右のpaddingが加わると・・・

ブロック要素の場合

• width: auto; padding: 0 50px;
  • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい
• width: 100%; padding: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

インライン要素の場合

• width: auto; padding: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; padding: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白（widthは効かない）

インラインブロック要素の場合

• width: auto; padding: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; padding: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

違い④ 左右のpaddingが加わり、かつbox-sizing: border-box;をかけると・・・

ブロック要素の場合

• width: auto; padding: 0 50px; box-sizing: border-box;
  • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい
• width: 100%; padding: 0 50px; box-sizing: border-box;
  • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい

インライン要素の場合

• width: auto; padding: 0 50px; box-sizing: border-box;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; padding: 0 50px; box-sizing: border-box;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白（widthは効かない）

インラインブロック要素の場合

• width: auto; padding: 0 50px; box-sizing: border-box;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; padding: 0 50px; box-sizing: border-box;
  • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい

表で比較するとこんなかんじ

①width指定のみ

	ブロック要素	インライン要素	インラインブロック要素
width: auto;	幅いっぱい	コンテンツ分	コンテンツ分
width: 100%;	幅いっぱい	×（上と同じ）	幅いっぱい

②width・margin指定

	ブロック要素	インライン要素	インラインブロック要素
width: auto; margin: 0 50px;	幅いっぱい ＋ 左右にmargin	コンテンツ分 ＋ 左右にmargin	コンテンツ分 ＋ 左右にmargin
width: 100%; margin: 0 50px;	幅いっぱい ＋ 左右にmargin	×（上と同じ）	幅いっぱい ＋ 左右にmargin

③width・padding指定

	ブロック要素	インライン要素	インラインブロック要素
width: auto; padding: 0 50px;	paddingを含めて 幅いっぱい	コンテンツ分 ＋ 左右にpadding	コンテンツ分 ＋ 左右にpadding
width: 100%; padding: 0 50px;	幅いっぱい ＋ 左右にpadding	×（上と同じ）	幅いっぱい ＋ 左右にpadding

④width・padding・box-sizing指定

	ブロック要素	インライン要素	インラインブロック要素
width: auto; padding: 0 50px; box-sizing: border-box;	paddingを含めて 幅いっぱい	コンテンツ分 ＋ 左右にpadding	コンテンツ分 ＋ 左右にpadding
width: 100%; padding: 0 50px; box-sizing: border-box;	paddingを含めて 幅いっぱい	×（上と同じ）	paddingを含めて 幅いっぱい

まとめ

なんか画面外にまでスクロールできてしまったりするとき、この指定が適切でない場合がよくあります。

コーディングに慣れているととくに意識せず、適切なものを指定できるようになりますが、
コーディング初心者の頃はなんとなくで指定してしまいがちです。

自分で理解できていないソースはデザインが崩れてしまう要因になりやすいので、なんとなくではなくしっかり理解して考えられたコーディングが必要です。

実際に背景色を入れながら試してみると、それぞれの違いがよくわかると思いますのでやってみてください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

あいさつ

初めての人は初めまして！知っている人はこんにちは！
中学生プログラマーのAtieです！
今回もJSを学んできたのでそのアウトプットをしていきます！
今回は第二回目ですがもし第一回の記事を読んでいなければそちらのほうから読んでいただくとわかりやすいと思います！なぜJSが必要なのか？　(JS学習アウトプット)
今回は「JSのお仕事」ということでJSのお仕事(役割)について学んできました！
それでは！

前回の復習

従来のweb
- レスポンスがhtml
- ページ全体がレンダリング

現代のweb
- レスポンスがJSON
- 必要なところだけレンダリング
- リッチで使いやすい

JSのお仕事

JSのお仕事には主に二つあります
一つ目が

データのやり取り

二つ目が

DOM操作

です

順に解説していきます

データのやり取り

ではまずJSの一つ目のお仕事「データのやり取り」についてです
Twitterを例に解説していきます

まずはTwitterのhtmlの構造を見ていきましょう！(この構造とは限りませんし省略してあります)

home.html

<ul>
    <li>
        <div>
            <img src="~">
        <div>...</div>
        </div>
    </li>
</ul>

もし構造がこのようになっているとします
しかしこれだとスクロールすると新しいツイートが表示されないので
スクロールするとJSがwebAPIに「データが欲しいです！」と頼みに行きます
そしてwebAPIがDBなどにアクセスしてデータをとってきてJSに「ほれ！」とデータを渡します
そしてこの時に渡されるデータが「JSON」なのです
JSONについては前回学んだので説明は省きます

それでは渡されたJSONのデータを見てみましょう(これはあくまでも一例です本物のTwitterがこうだとは限りません)

data.json

{
    "data" : [
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        },
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        },
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        }
    ]
}

このようなデータになっていました！
しかしデータを受け取ったところでこのまま表示させるわけにはいきません
読みにくいのでhtmlに変換しますこれをパースといいます
パース自体は「解析」という意味で何もhtmlに変換することすべてがパースと呼ぶわけではありません
パースについてですがここからはDOM操作です

DOM操作

さぁ！先ほどwebAPIからjsonをもらうことができました！
「わーい！」
...
しかしまだ仕事は残っています
先ほど説明しましたがjsonをhtmlに変換して見やすくします
これをパースと呼びます

DOM操作の例を見るためにhtmlとjsonのデータを見てみます

home.js

<li>
    <div>
        <img src="data[0].src">  <!--jsonデータの0番目のsrcのデータがここに入る-->
        <h1>data[0].name</h1>    <!--jsonデータの0番目のnameのデータがここに入る-->
        <p>data[0].bady</p>      <!--jsonデータの0番目のbadyのデータがここに入る-->
    </div>
</li>

data.json

{
    "data" : [
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        },
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        },
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        }
    ]
}

htmlにはコメントを書いたのでhtmlファイルとjsonのデータを見比べてみてください
わかりやすいと思います
このようにhtmlをjsonに変換することをパースと呼びましたがこのようなことがDOM操作です

パースが終わることで新しいデータが読み込まれ新しい投稿が表示されます

まとめ

今回のまとめです！

JSのお仕事
- データのやり取り
- DOM操作

データのやり取りではJSがwebAPIにデータを取りに行きます
DOM操作ではとってきたjsonデータをhtmlに変換します(パースします)
この二つが主なJSのお仕事です

データのやり取りには
- 保存する
- ローカルに保存する
- cookie
なども含まれています

DOM操作では
- 追加
- 変更
- 削除
などもしています

最後に

ここまで読んでいただきありがとうございました
次回は実際にコードを書いてみます！
それでは！また次回に！

前回

AtieのTwitter
しまぶーのIT大学さんのTwitter

参考

【基礎から学ぶ JavaScript 入門 #2】Twitterを例にJavaScriptがどんな働きをするのか理解しよう【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

はじめに

初投稿です。よろしくおねがいします。
突然ですが皆さんは深層Webという言葉を聞いたことがあるでしょうか。おそらく聞いたことのある人にとっては「やばいもの」、「常人には理解できない動画の溜まり場」という印象があると思いますが、一般的にはWorldWideWeb(WWW)にある情報のうち、通常の検索でヒットされることのないもののことを指します。要するに会員制のページとか社内ツールなんかもすべて深層Webということですね。
そんな深層Webですが、実はHTMLにたった一行コードを追加するだけで簡単に作成することが可能です。今回はその方法についていい感じに説明していこうと思います。

その前にちょっと前ふり

深層Webの作り方について説明する前に、まずは検索エンジン(ここではGoogleを例とする)がどうやって情報を収集しているのかについて掘り下げて見ましょう。
一般的に検索エンジンはデータを収集する際、クローラーというプログラムを用いています。検索エンジンにおけるクローラーはWWWを巡回し、未知の情報を見つけたらそれをデータベースに登録、既知の情報が存在しないことを確認したらそれをデータベースから削除という処理を常に行っており、これによって膨大な量の情報を管理しています。
その後、検索エンジンはクローラーを用いて得た情報に対して査定を行います。査定の基準については本記事では省略しますが、それによって高い評価を得たページほど優先されて検索結果に表示されるという仕組みになっています。まとめると、
1. クローラーを用いてWWWを巡回
2. 巡回によって得た情報を基にデータベースを更新
3. 情報に対して査定を行い、評価の高いページを優先的に検索結果に表示
という3ステップによって検索エンジンの動作は成り立っています。

本題

検索エンジンの仕組みについて理解したところで、いよいよ本題に入っていきます。
とはいっても深層Webを作成する方法はいたって簡単で、HTMLの<head>~</head>内に以下のようなタグを追加するだけです。

deepweb.html

<head>
~~~中略~~~
<meta name="robots" content="noindex,nofollow">
~~~中略~~~
</head>

この中でも重要なcontent内のnoindex,nofollowについて解説していきます。

解説1

noindexタグは、前述の検索エンジンの仕組みを2番目の段階で打ち止めにする効果があります。2番目の段階で打ち止めにされるということは、3番目に行われるはずのページの査定が行われなくなり、結果として検索結果への表示を防ぐことができます。なお、noindexタグのついたページは検索エンジンからの評価の対象外になるだけでクローラーからの巡回そのものの対象外になるわけではないということに注意してください。

解説2

nofollowタグはどちらかというとSEO対策に用いることが本来の使い方ですが一応解説します。
例えば、"noindexタグのついたページAとnoindexタグのついていないページBがあり、ページBは内部でページAを引用している"と仮定します。このとき、ページBが検索エンジンから低い評価を受けてしまうと、巻き添えでページAも低い評価を受けてしまうことがあります。ここで対策として用いられるのがnofollowタグであり、引用先に指定したページの評価による影響をなくすことができます。

最後に

不適切な箇所などがあればどうか許してくださいコメント等で指摘をお願いします。

ハマったのでメモ。

fillTextで書いた文字がにじむ

結論から言うと、ここに書いてあることをやればいい。windowsなのでRatinaディスプレイ云々は関係ないと思い込みスルーしていたのだが、windowsの設定で「全体を大きくする」を使用していたことをすっかり忘れていた。

以下、ついでにハマったことメモ。

fillTextの高さがおかしい

高さの基準がデフォルトでalphabeticになっているため、CSS感覚で指定すると何か上にずれる。textBaselineをtopに指定すれば解決する。

canvasの画像をリサイズする

上の方法でcanvasの内部解像度を大きくすると、画像にした時に環境によって画像サイズが変わってしまう。jsで新しくサイズ固定のcanvasを作成し、そこに元canvasをdrawImageするのが手っ取り早い。

あいさつ

初めての人は初めまして！知っている人はこんにちは！
Atieです！
実は一度qiitaのアカウントを消したのですが「web系エンジニアになろう(勝又さん)」の本を読んで「qiitaのアカウントは必要」ということだったのでまた作りました！
qiitaでは主に学習のアウトプットをしていきます！
今回はJSのアウトプットをしていきます！JSはもともと学んでいたのですが「もう一度基礎からしたい！」と思ったのでしまぶーのIT大学さんの動画を参考に学ばせてもらいました！わかりやすくイラストも使っておりなおかつ「元Yahoo Japan!エンジニア」すごいですよね！さらに無料です！
いい時代になりました...

では！

なぜJSが必要なのか？

皆さんはなぜwebサイトにJSが必要かわかりますか？
「JSを学ぶのにそこから？」
と思った方「木を見て森を見ず」です
しまぶーのIT大学さんが言っていました
「普通学習するときは”文法”から入るけどそれはお勧めしない。まずは全体像をみて一つの技術を掘り下げていくほうが”文法”を使うタイミングなどがわかる」と
なのでまずは”文法”ではなく「なぜ必要なのか？」というところから学んでいきます

話を戻します
「JSはなぜ必要なのか？」わかりますか？
それは「JS未使用のwebサイト」と「AJAXを使ったwebサイト」の二つを解説する必要があるのでまずはそこから

JS未使用のwebサイト

最近はどんなwebサイトでもJSが使われるようになりました
それは便利だからです
どこが便利なのか？それは通信を見てもらうとわかると思います

JS未使用の通信
「example.comを見たい！」　→　ブラウザがexample.com(サーバー)にreq(リクエスト)を送る　→　サーバーがres(レスポンス)を返す(htmlファイル) →　ブラウザがhtmlファイルを受け取ってレンダリング(html,cssの支持通りにサイトを組み立てる)
大まかにこのような仕組みになっています(DBがどうのこうのなどは省略しています)
この方式だとページを移動するときにいちいちサイレンたリングしなければいけないので少し不便です

JS使用のwebサイト

では逆にJSを使っているwebサイトの通信はどうでしょうか
例として「ToDoListのwebアプリケーション」を見てみます
例えばタスクを追加するたびにページが再レンダリングされてはめんどくさいですよね？
さらにこの方法だと追加はできても個人個人で保存ができません

JSを使った場合はサーバーにreqを投げてDBに追加してもらったり消してもらったりしています(JSはセキュリティ上DBに直接操作することはできませんただNode.jsなどは例外)
こういうのを「AJAX」という
AJAXを使うことでページをいちいち再レンダリングせずに追加や削除ができます

このAJAXを使った最たる例が「Googl Map」です
自分は最近JSを学び始めたので昔のことは知りませんでしたが
昔のマップは画面に矢印が付いていてそれを押すことでその方向に移動する仕組みだったらしいです
そしてその移動するたびに再レンダリングが必要

しかし今のGoogle Mapは画面に矢印がなくさらに直感的に使えるようになっていますよね？そしていちいち再レンダリングすることもない
すごく使いやすいですよね！

従来のwebが
・JSがなくてもHPが見れる
・resで返されるのはhtmlファイル
・ページを移動するたびに再レンダリングする必要がある

JSを使ったwebサイトの仕組み

先ほどではJSが必要な理由について解説しました
ここでは具体的にどんな通信かを見ていきます

「example.comを見たい！」　→　ブラウザがexample.com(サーバー)にreq(リクエスト)を送る　→　サーバーがres(レスポンス)を返す(htmlファイル) →　ブラウザがhtmlファイルを受け取ってレンダリング(html,cssの支持通りにサイトを組み立てる)
ここまでは同じです
しかし「お問い合わせページに行きたい！」となったとき従来の方式ではもう一度上の方法が繰り返されますがJSを使うとresで返されるデータがhtmlではなくjsonというJSのデータが返ってきます
JSのデータとは配列などです

jsonデータの例

data.json

[
    {"id":"1", "name":"dog"},
    {"id":"2", "name":"cat"}
]

このようなデータがresで帰ってきます

AJAXを使用するとページを移動する際に「最低限」のレンダリングで済みます
例えば大体のHPの場合は「ヘッダー」と「フッター」は一緒のデザインになっていると思います
なのでメインであるところのみをレンダリングします
「フッター」と「ヘッダー」が再レンダリングされないので早いです

まとめ

JSを用いたweb

• より体験がいいwebサイトが見れる
• レスポンスで返すのは　JSON
• ページ移動時に最低限のレンダリング (ほかにもたくさんありますがきりがないので...)

従来のweb

• JSがなくてもHPは見れる
• レスポンスとして返すのはhtmlファイル
• ページを移動するたびに再レンダリングされる

JSすごいですね！

最後に

ここまで見ていただきありがとうございます！
最後に動画のurlがあるので「JSを学んでみたい！」という方は動画を見て学ぶのがお勧めです！
ではまた！

AtieのTwitter
しまぶーのIT大学さんのTwitter
勝又健太さんのTwitter

次回

学習,参考動画

【基礎から学ぶ JavaScript 入門 #1】フロントエンド開発でJavaScriptが必要な理由を解説！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】 しまぶーのIT大学さん