最近のHTMLを改めてちゃんと学んでみた
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。 HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
em・strong・mark・b要素の違いを本気出して調べてみた
使いどころが難しい「em要素」「strong要素」「mark要素」「b要素」。 どれも強調したいときに使う、程度にしか感じていない人も多いかと思います。 HTML5でのそれぞれの要素の違いは、どのような仕様なのでしょうか。 そのぞれの要素の違いのまとめ 長くなるので結論から述べます。簡単にまとめると以下です。 strong要素 重要性、深刻性、緊急性など、まっさきに見てほしいテキスト em要素 強調させることによって文章の意味を変えたいとき mark要素 引用文や別の文脈の文章などから目立たせたい箇所 b要素 上記以外で目立たせたいとき HTML 4.01 の場合のおさらい まずは、おさらいです。 em要素 Indicates emphasis. HTML 4.01 では「強調（重点）を示す」でした。 strong要素 Indicates stronger emphasis. HTML 4
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
html5のタグの入れ子のルールの保存版まとめです。「〇〇タグに〇〇タグって入れてもいいんだっけ？」という悩みを全部解決します！すべてw3cのコンテンツモデルの仕様に基づいた内容になっていますので安心して読んでくださいね。 入れ子のルールはコンテンツモデルで決まる html5からはブロック要素とインライン要素という概念が廃止されました。そのため以前まではインライン要素の中にブロック要素を入れてはいけないというルールがあったと思いますがそれは完全に無視してください。 とはいえcssでレイアウトを行う上では従来と変わらず display : blockで親要素の幅に合わせるdisplay : inlineでその要素自体が持つ幅 という指定の仕方はできます。 ただhtmlでタグの入れ子を考える上でブロック要素とインライン要素という概念がなくなっただけです。 じゃあなにが追加されたかというと、w3
HTMLの<dialog>要素とCSSで、モーダル・ダイアログ ボックスを実装する方法と注意点
モーダル・ダイアログ ボックスはWebサイトやスマホアプリでよく見かけます。しかし、その実装方法は何通りもあります。その多くはWebを視覚的にナビゲートしないユーザーにとっては実質的にモーダルボックスを使用できず、アクセシブルに実装するのは困難でした。 HTML 5.2で登場した新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくモーダルやダイアログ ボックスを利用できるようにするものです。 <dialog>要素で、モーダル・ダイアログ ボックスを実装する方法と注意点を紹介します。 Meet the New Dialog Element 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能: モーダル・ダイアログ ボックスを実装するための<dialog>要素 <dialog>要素の基本機能 <
<figure> について（やや堅苦しく）考える - Qiita
[UPDATE: 20161027] 誤訳の修正と、コメントを受けて定義変更可能性を追記。訂正箇所は打ち消し線で記述 TL;DR <figure> ってなんだ 世の中の人はどう使っているのか調べてみた <figure> 要素は注釈である 実例 おわりに <figure> ってなんだ HTML5から追加された <figure> 要素で、写真や絵や図を用いる際によりセマンティックな（文章構造を正確に伝えられる）マークアップができるようになった、と言われている。以下がスタンダードな使い方だ。 ところが、どうも明確な信念を持ってこの <figure> タグを運用しているHTMLマークアップエンジニアみたいな人にはなかなか出会うことがない。そこで、個人的な 信念 を述べてみたい。 その前に、世の中の人はどう使っているのか調べてみた 名前や所属企業は伏せるが、数名の同業者にアンケートをとってみた。 使
SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント
検索エンジンがページ構造を理解しやすいようにHTMLがマークアップされていることは、安定的に検索結果上位にインデックスされるために重要な要素の1つです。 当然のことながら、前提として検索キーワードを想定した質の高いコンテンツ作成が必要です。せっかく質の高いコンテンツを作成してもマークアップの仕方が論理的に間違っていると台無しです。 今回はSEO対策として押さえておいてほしいHTMLおよびHTML5マークアップの最低限のポイントについてお話しします。 この記事では自力でSEOに最適なマークアップをする方法を紹介していますが、はじめからSEO対策がばっちりなWordPressテーマを使えば、なにもしなくても良いのでとてもラクです。SEO対策が万全のWordPressテーマは下記で紹介しています。 WordPressのおすすめテーマはコレ！SEOもレスポンブも完璧【有料&無料】 headタグ内の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5 & css3 | Design Drill Diary | Page 2