リンクを親要素いっぱいに広げるには 自分が忘れないように、メモとして書き残します。 [HTML] <div class="linkbox"> <a href="#"></a> </div> [CSS] .linkbox{ width:300px; height:300px; position: relative; } .linkbox a{ display: block; position: absolute; top:0; left:0; width:100%; height:100%; } 以上です。 割と簡単。
リンクを親要素いっぱいに広げるには
自分が忘れないように、メモとして書き残します。
[HTML]
<div class="linkbox"> <a href="#"></a> </div>
[CSS]
.linkbox{ width:300px; height:300px; position: relative; } .linkbox a{ display: block; position: absolute; top:0; left:0; width:100%; height:100%; }
以上です。 割と簡単。
自分用メモです 参考サイト CSSだけで実装可能！画面いっぱいに動画背景を表示する方法 参考サイトではmuted属性について触れていなかったので追加。 これがないとChromeで再生されませんでした。 HTML <div class="section"> <video id="bg-video" src="file/sample.mp4" poster="poster.jpg" autoplay loop muted></video> <div class="wrap"> コンテンツが入ります </div> </div> .sectionで背景にグレーのオーバーレイ、 #bg-videoで背景に動画を再生、 .wrap内でコンテンツを表示しています。 CSS #section{ background: rgba(0, 0, 0, 0.6); } #section #bg-video{ position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url('poster.jpg') no-repeat; background-size: cover; } videoタグの属性 属性 内容 controls 操作パネルの表示 muted 無音で再生 autoplay 自動再生 loop 繰り返し再生 poster 動画が表示できない場合や、再生する準備が整うまでの間に表示される画像を指定 playsinline iOSでvideoタグをインライン再生（iOS10から）
自分用メモです
参考サイト CSSだけで実装可能！画面いっぱいに動画背景を表示する方法
参考サイトではmuted属性について触れていなかったので追加。 これがないとChromeで再生されませんでした。
<div class="section"> <video id="bg-video" src="file/sample.mp4" poster="poster.jpg" autoplay loop muted></video> <div class="wrap"> コンテンツが入ります </div> </div>
.sectionで背景にグレーのオーバーレイ、 #bg-videoで背景に動画を再生、 .wrap内でコンテンツを表示しています。
.section
#bg-video
.wrap
#section{ background: rgba(0, 0, 0, 0.6); } #section #bg-video{ position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url('poster.jpg') no-repeat; background-size: cover; }
今回は、HTMLとCSSのパフォーマンスを向上させる小技と豆知識についてです。 しかしその前に、ブラウザがページをレンダリングする方法について知る必要があるでしょう。そこにはHTMLやCSS、JavaScript、そしてブラウザがWebページをエンドユーザーに表示する際に必要な手順のすべてが含まれます。 クリティカル・レンダリング・パス クリティカル・レンダリング・パスは、5つのステップから成っています。図解すると分かりやすいでしょう： 見たままですが、各ステップについて詳しくご説明しましょう。 DOMとCSSOMの構築 ほとんどのページはHTML、CSS、およびJavaScriptで構成されています。Webブラウザは、ユーザーに何をどのように表示するかを知る必要があります。そのため、ネットワークを介して送信されたHTMLページを解読し、ドキュメントオブジェクトモデル（DOM）を構築します。また、HTMLタグ（<p></p>、<div></div>、<h1></h1>）」を読み、それらをトークンに変換します。これらのトークンは同時にノードへと変換されます。 各トークンの開始タグと終了タグを順番に処理することで、ブラウザはそれらの階層（親と子）を確立します。 これは見かけよりもずっと簡単です。上の図で、DOMはすべてのノード（枝）とその子（葉）を持った一本の木のようなものと想像してください。この木は、HTMLを構築するためのノードの依存関係をすべて含んでいます： W3C websiteより DOMはマークアップ全体を表し、ブラウザによって徐々に構築されます。HTML5以降、ブラウザはページ全体が一度にブラウザに送信されるのを待つ代わりに、HTMLストリーミングに対応するようになりました。これの素晴らしいところは、情報を受け取ると同時にレンダリングを実行できる点です。 DOMを構築した後、ブラウザはCSSオブジェクトモデル（CSSOM）を構築するためにページ内で参照されている、あらゆるスタイルを調べ上げます。CSSOMは、文書に適用する必要のあるスタイルの規則を表しています。これはDOMがどう構築されたかに非常に似ていますが、この過程でそれぞれの子要素は、その親要素に適用されたスタイルを継承します ― cascading style sheets（一繋がりのスタイルシート）という名前はそのためです。 スタイルの部分的な処理は不可能なため、すべてのスタイルの規則が送信されるまで、ブラウザはどのスタイルの規則がどのノードに適用されているかを推測できません。これが、CSSがレンダリングをブロックする要素となる理由です。 DOMとCSSOMの混在は、レンダーツリーと呼ばれます。レンダーツリーは、すべてのノードとその依存関係、およびそれらに適用されるCSSルールすべてを含んでいます。 レンダーツリー すべてのノードを構築した後、ブラウザはどのノードをページ上に表示するのかを知る必要があります。レンダーツリーは、ページ上に表示される可視コンテンツそのものです。 ブラウザはルートから起動し、DOMとCSSOMからすべての可視ノードをコピーします。実行される手順は、おおよそ以下のとおりです： ルートから起動し、各可視ノードをたどる メタタグやリンクなど、可視ノードではないものもあります。 display: noneなどのCSSを使って、隠されているノードもあります。 各ノードに対して一致するCSSルールを見つけて、適用する 可視ノードとそのコンテンツ、スタイルを出力する レイアウト すべてのノードにスタイルを設定したら、次はそれらを画面上のどこに配置するか、つまりレイアウトを考える番です。初めに必要なのはブラウザのウィンドウサイズです。これにより各要素の位置と大きさが特定されるため、これは以降のすべての計算の基礎となります。 このステップの出力は、その正確な位置とサイズに加え、マージン、パディング、ボーダーなどを捉えたボックスモデルです。 このステップは、サイズを変更するたび、またモバイル端末で横長と縦長の表示を切り替えるたびに繰り返されます。 描画 この最後のステップでは、画面上にピクセルが描画されます。ブラウザのタスクが多く、多少の時間を要することがあります。所要時間は、ウィンドウサイズ、各ノードに適用されるスタイル、端末として使用されるハードウェアの種類などにより異なります。 完了すると、ようやくページがビューポートに表示されます。 適用 クリティカル・レンダリング・パスについてはこれで十分。それでは、HTMLとCSSをいじってWebパフォーマンスを向上させる方法を見ていきましょう。 クライアントにHTMLを送信する クライアントにHTMLを送信するときは、最後に1回だけではなく、頻繁にバッファを書き出すようにしてください。そうすることで、HTMLの情報群を受け取る前から、ブラウザはそれらを解析できます。これによりパフォーマンスが向上します。 例として、HEADタグを受け取ると、ブラウザはその他のHTML情報を受け取る間に、他のアセットに対する要求を送信できます。 サイズを縮小する ミニフィケーションおよび圧縮は、読み込みサイズを縮小、HTTP応答時間を短縮し、結果として読み込み時間の短縮に繋がるため、非常に重要です。 これらのテクニックと正しいキャッシング戦略を組み合わせることで、Webパフォーマンスを大幅に向上させることが可能です。 CSSを素早く送り、最小限に抑える 見てきたとおり、CSSはレンダリングをブロックする要素なので、できるだけ早くクライアントに送信する必要があります。また、初めのページの読み込みに必要なCSSの量を考えて、メインファイルから未使用のCSSを抽出し、必要に応じて後で別々に読み込みます。 パフォーマンス向上のため、プレローディング・プレキャッシングも活用できます。これらは、Googleが2016年に導入したPRPLパターンの一部です。 もう一つのテクニックは、開発者たちの間でそれほど頻繁には使われていませんが、コンテンツのbody内にlinkタグを使用することです。たとえHTML内に記述されたstyleタグであっても、最小限のCSSのみをクライアントに送信し、残りは後から必要に応じて読み込むことでレンダリング時間を短縮できるため、非常に便利です。 まとめ 要するに、関連するものを最小限に抑えて、素早く最適に送信すること。転送を高速化するため未使用のCSS規則を減らし、ミニフィケーションと圧縮を活用することです。 この投稿が少しでもお役に立ちますように。それでは、次回をお楽しみに? 参考 Webパフォーマンス関連：Google Developers クリティカル・レンダリング・パスの理解：CSS Tricks 関連記事 CSSを調べてコピーする簡単で最速なツール「CSS Scan 2.0」 観測史上最速！GoogleスプレッドシートだけでAPIが作れる「Sheetson」 GitHubのリポジトリだけでAPIが作れる「APIs With GitHub」 この記事は、AnyPicksマガジンからの再掲載です。原文はこちらです。
今回は、HTMLとCSSのパフォーマンスを向上させる小技と豆知識についてです。
しかしその前に、ブラウザがページをレンダリングする方法について知る必要があるでしょう。そこにはHTMLやCSS、JavaScript、そしてブラウザがWebページをエンドユーザーに表示する際に必要な手順のすべてが含まれます。
クリティカル・レンダリング・パスは、5つのステップから成っています。図解すると分かりやすいでしょう：
見たままですが、各ステップについて詳しくご説明しましょう。
ほとんどのページはHTML、CSS、およびJavaScriptで構成されています。Webブラウザは、ユーザーに何をどのように表示するかを知る必要があります。そのため、ネットワークを介して送信されたHTMLページを解読し、ドキュメントオブジェクトモデル（DOM）を構築します。また、HTMLタグ（<p></p>、<div></div>、<h1></h1>）」を読み、それらをトークンに変換します。これらのトークンは同時にノードへと変換されます。
<p></p>、<div></div>、<h1></h1>
各トークンの開始タグと終了タグを順番に処理することで、ブラウザはそれらの階層（親と子）を確立します。
これは見かけよりもずっと簡単です。上の図で、DOMはすべてのノード（枝）とその子（葉）を持った一本の木のようなものと想像してください。この木は、HTMLを構築するためのノードの依存関係をすべて含んでいます：
W3C websiteより
DOMはマークアップ全体を表し、ブラウザによって徐々に構築されます。HTML5以降、ブラウザはページ全体が一度にブラウザに送信されるのを待つ代わりに、HTMLストリーミングに対応するようになりました。これの素晴らしいところは、情報を受け取ると同時にレンダリングを実行できる点です。
DOMを構築した後、ブラウザはCSSオブジェクトモデル（CSSOM）を構築するためにページ内で参照されている、あらゆるスタイルを調べ上げます。CSSOMは、文書に適用する必要のあるスタイルの規則を表しています。これはDOMがどう構築されたかに非常に似ていますが、この過程でそれぞれの子要素は、その親要素に適用されたスタイルを継承します ― cascading style sheets（一繋がりのスタイルシート）という名前はそのためです。
スタイルの部分的な処理は不可能なため、すべてのスタイルの規則が送信されるまで、ブラウザはどのスタイルの規則がどのノードに適用されているかを推測できません。これが、CSSがレンダリングをブロックする要素となる理由です。
DOMとCSSOMの混在は、レンダーツリーと呼ばれます。レンダーツリーは、すべてのノードとその依存関係、およびそれらに適用されるCSSルールすべてを含んでいます。
すべてのノードを構築した後、ブラウザはどのノードをページ上に表示するのかを知る必要があります。レンダーツリーは、ページ上に表示される可視コンテンツそのものです。
ブラウザはルートから起動し、DOMとCSSOMからすべての可視ノードをコピーします。実行される手順は、おおよそ以下のとおりです：
ルートから起動し、各可視ノードをたどる
各ノードに対して一致するCSSルールを見つけて、適用する
可視ノードとそのコンテンツ、スタイルを出力する
すべてのノードにスタイルを設定したら、次はそれらを画面上のどこに配置するか、つまりレイアウトを考える番です。初めに必要なのはブラウザのウィンドウサイズです。これにより各要素の位置と大きさが特定されるため、これは以降のすべての計算の基礎となります。
このステップの出力は、その正確な位置とサイズに加え、マージン、パディング、ボーダーなどを捉えたボックスモデルです。
このステップは、サイズを変更するたび、またモバイル端末で横長と縦長の表示を切り替えるたびに繰り返されます。
この最後のステップでは、画面上にピクセルが描画されます。ブラウザのタスクが多く、多少の時間を要することがあります。所要時間は、ウィンドウサイズ、各ノードに適用されるスタイル、端末として使用されるハードウェアの種類などにより異なります。
完了すると、ようやくページがビューポートに表示されます。
クリティカル・レンダリング・パスについてはこれで十分。それでは、HTMLとCSSをいじってWebパフォーマンスを向上させる方法を見ていきましょう。
クライアントにHTMLを送信するときは、最後に1回だけではなく、頻繁にバッファを書き出すようにしてください。そうすることで、HTMLの情報群を受け取る前から、ブラウザはそれらを解析できます。これによりパフォーマンスが向上します。
例として、HEADタグを受け取ると、ブラウザはその他のHTML情報を受け取る間に、他のアセットに対する要求を送信できます。
ミニフィケーションおよび圧縮は、読み込みサイズを縮小、HTTP応答時間を短縮し、結果として読み込み時間の短縮に繋がるため、非常に重要です。
これらのテクニックと正しいキャッシング戦略を組み合わせることで、Webパフォーマンスを大幅に向上させることが可能です。
見てきたとおり、CSSはレンダリングをブロックする要素なので、できるだけ早くクライアントに送信する必要があります。また、初めのページの読み込みに必要なCSSの量を考えて、メインファイルから未使用のCSSを抽出し、必要に応じて後で別々に読み込みます。
パフォーマンス向上のため、プレローディング・プレキャッシングも活用できます。これらは、Googleが2016年に導入したPRPLパターンの一部です。
もう一つのテクニックは、開発者たちの間でそれほど頻繁には使われていませんが、コンテンツのbody内にlinkタグを使用することです。たとえHTML内に記述されたstyleタグであっても、最小限のCSSのみをクライアントに送信し、残りは後から必要に応じて読み込むことでレンダリング時間を短縮できるため、非常に便利です。
要するに、関連するものを最小限に抑えて、素早く最適に送信すること。転送を高速化するため未使用のCSS規則を減らし、ミニフィケーションと圧縮を活用することです。
この投稿が少しでもお役に立ちますように。それでは、次回をお楽しみに?
CSSを調べてコピーする簡単で最速なツール「CSS Scan 2.0」
観測史上最速！GoogleスプレッドシートだけでAPIが作れる「Sheetson」
GitHubのリポジトリだけでAPIが作れる「APIs With GitHub」
この記事は、AnyPicksマガジンからの再掲載です。原文はこちらです。
はじめに スクールでプログラミングを学び始めて、約１ヶ月が経ちます。 細かく言えば、今日で25日目になります（笑） 言語としては、 ・Ruby ・Rails ・HTML ・CSS を学んできました。 決め事として、1日最低10時間以上を毎日続けるようにしています！ 単純計算で、約250時間です。 ということで今回は、全くの初心者が250時間勉強して感じたことを書いていこうと思います。 予想以上のキツさ 多数の言語を短期間に学ぶのは大変ですが、本気でやれば各言語の基礎は学ぶことができました。 ただ、正直かなりキツイです。 スクールは毎日通っていて、25日間1日も欠席はしていません！！！ 新しい知識ばかり頭に入ってくる中で、毎日が格闘です（笑） しかしそのおかげで、全くの無知だった私ですが、今ではTwitterの簡易版のようなアプリであれば自力で作成することができるようになりました！ 正直初めは、「これ、本当に自分でも理解できるのか・・・？」 と思ってました。（笑） ですが、絶対サボらず、折れずに毎日頑張っていたらいつの間にかアプリが作れるようになってました！ 人生の中で１番頑張ったといっても過言ではないかもしれせん・・・（笑） 多くの衝撃事実 プログラミングを少しずつ学んでいく中で、「え!?」と思うことがいくつかありました。 まず1つは、 「プログラミングは暗記ではない」 ということです。 私は最初、プログラミングはありったけのコードをたくさん暗記しなきゃいけないと思ってました。（笑） しかし、学んでいく中で 「わからないことがあったらすぐに調べて、それを適応させる能力」 がとても大事なのだと気付かされました。 「プロのエンジニアでもGoogleは必須なんだよ」と言われてから、私の勉強法は８割がアウトプット作業ばかりです。 2つ目は、 エラーの多さ、難しさです。 アプリを作成する中で、エラー、エラー、エラー、エラー・・・・・。 どれだけ調べても解決できないものだったり、本当に折れそうになります。（笑） 各言語における仕組み等を理解していないとエラーが解決できないため、 エラーが起きるたびに土台の脆さを痛感させられました。 ですが、数をこなすうちに段々と理解できて、簡単なエラーなら1人で解決できるようになることができました＾＾ しかし、実際まだたくさんの種類のエラーがあると思うので、勉強して数をこなしていくしかないですね・・・ おわりに まだまだ、ほんの一部を学んだだけです。 もっといえば、基礎も全て完璧とはいえず、まだまだ知識不足だといえます。 これからもコツコツ努力して、一人前のプログラマーになれるよう日々精進です・・・ 明日からは、「Javascript」「jQuery」を学んでいこうと思います！ ありがとうございました＾＾
スクールでプログラミングを学び始めて、約１ヶ月が経ちます。 細かく言えば、今日で25日目になります（笑） 言語としては、 ・Ruby ・Rails ・HTML ・CSS を学んできました。 決め事として、1日最低10時間以上を毎日続けるようにしています！ 単純計算で、約250時間です。 ということで今回は、全くの初心者が250時間勉強して感じたことを書いていこうと思います。
多数の言語を短期間に学ぶのは大変ですが、本気でやれば各言語の基礎は学ぶことができました。
ただ、正直かなりキツイです。 スクールは毎日通っていて、25日間1日も欠席はしていません！！！ 新しい知識ばかり頭に入ってくる中で、毎日が格闘です（笑）
しかしそのおかげで、全くの無知だった私ですが、今ではTwitterの簡易版のようなアプリであれば自力で作成することができるようになりました！
正直初めは、「これ、本当に自分でも理解できるのか・・・？」 と思ってました。（笑） ですが、絶対サボらず、折れずに毎日頑張っていたらいつの間にかアプリが作れるようになってました！ 人生の中で１番頑張ったといっても過言ではないかもしれせん・・・（笑）
プログラミングを少しずつ学んでいく中で、「え!?」と思うことがいくつかありました。
まず1つは、 「プログラミングは暗記ではない」 ということです。
私は最初、プログラミングはありったけのコードをたくさん暗記しなきゃいけないと思ってました。（笑）
しかし、学んでいく中で 「わからないことがあったらすぐに調べて、それを適応させる能力」 がとても大事なのだと気付かされました。
「プロのエンジニアでもGoogleは必須なんだよ」と言われてから、私の勉強法は８割がアウトプット作業ばかりです。
2つ目は、 エラーの多さ、難しさです。
アプリを作成する中で、エラー、エラー、エラー、エラー・・・・・。 どれだけ調べても解決できないものだったり、本当に折れそうになります。（笑）
各言語における仕組み等を理解していないとエラーが解決できないため、 エラーが起きるたびに土台の脆さを痛感させられました。
ですが、数をこなすうちに段々と理解できて、簡単なエラーなら1人で解決できるようになることができました＾＾
しかし、実際まだたくさんの種類のエラーがあると思うので、勉強して数をこなしていくしかないですね・・・
まだまだ、ほんの一部を学んだだけです。
もっといえば、基礎も全て完璧とはいえず、まだまだ知識不足だといえます。 これからもコツコツ努力して、一人前のプログラマーになれるよう日々精進です・・・
明日からは、「Javascript」「jQuery」を学んでいこうと思います！
ありがとうございました＾＾
