Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
開発者のためのReactJSロードマップ
ThemeSelection 高品質でモダンなBootstrap HTMLテーマや管理者向けテンプレートを提供するUIキットベンダ この記事は、著者の許可を得て配信しています。 https://dev.to/theme_selection/reactjs-roadmap-for-developers-2824 ReactJSまたはReactは、ユーザーインターフェイスやUIコンポーネントを構築するためのオープンソースのフロントエンドのJavaScriptライブラリです。Facebookや個人の開発者や企業のコミュニティがメンテナンスをしています。近年、コンポーネントベースのGUI開発に最適なライブラリの一つとして成長しています。 AngularやVue.jsのようなフロントエンドフレームワークは他にもありますが、Reactが他と違うのは、コンポーネントベースのGUI開発だけに焦点を当ててお
シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック
記事のテキストが多いサイトで見かけるレイアウト、記事は中央に固定幅、画像は幅いっぱいに表示するフルブリードレイアウトをシンプルなHTMLとCSSで実装するテクニックを紹介します。 記事の固定幅は自由自在、画像の幅いっぱいも最大値を制限するなども簡単にでき、いろいろな応用も効く実装テクニックです。 Full-Bleed Layout Using CSS Grid by Josh Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのレイアウトにおける問題 解決策 CSS Grid 子カラムの割り当て方 子をフルブリードにする まとめ はじめに 以前、誰もが実装しようと努力したゴールドスタンダードのレイアウトがありましたが、そのレイアウトを正しく実装するのは非常に困難でした。 そのレイアウトとは、聖杯レイア
[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック
HTMLで最初に書かれている要素が、他のすべてを包み込む要素であるということは少なくありません。これはラッパーと呼ばれるもので、多くの人が使用していると思います。 このラッパーの在り方について、divがよいのか、sectionはどうなのか、コンテナとの違い、レスポンシブ対応の幅指定やpadding指定の効果的なテクニックなどを紹介します。 The Best Way to Implement a “Wrapper” in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Wrapper vs Container -ラッパーとコンテナ width vs max-width -widthとmax-width Additional Padding -追加のpadding どのHTML要素を使用するべきか <body>タグを使用 v
![[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/a295455180b3b8aecc4e6fcf4fa77f6224405f55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017082401.png)
CSSで期待通りに表示されない根本的な原因の見つけ方
CSSで、期待通りに表示されない、なんかずれてる、ブラウザによって表示が異なる、ということがありませんか？ CSSで期待通りに表示されない時に、根本的な原因を見つける方法を紹介します。 その原因がブラウザによるものなのか、CSSの仕様によるものなのか、どのように機能するか知ることで、問題の根本的な原因を見つけることができます。 Finding The Root Cause of a CSS Bug by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 注意: ここでの「バグ」はエラーだけではなく、想定外の挙動・振る舞いです。 はじめに CSSの基本的なバグ ドロップダウンメニューの配置 HTMLの置換要素 オーバーフロー要素とインラインブロック要素 インラインブロック兄弟間のスペース まとめ はじめに
React + Netlify + microCMSを使ってイケてるポートフォリオを作った - Qiita
本記事でやること Reactを使ったフロントエンド開発を、今時のサービスを使って簡単に効率よくできる方法を紹介します。 また、ポートフォリオの設計に関してや実装から得られたナレッジ、知っておいたほうがいい実装方法を紹介します。 私のポートフォリオはNetlifyのサーバーに上げているので、実際の挙動などは https://ykonishi.tokyo から確認できます。 ちなみにポートフォリオのソースコードはGitHubにも上げているので、こちらも見ていただけたらと思います。 Yuichi Konishiポートフォリオサイトのソースコード Reactとは 最近はよくSPA（Single Page Application）という言葉をよく耳にしますが、そのSPAの一つがReactです。 特徴としては、データバインディング、仮想DOM、Componentの3つがあります。 詳細については各リン
CSSモジュール ― 明るい未来へようこそ | POSTD
ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。 scroll-snapプロパティの基礎知識と便利な使い方を紹介します。 Practical CSS Scroll Snapping 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクロールにスナップさせる「scroll-snapプロパティ」 「scroll-snapプロパティ」のサポートブラウザ 「scroll-snapプロパティ」の基礎知識 親要素の「scroll-snapプロパティ」 子要素の「scroll-snapプロパティ」 「scroll-snapプロパティ」の便利な使い方 スクロールスナ
BEMによるフロントエンドの設計 | 第1回 基本概念とルール
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
flexプロパティの実践的な使い方を徹底解説
Webページやスマホアプリのレイアウト・コンポーネントを実装する際に知っておくと便利なflexプロパティの基礎知識と実践的な使い方を紹介します。 スペースいっぱいにアイテムを伸縮させて配置したり、画像・アイコンとテキストを並べて配置したり、フォームの入力欄とボタン、複数カラムの垂直方向の揃えなど、実践的な使い方を徹底解説です。 Digging Into the Flex Property by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに flex-growプロパティとは flex-shrinkプロパティとは flex-basisプロパティとは flexのショートハンドプロパティ flexプロパティの便利な使い方 flexのショートハンドを勧める理由 flexプロパティの使用例 flexプ
【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】
こんにちは、マナブです。 こちらは「プログラミング基礎の完全ロードマップ」のページです。 プログラミング基礎の完全ロードマップとは プログラミング基礎解説 月５万を稼ぐ方法の解説 フリーランスの基礎解説 稼ぐ事から逆算した教材 情報は随時アップデート 上記の感じで、これらをすべて無料で提供します。 人生において「プログラミングという武器」を手にいれましょう。 なお、プログラミング学習は短期間で終わるものではありません。 徐々に、コツコツと積み上げて、少しづつ人生を変えるのが良いと思います。 補足①：プログラミングの初心者コミュニティについて 講師付きでプログラミングを学びたい方向けに「CodeBegin」というオンラインスクールを運営しております。質問し放題で、あと生徒同士での横の繋がりも作れます。詳しくは「初心者向けのプログラミングコミュニティを始めます」をどうぞ。 補足②：プログラミン
【CSS】付箋風の見出しをCSSで作ってみる！ - mlog
今回は、付箋風の見出しをCSSで作る方法を紹介したいと思います！ 最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。 目次 ブログで使用する場合は はてなブログの場合 ベースコード 使い方 カスタムパターン 付箋風見出しの色を変えてみる！ 背景色も調整してみる！ 角丸表示にしてみる！ 右側だけ(もしくは左側だけ)を角丸にしてみる！ 影の度合いを調整してみる！ まとめ ブログで使用する場合は ご利用のブログがHTML記述に対応している場合は、紹介するCSSを<style>と</style>で囲んで記述してください。 ※ CSS用の入力欄がある場合は<style>と</style>の囲みなしで記述してください。 HTMLコードについては、そのまま入力でＯＫです。 はてなブログの場合 はてなブログでのCSSの使用については、以下の記事でまとめています
【ブログ向け】CSSセレクタ入門【基本編】 - mlog
今回は、「CSSセレクタ」 について解説していきたい思います。 主に、ブログでCSSデザインを導入する場合を想定 して、基本編・応用編の２回に分けて解説を進めて行きます。 今回は、基本編として、CSSセレクタについて簡単に解説した後、よく使う「基本のセレクタ」を紹介していきます。 ※ ブログでCSSを使用する場合は、お使いのブログがCSSの使用に対応している必要があります。 目次 CSSセレクタとは？ カスタム対象のクラスやIDの確認方法 記事中で紹介するコードの表示確認方法【ブログ向け】 はてなブログの場合 CSSファイルから試す場合 よく使う「基本のセレクタ」 要素の指定 ID名の指定 クラス名の指定 要素名＋クラス名で指定 特定の複数クラスを持つ要素を指定 複数セレクタの指定 子孫セレクタの指定 子セレクタの指定 まとめ CSSセレクタとは？ 「CSS」を使うと、HTMLの特定の要素
超絶初心者のためのフロント入門（HTML、CSS、JavaScript） - Qiita
1. はじめに 1-1. 技術の概要 エンジニアの技術は、かなりざっくり言うと、 フロントエンド → 見える部分。 （例）HTML、CSS、JavaScriptなど サーバサイド → アプリケーションを動かす中身の部分。 （例）Java、PHP、Ruby、C、C++、Perlなど インフラ → Webアプリケーションを動かすための環境構築など。 （例）Webサーバ構築、DBサーバ構築、DNSサーバ構築など の3つに類別できる。 その中で、プログラミング未経験者が最も手をつけやすいのが、フロント（HTML、CSS、JavaScript）の技術である。 ※ 上記は、「Webアプリケーション開発」のお話です。 ※ 「ネイティブ開発」ではObjective-C/Swift/AndroidJava/Cocos2d-x/Unityなどがよく使われる。 1-2. フロントの概要 フロントの技術を学ぶため
【入門向け！】独学に最適なHTMLを学べる学習サイト20選
【入門向け！】独学に最適なHTMLを学べる学習サイト20選 初心者向けにHTMLを独学で学習できるサイトをまとめて紹介しています。入門向けでかつ無料で利用できるので、これから始める人におすすめです。自分に合った学習スタイルでHTMLの勉強を始めてみてはいかがでしょうか！ テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。 Web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webチートシート for エンジニア
HTML, CSS, and JavaScript Tutorials, References, and Articles | HTML Dog
https://www.ituore.com/entry/html-css-basic
