本日の学習範囲

ドットインストール

・はじめてのHTML #08〜#14
・はじめてのCSS #01〜#04
（学習時間：5時間）

HTML学習メモ

(VS Code)選択した行を上or下に複製する方法

[shift]+[option]+[↑]or[↓]

コメントの書き方

<!-- 文字 -->
「ページのソースを表示」を押すと見える
VS Codeでは、[command]+[/]でコメント化ON/OFFの切り替えができる

(VS Code)選択した行を上or下に移動する方法

[option]+[↑]or[↓]

headerタグ

</header></header>
サイトのヘッダー部分を構成する

footerタグ

<footer></footer>
サイトのフッダー部分を構成する

sectionタグ

<section></section>
文書のセクションを構成する

ulタグ

<ul></ul>
unordered listの略
順番のないリストを構成する

olタグ

<ol></ol>
ordered listの略
順序のあるリストを表示する

liタグ

<li></li>
リストの項目を記述する
ul要素内もしくはol要素内に記述する

aタグ

<a 属性></a>
anchorの略
囲った部分をハイパーリンクとして表示する

target属性

<a href="URL" target="">
リンク先を開くフレームやウィンドウを指定する

_blank

<a href="URL" target="_blank">
新規ウィンドウでリンク先を開く

MDN

https://developer.mozilla.org/ja/
HTMLやCSSなどに関する情報を提供しているサイト

CSS学習メモ

CSS

Cascading Style Sheetsの略
Webページ作成に使用するスタイルシート言語
HTMLによって構造化された文書のデザインを指定する
セレクタ {プロパティ名: 値;}

(VS Code)記述されているファイルに飛ぶ方法

ファイル名にカーソルを合わせて、[command]+クリック
ファイルが存在しない場合は、作成される

セレクタ

変更の適用先の要素を指定する

プロパティ

変更することを指定する

colorプロパティ

文字の色を指定する

RGBカラーモデル

{color: rgb(赤の割合, 緑の割合, 青の割合);}
red、green、blueの色の割合を0〜255で指定する

カラーコード

{color: #○○○○○○;}
16進数(0〜9、a〜f)で色を表現する

コメントの書き方

/* 文字 */

font-familyプロパティ

フォントを指定する

その他

はじめてのHTMLの動画全て視聴した後、動画を見ながら書いてきたコードを、
ブラウザに表示されているページのみを見て書けるかやってみた。
bodyタグ内は書けており、ブラウザで表示させても見た目は変わらなかったが、
コードを確認するとheadタグ内でいくつかのタグ(link refやmeta nameなど)が抜けていたので、
これからは忘れないようにする。

はじめに

今回はCSSについてです。
主にエビデンスとして

CSSの概要

CSS は、正式名称をCascading Style Sheetsと言いウェブページのスタイルを設定するコード。
文字を赤色にしたり、主にデザインよりなスタイルシート言語。

CSS ルールセットの構造

全体の構造をルールセット（ルール）と呼ぶ
ルールには各パーツに名前がある
それが下記である。

パーツ

• セレクタ (selector)
  • ルールの先頭にあるHTML要素名
  • 別の要素をスタイルするには、Selector を変更する
  • 今回はPを設定している
• 宣言 (declaration)
  • color: red; のような単一のルールで、要素のプロパティのうちどの要素をスタイルするかを指定する。
• プロパティ (property)
  • 指定された HTML 要素のスタイルを設定する方法
  • 今回は color は＜p＞要素のプロパティ
• プロパティ値 (property value)
  • プロパティの右側にはコロンの後にプロパティ値があり、与えられたプロパティの多くの外観から 1 つを選択

CSSで記述する上での注意点もあげます
注意点
- 各ルールセット (セレクタを除く) は中括弧 ({}) で囲む必要がある
- 各宣言内ではコロン (:) を使用してプロパティを値から分離する必要がある
- 各規則セット内でセミコロン (;) を使用し、各宣言を区切る必要がある。

他にもさまざまな種類のセレクタがある。詳しくはセレクタガイドを参照
セレクタガイド

CSSのコード

CSS読み込み

まずはHTMLファイルにCSSファイルを読み込んでもらうように紐付けパスを入力
ヘッダー情報に記載する！
※先にCSSファイルはstylesフォルダ「style.css」で格納している。

test.html

<link href="styles/style.css" rel="stylesheet" type="text/css">

ページの文字を全て色を変える

今回は赤色に変える
※＜p＞＜/p＞で囲んでいる文字は色が変わる

style.css

p {
  color: red;
}

一度に複数のプロパティ値を変更する

style.css

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

複数の要素を選択する

カンマで区切ることで一気にできる

style.css

p,li,h1 {
  color: red;
}

お洒落なフォントを設定する

最初にGoogleフォントから洒落たフォントのURLをGETしてくる
手順参考

test.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

全体のフォントサイズと入手したフォントをHTMLに反映させる

style.css

html {
  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
}

ページの色を変更する

今回は青色を設定している

style.css

html {
  background-color: #00539F;
}

ボディを並べ替える

style.css

body {
  width: 600px;/* bodyは常に600Pxの幅になる。*/
  margin: 0 auto;/*最初の値が上下、最後の値が左右（今回は使えるスペースを均等に配置している）*/
  background-color: #FF9500;/*背景色をオレンジにする*/
  padding: 0 20px 20px 20px;/*値は上・右・下・左の順に設定される*/
  border: 5px solid black;/*ボディの全側面に 5 ピクセル幅の黒ベタの境界線を設定するだけ。*/
}

終わりに

CSSをいじれるようになるだけでWebページの幅が広がって楽しい

※CodePenでは失敗します。

See the Pen Clipboard Write by 匠君 (@takumikunn15) on CodePen.

ブラウザ対応表

テキストを画像化してimg要素としてdivに配置し、iPhoneやデスクトップ版のSafariで表示したら、なんだか画像のサイズがおかしい。CSSに指定したheightの寸法よりも大きく見える。インスペクタで要素の高さを確認したところ、問題のimg要素だけheightの計算値がおかしい！こんな現象にハマりました。発生条件が判ったのでメモ。

動作環境
macOS 10.14 (Mojave), Safari 13.1

現象

要素div.tabに固定のheightと上下にpaddingを持たせ、子要素としてimg要素をheight: 100%で埋め込みます（下図）。図で「LOREM IPSUM」はテキストを画像化したものです。デスクトップ版のChromeやFirefoxでは、上側のようにLOREM IPSUM画像がdiv.tabのコンテンツボックスにぴったり収まって表示されますが、Safariで表示すると、ある条件で画像がコンテンツボックスをはみ出してしまいます。

サンプルのコード

下記サンプルでは、テキストを画像化したファイルlabel.pngを２つの方法で親要素div.tab 内に表示しています。最初のdiv.tab は、img要素の高さをheight: 100%で指定したもの。２つ目のdiv.tabは、img要素の高さをピクセル値で直接指定したものです。

html

<div class="sample">
  <div class="tab"><img src="img/label.png" alt=""></div>
</div>
<div class="sample">
  <div class="tab px"><img src="img/label.png" alt=""></div>
</div>

css

.sample {
  width: 300px;
  margin-bottom: 20px;
}
.tab {
  height: 26px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: lightgoldenrodyellow;
}
.tab img {
  height: 100%;
  width: auto;
}
.tab.px img {
  height: 26px;
  width: auto;
}

Safariで表示した場合

冒頭に示した現象は次の手順で再現させることができます。下図のアニメーションです。Safariのインスペクタを開いて、.tabセレクタのpadding-top値を0から徐々に大きくしてみましょう。すると……

padding-topが19pxになった時、「LOREM IPSUM」が下側のものより少し大きく表示されるのがわかります。

この時、img要素の高さの計算値は27pxで、親要素div.tabのコンテンツボックスの高さ26pxを超えてしまいました。そのままpadding-top値を増やしていくと、画像もどんどん大きくなっていきます。
しきい値27pxとは、どうやら

padding-top + padding-bottom > height

となる地点のようです。つまり、height: 100%を指定したimg要素に対して、Safariはimg要素の高さを次のように算出しているように見えます。

	padding-top + padding-bottom	img要素のheight計算値
1	height以下	divのcontent boxの高さ
2	heightより大	divのpadding boxの高さ

CSSの仕様を確認

念のため、heightプロパティの値にパーセンテージを指定した時のCSSの仕様を確認しておきましょう。

heightのパーセンテージの基準は？
MDN: https://developer.mozilla.org/ja/docs/Web/CSS/height

<percentage>
包含ブロックの高さのパーセントで高さを定義します。

W3C: 10.5 Content height: the 'height' property

The percentage is calculated with respect to the height of the generated box's containing block.

包含ブロックとは？
MDN: https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block#Identifying_the_containing_block

包含ブロックを識別するプロセスは、要素の position プロパティの値に全面的に依存します。
1. position プロパティが static 又は relative の場合、包含ブロックはブロックコンテナー (略) 又は整形文脈を確立する要素 (略) である直近の祖先要素のコンテンツボックスの辺によって構成されます。

W3C: 10.1 Definition of "containing block"

1. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest ancestor box that is a block container or which establishes a formatting context.

今回のサンプルはこれに該当するので、img要素のheightをパーセンテージで指定した場合は、やはりdiv.tabのコンテンツボックス(paddingを含まない）の高さが基準になるはずです。¹

Chromeで表示した場合

実際、デスクトップ版のChrome(Blink), Opera(Blink)やFirefox(Gecko)では上記の仕様どおりに表示されます。IE11やEdgeブラウザでも問題なく表示されました。下図は、ChromeのDevToolsを使って同様にdiv.tabのpadding-topの値を増やしていった時のアニメーションです。paddingの値によらず、img要素の高さは26pxのまま変わりません。

WebKitの問題？

上記の現象はSafariのレンダリングエンジンWebKitの問題か？と思って、WebKitのBugzillaを検索したところ、ありました！これです。同じ現象です。

Bug 131486 - Percentage height on replaced elements is computed wildly incorrectly

なんと2014年4月10日にBugzillaに登録されて以来、ステータスNEWのまま放置状態orz
今回、たまたまスマホ用にdivのサイズを「divのpaddig > divの(content-boxの)height」になるまで小さく調整したため、このバグを踏んでしまったのでした。仕方なく、この要素だけimgのheightをpxで指定して回避しました。

---

1. position: absoluteにした場合は、paddingを含んだ高さが基準になります。 ↩

3秒後に、指定のリンク先のURLに自動遷移させたい場合は下記の様なコードを記述する。

htmlファイル

%meta{content: "3;URL=指定のリンク先のURL", "http-equiv": "REFRESH"}

1 　デプロイしたいフォルダを用意

pokemon-site/
           |- src/
               └ img/
                  └ poke.jpg
           |- index.html
           |- styles.css

index.htmlにJavaScriptも書いています。
リポジトリはこちら
https://github.com/wafuwafu13/pokemon-site

2　Netlifyにアクセスしてドラッグ&ドロップ

Netlify Drop にアクセスし、「Drag and drop your site folder here」と書かれている部分にフォルダ(今回の場合はpokemon-site)をドラッグ&ドロップ

3　1秒待つ

https://nervous-curran-86c841.netlify.app/

URLが生成される。
このURLは変更できるし、Netlifyにログインしている場合は有効期限がない。

はじめに

今回は完全備忘録です。

階層構造について

この「〇〇ファイル」はここと決まっているらしい
以下表がその通り

ファイル	Htmlファイル	画像ファイル	CSSファイル	JavaScriptファイル
フォルダ	階層トップ	images	styles	scripts

Web サイトのデイレクトリ構成参照

コードについて

ページのタイトル

test.html

<title>Test</title>

段落タグ

test.html

<p>Test表示</p>

単語の強調

test.html

<p>これは<strong>テスト。</p></strong>

画像

test.html

 <img src="images/freeicon.png" alt="Testimage">

見出し関連

test.html

<h1>１番目に大きい</h1>
<h2>２番目に大きい</h2>
<h3>３番目に大きい</h3>
<h4>４番目に大きい</h4>

リスト

test.html

<ul> 
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ul>

文字埋め込みリンク

test.html

<a href="https://www.google.com/">Google</a>

終わりに

個人的HTMLはマークダウンみたいに感じます。
動的にWebページが動くようになればさらに楽しくなります。

この内容について

この内容は、AMPをはじめたい方に向けた基礎的な記事になります。

AMPとは ( アンプ )

Accelerated Mobile Pagesの略で、
モバイル端末向けに最適化したWebページの読み込みを高速化できるフレームワーク。
AMPは、WebページのデータをGoogle側がキャッシュしてくれており、リクエストがあった場合に
そのデータをレスポンスするので高速化が実現されています。

ちなみにAMPは、2015年10月7日に発表された新しめな技術です。

AMP公式サイト

導入方法

HTMLファイルを用意する

作成するAMPページ用にHTMLファイルを用意します。
この後の説明は全てそのHTMLファイル内に記述してください。

必要な記述をする

DOCTYPE宣言

HTML

<!DOCTYPE html>

htmlタグ

ページをAMPコンテンツとして識別します。
html開始タグの小なりの前に「⚡️(雷マーク)」か「amp」と書きます。

HTML

<html ⚡️>
  <!-- headタグ -->
  <!-- bodyタグ -->
</html>

headタグ

HTML

<head>
  <!-- headタグの中身 -->
</head>

bodyタグ

HTML

<body>
  <!-- bodyタグの中身 -->
</body>

ページエンコード ( headタグ内 )

ページのエンコードを識別します。

HTML

<meta charset="UTF-8">

AMP JSライブラリを読み込む ( headタグ内 )

HTML

<script async src="https://cdn.ampproject.org/v0.js"></script>

canonicalにページを指定 ( headタグ内 )

重複ページがないよう設置するcanonicalに正規としたいページを指定します。(そのページのURLでOK)

HTML

<link rel="canonical" href="ページURL">

レスポンシブなビューポートを指定 ( headタグ内 )

モバイル端末に適した表示サイズにします。

HTML

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

ボイラーテンプレート ( headタグ内 )

AMP JSが読み込まれるまで、コンテンツを非表示にする記述で、AMPに必須のコードです。

HTML

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

最終的なコード

HTML

<!DOCTYPE html>
<html ⚡️>
  <head>
    <meta charset="UTF-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <link rel="canonical" href="ページURL">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <!-- bodyタグの中身 -->
  </body>
</html>

テストする

下記のサイトを使って、AMP対応できているかテストします。
AMP テスト

コードをコピペするか、公開したサイトのURLがあればテストできます。

AMPの記述にエラーがなければ、下記のように「有効なAMPページです」と表示されます。

注意点

AMPは癖のあるコードの書き方をします。
例えば、imgタグは使えず、代わりにamp-imgタグを使います。
上記は一例で、他にも制限が多いです。
また、AMPはCSSやJSファイルを読み込むことができません。
そのため、CSSやJSを適用させるには、インラインでの記述(styleタグやscriptタグでの記述)をしなければいけません。

AMPによるメリット・デメリット

メリット

• 表示速度が高速化されるので、ユーザのストレスが減る
• 良記事であれば、リッチリザルト(カルーセル)に採用される可能性がある

総合的に言うと、ページ流入が増えるかもしれないと考えましょう。

デメリット

• 開発発展途中な部分もあるので、その都度の対応が必要になる
• 制限が多いため、APIがAMP対応しているかなども注意していなければいけない
• コードの書き方に癖があるため、エラーが出やすい

総合的に言うと、管理工数がよりかかってしまうと考えましょう。

まとめ

GoogleはAMPを推奨しています。
しかしながら、導入する工数がかかってしまうので、採用するかどうかは
今後も考えながらにするかと良いと思います。

個人的に、ニュースサイト系なら導入する価値はあるのかなと思います。
書き方の癖が本当にあるので、また別記事にまとめていこうと思います。

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)

表題の対応メモです。

<input type="text" class="text" placeholder="hoge" name="hoge" value="ああああ">

こんな感じのを複数行の入力フィールドにしたい場合、textareaにするのが手っ取り早いですが、
<textarea>タグにvalueは使えないので。

<textarea placeholder="hoge" name="hoge">ああああ</textarea>

タグで囲むことで解決出来ます。

参考

http://www.htmq.com/html/textarea.shtml

今回はFizzBuzz問題をHTMLのscriptタグ内に書きました。

FizzBuzz問題とは？

1から30まで順に数えて出力して行き、3で割り切れる数は「Fizz」5で割り切れる数は「Buzz」両方で割り切れる数は「FizzBuzz」と出力する、ようにプログラムを書く問題です。

これが書けるか書けないかでプログラマー志願者を仕分けられるようになったようです。実際今でも使われていますから押さえておいて損はないと思います。FizzBuzz詳細

私が書いたコード

sample.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset=UTF-8>
        <title>loop</title>
    </head>
    <body>
        <script>

                var i = 0;
                for (i = 1; i <=100; i++) {
                if (i % 15 === 0 ) {
                        document.write("<p>" + "FizzBuzz" + "</p>");

                    } else if(i % 3 === 0) {
                        document.write("<p>" + "Fizz" + "</p>");

                    } else   if(i % 5 === 0 ) {
                        document.write("<p>" + "Buzz" + "</p>");
                    } else 
                    document.write("<p>" + i + "</p>");
            }
        </script>
    </body>
</html>

書く順番

ifは条件が厳しいものから順番に書いていった方が良いです。今回の問題だと"Fizz"や"Buzz"を表示させるifを先に書いてしまうと3と5の倍数の数字がif文を通過するとき、3の倍数をFizzに置き換えるところで条件を満たしてしまうのでその先の処理は行わないからです。

100日チャレンジの331日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
331日目は、

おはようございます
331日目　8h
・ポートフォリオ作成
cssのアニメーションいれたり、なんかいろいろ。#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) May 31, 2020