【徹底解説】scriptタグにdeferやasyncをつけるとどうなる?
いろんなサイトを検証モードで調べてみると、たまにscriptタグの中にdeferという記述を見ることがあるんあだけど、deferってなんだ？ この記述を入れるとどうなるんだろう？ 他社サイトの構造とかをデベロッパーモードで見てみると<script>タグの中にdeferやasyncという文字列が入ってたりしませんか？ 「defer属性」と「async属性」を正しく使うことでJavaScript（以下JS）の読み込みタイミングを調整でき、結果としてページの読み込み速度を改善することができます。 では詳しく解説していきます。 deferとasyncは何者？ deferとasyncは<script>タグ内に記述することができる属性です。 これらの属性はJSファイルの読み込みと実行のタイミングを調整するために使われます。 適切に使うことでWebページの読み込みスピードの改善につながります。 ページ読
smallタグの正しい使い道を考える - Qiita
どうも7noteです。HTMLには様々なタグがありますが、そのなかでsmallタグの使い道について考察します。 そして独自で出した結論としては・・・ 「正直、コピーライトでしか使わないと思う。」 これが私なりの結論です。 文字サイズを小さくしたい時には絶対に利用しない。 smallタグの説明文 『<small> …… 免責・警告・著作権などの注釈や細目を表す』 引用元：HTML5タグリファレンス（http://www.htmq.com/html5/small.shtml） またこのようにも書いています。 『<small>はメインコンテンツではなく、あくまで注釈や細目などの短いテキストに使用する要素です。 <small>を複数の段落、複数のリスト、複数のセクションなどの長いテキストに対して使用するべきではありません。』 引用元：HTML5タグリファレンス（http://www.htmq.co
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
【2021年最新版】SEOのためのh1タグ完全ガイド | 基礎知識から書き方まで徹底解説 | うるチカラ
SEOに取り組む人たち全てにとって、一番最初にすべき超重要事項のうちの一つがこのh1タグの最適化です。 h1タグをどのように設定するかどうかで検索順位が大きく変わってくることは、SEOについて本当に学んでいる人にとっては常識です。 「h1の最適化なくしてSEOなし」 というのはたとえ話でも冗談でもなく、本当です。 ですが、日本ではSEOという言葉について知っていてもh1タグがそれほど重要であるということを知っている人が本当に本当に少ないです。 この記事ではSEOの初心者向けに、h1タグについて、 h1タグの基礎知識 h1タグの設定方法 h1タグの論点 などについて丁寧に解説しました。 h1の重要性を知っているかどうかでSEOの結果が何十倍、何百倍も異なります。 それでは始めましょう！ 1.h1タグとは? それでは最初に、h1タグとは何かについての話から始めます。 「h1タグってhtmlのタ
【SEOクイズ】「h1タグは1つだけ」をグーグルは推奨している： ⭕? ❌?【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
SEOクイズの時間です。「h1タグは1ページに1つだけ」をグーグルは推奨しているでしょうか？ グーグルは検索評価でh1タグをどう扱う？ あなたの知識をチェック！ ほかにも今回は「SEOのテクニック」的なことに関する情報が多めだ。 「コンテンツはファーストビュー内に置くべきか」 「画像を入れるとSEOに影響するか」 「インデックスされて消えてが繰り返す原因は？」 「パンくずリストを設置するメリットは？」 などなど、あなたのSEO力をアップする情報を、今週もお届けする。 ファーストビュー内にコンテンツを置けば検索順位はアップする？画像を設置してもランキングは上がらない、しかしクリック率は……インデックスされたり消えたりを繰り返す、なぜ？Search Consoleパフォーマンスレポートは100%正確ではない!?パンくずリストの2つの利点2021年4月のCWV状況は前月と比べて大きな変化なし検索
HTML5 / 若干ややこしいaside要素の概要と使い方 - Spuit
HTML5で追加された aside 要素は一見単純なようで、使って良いのか迷う場面がよくあります。ということで、備忘録がてら aside 要素の役割や使いどころを再確認してみましょう。 aside 要素とは？ HTML5 – aside（その日本語訳） HTML5（仕様書）によると aside 要素は、 aside要素は、aside要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクションを表す。このようなセクションは、しばしば活版印刷でサイドバーとして表示される。 と書かれています。また、MDNには、 HTML <aside> 要素は、メインコンテンツとの関連性が希薄でメインコンテンツから 切り離すことが可能なセクションを表します。いわゆる「サイドバー」や、メインの記事内のコラムの部分に頻繁に用いられます。サイドバー
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
CSS Gridを使ったレスポンシブ対応の基本レイアウト
2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラム まずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2カラム カラムを画面の幅に合わせて伸
静的HTMLのためのテンプレートエンジン - 共通部分が多いHTML | CodeGrid
静的HTMLのためのテンプレートエンジン 第1回 共通部分が多いHTML 共通部分が多いHTMLを効率よく作るには、さまざまな手法が考えられます。このシリーズでは、テンプレートエンジンを使用してHTMLを生成するという手法を取り上げ、解説していきます。 はじめに ピクセルグリッドでは、企業サイトのリニューアル案件やWebアプリケーションのフロント側の制作が主になっています。中でも、リニューアル案件では、ページの量産は行わず、量産のもととなるページのHTMLを作成しています。量産は行いませんが、サイトの規模によっては、それなりの量のHTMLを作成していく必要があります。 最近関わった案件ではPC用40ページとSP用40ページ、合計80ページを作成する必要がありました。それらのHTMLには、ヘッダーやフッターであったり、サイドバーであったりと、共通する部分が多く存在します。筆者はその80ページ
HTMLとは？初心者向けにタグの種類と使い方の基本を解説！｜Udemy メディア
WEBプログラミングを学習するにあたって、ほとんどの人がまず最初に学習するのがHTMLです。 しかし、プログラミング初心者の人は「HTMLとは？」「HTMLって何なの？」と感じているのではないでしょうか？ この記事では、そんなプログラミング初心者の人でもHTMLが理解できるよう、難しい専門用語を使わずに、わかりやすい画像や具体例を使って解説していきます。 最後には、自分でHTMLを記述してブラウザに表示させるというHTML実践の機会もご用意しました。 これを読み終えた頃には、HTMLとは？という疑問は解消され、簡単なHTMLを記述できるようになっているでしょう。ぜひ最後までお読みください！ HTMLとは？【初心者向け】 この章では、「HTMLとは何か？」について専門用語を使わずに画像と共に解説していきます。 HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text M
2014年のWebデザインのトレンドがたくさん詰まったHTML5+CSS3の無料のテンプレート -Beetle
レスポンシブ対応の縦長ページ、プロダクトページ、ランディングページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 そのまま使うもよし、スキルアップ用に勉強してもよし、です！ Beetle - Responsive HTML5 Template Beetleには、最近のWebサイトで人気のあるさまざまなコンポーネント・エフェクトが用意されています。大きい背景画像をつかったヘッダ、カード型のレイアウト、サークルを使ったエレメント、パララックススクロール、スクロールをトリガーにしたエフェクトなど、今年のWebデザインのトレンドがたくさん詰まっています。
正しいコメントを書こう
HTML文書の中で、ソースを読みやすくするため、コメントをセクションの区切りとして用いている人は少なくないでしょう。しかし、コメントの書式は正しく理解されていないことが多く、誤った用法を頻繁に見かけます。実際に支障が出ることは少ないのですが、厳密なブラウザでは内容が読めなくなってしまうこともあり、注意が必要です。 コメントのきちんとした定義はHTMLのバージョンによって微妙に異なりますが、基本的には コメントは <!-- 注釈の文 --> という形式で、これ以上余計なハイフンを使っちゃだめ と理解しておくのがよいでしょう。（2016現在ではHTMLなら少し緩和されることになりそうです） HTML 2.0で定義されていたコメント HTML 2.0の場合、RFC 1866の"3.2.5. Comments"において次のように定義されていました： To include comments in a
HTML - link要素の使い方 - linkとサーチエンジン
HTML のhead要素の中で使われる要素の一つにlinkがありますが、きちんと実装しているブラウザが少なく、入門用の解説書でもほとんど触れられていないので、存在もあまり知られていません（最近ではスタイルシートのために少しずつ使われ始めているような）。ここでは、その基本的な役割と使い方を紹介します。 link要素タイプ リンクタイプ linkとサーチエンジン 順方向リンクと逆方向リンク link要素タイプ アンカー（a）要素は、文書の本文であるbody要素の中で、文書の特定箇所にハイパーリンクの始点や終点を設定し、利用者がそのリンクをたどれるようにする役割を持ちます。これに対し、link要素は文書全体についての情報を記述するhead要素の中に置かれ、HTML文書を前後の文書、スタイルシート、スクリプト、代替文書などの様々なリソースと結びつける働きをします。ブラウザなどのユーザーエージェント
Lecture／趣味のWebデザイン
趣味のWebデザイン Lecture Advice Note Info Webサイトの運営と構築について考える。 Renewal "いろは"の先のCSS Strict HTML + CSS によるリニューアル手順を詳細に解説 第1回 第2回 第3回 第4回 第5回 第6回 第7回 第8回 第9回 第10回 実践の記録 Advice334 Advice332 Advice330 Advice329 Advice327 Advice326 Advice325 Advice324 Advice323 Advice321 Advice314 宇治IN茶筒 Design HTML＆CSS ウェブサイト作成入門講座 お勧めの HTML 解説記事 お勧めの CSS 解説記事 CSSを使うわけ CSSの基礎 単位と色 プロパティ一覧 アクセス向上を考える 初級篇 企画篇 計測篇 良質なアクセスは「期待」か
「ページが見つかりません」ページのカスタマイズ
.htaccess活用法（７） .htaccess（拡張子がhtaccessということで、ドットが必要です。ファイル名がないので最初戸惑いますが、こういうものだと思ってください。）が利用可能だと、 アクセス制限（Basic認証）が可能。 特定のホスト（IPアドレス。プロバイダ）からのアクセスを制限することが可能 参照元（Referer）によるアクセス制限が可能（画像の直リンク禁止も可能） 特定のユーザーエージェント（ブラウザ・ロボット）からのアクセス制限が可能 ブラウザ経由でのアクセス（http://～）を拒否することも可能（大切なデータファイルを守る） リダイレクトが可能（ページの移転時などに重宝） 404 File Not Foundページのカスタマイズが可能。 拡張子別に文字コードを設定することが可能。（文字化け対策に必須の場合があります。） index.cgiやindex.phpを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【HTML】pictureタグの使い方｜画像をレスポンシブに切り替える | Webエンジニア Wiki
SEOのプロ解説！ HTMLの効果的な書き方やタグの使い方とは | JADEのSEOプロフェッショナル相談室
headに<base target="_blank">１行入れるだけで、全リンク�のデフォルトを_blank化できた - Qiita
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
The W3C Markup Validation Service