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
10 Best jQuery and HTML5 WYSIWYG Plugins — SitePoint
HTML5 WYSIWYG (What You See Is What You Get) editors are always high in demand. But there are now so many of them around that it’s hard to find the best ones. In this post, I’m going to present some of the best jQuery and HTML5 WYSIWYG plugins, saving you time finding the plugin that fits your needs. Key Takeaways The article provides a comprehensive list of the top 10 jQuery and HTML5 WYSIWYG plu
Picturefill
The picture element, srcset and sizes attributes, and associated features allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today! Picture
iframe sandbox は万能ではない - 葉っぱ日記
HTML5で導入されたiframe要素のsandbox属性は、そのiframe内のコンテンツに対しJavaScriptの実行を始め様々な制約を課すことでセキュリティの向上に役立つ機能である。例えば、以下のように指定されたiframeでは、iframe内からformのsubmitなどはできるが、iframe内でのJavaScriptの実行やtarget=_blankなどによってウィンドウを開くことなどは禁止される。 <iframe sandbox="allow-forms" src="..."></iframe> sandbox属性に明示的に allow-scripts という値を指定しない限りはiframe内では直接的にはJavaScriptは実行できないが、かといってiframe内から間接的にJavaScriptを必ずしも実行させることが不可能かというとそうでもない。 sandbox属性
WAI ARIA Cheatsheet · mcdlr
What is WAI-ARIA? In practice, WAI-ARIA gives us more attributes to assign to elements. There are two kinds of attributes, the role attribute and the aria-.* attributes (“.*” meaning that what follows “aria-” is variable) These new attributes seek to increase the semantics of our documents, facilitate the development of Rich Internet Applications and improve Accessibility The aria-.* attributes an
webpackとwebpack-dev-server、html-loaderと合わせて、JsRenderを試す - CLOVER🍀
webpackと組み合わせて、簡単なJavaScriptでのテンプレートエンジンを使いたいと思いまして。 で、ちょっと事情からjQueryが視野に入らざるをえない感じなんですけど、jQueryでテンプレートといえばjQuery Templates plugin… jQuery Templates plugin だと思っていたのですが、今は名を変えてJsRender／JsViews／JsObservableとなっているようです。 JsRender/JsViews JsRender: best-of-breed templating このあたりの事情、ホントに知らないなぁ…。 で、これとwebpackを合わせて使うことを考えまして、以下のような感じでやってみようかなと。 依存関係はBowerで解決（npmはちょっとムリでした） HTMLテンプレートは、webpackのhtml-loaderを使
innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 – 01日目） | Ginpen.com
DOMおれおれAdvent Calendar 2015 – 01日目 HTML文字列からががーっと生成する場合は el.innerHTML=htmlText と書くのが普通だと思うんですが、 insertAdjacentHTML() というAPIもあります。 var el = document.querySelector('div#out'); var html = '<b>BOLD</b>'; var position = 'afterbegin'; el.insertAdjacentHTML(position, html); // -> <div><b>BOLD</b></div> "position" はHTML文字列を挿入する位置を指定します。以下のいずれかです。 "beforebegin" "afterbegin" "beforeend" "afterend" それぞれ開始タグの
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
爆速モバイルWeb、AMPの仕組み抄訳 - ku-sukeのブログ
鈴木さんの記事を読みましてAMPの仕組みについて読んでみました。以下抜粋して日本語メモを。 モバイルウェブが爆速に！ GoogleがAMP (Accelerated Mobile Pages) を立ち上げ | 海外SEO情報ブログ 追記：ざっくり言うと、主にニュースとか静的コンテンツを想定し、HTML+CSSでJSは原則禁止、広告とかで使いたい場合iframeを用意するのでその中だけ。iframeや画像は事前にサイズを固定し変更不可にすることでlazyloadしてもレンダリング時にガタガタしないよね。というAMP HTMLフレームワークを策定したお話です。 原文：https://www.ampproject.org/how-it-works/ モバイルのための仕組み （※見出しは筆者による） Web performance is not unexplored territory for t
asamuzaK.jp : 使えば爽快！ SVG Sprite
改訂版を出しましたので、そちらをご参照ください。 Safari8でSVG Fragment Identifiers（以下、svg#fragment）に対応してきた。 Firefox、Chrome、IEはすでに対応済みなので、これで主要ブラウザの足並みが揃った。 注：ところが、Safariの実装にはバグがあった…orz。 WebKit Bugzilla上では既に修正済みとなっているが、Safari9.xまでは依然としてバグが残っている。 これまで、PNGなどの画像を利用したCSSスプライトやアイコンフォントを使う気になれなかったが、svg#fragmentを使ったSVGスプライトならいけるな、と思い、折を見てテストを繰り返し、ようやくその方法が固まった。 そもそもCSSスプライトやアイコンフォントに対する個人的な不満は CSSスプライト 切り出す画像の領域を逐一CSSで指定しなければならない
Best HTML5 Websites | Web Design Inspiration
Best selection of HTML5 Website examples for your inspiration... Read more HTML5 is a language for structuring and presenting content for the World Wide Web, a framework designed to support innovation and foster the full potential the web has to offer. The HTML5 identity system provides the visual vocabulary to clearly classify and communicate our collective efforts. HTML5 adds many new syntactic
Chrome 43でUpgrade Insecure Requestsに対応してた - ASnoKaze blog
Upgrade Insecure Requests W3Cの仕様でUpgrade Insecure Requestsというものがある。 サブリソースのhttp://へのリクエストを自動でhttps://のものに変更する（下のデモサイトの例が分かりやすい。 指定方法としては以下の二通りである。 HTTPレスポンスヘッダで指定する Content-Security-Policy: upgrade-insecure-requests もしくはmetaタグで指定する <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 試してみる デモサイトが公開されている https://googlechrome.github.io/samples/csp-upgrade-insecure-requests
HTMLとXMLにおける言語タグ
HTMLとXMLはまた、空の文字列を使用することで言語の継承を防ぐ手段を提供します。すなわち、xml:lang=""。これは本質的に、この情報にどの言語も関連付けないことを表します。 以下の文書は、どのように言語タグを組み立てるかについての追加の詳細を提供します。 言語タグを組み立てる RFC 3066のような、RFC 5646とそれ以前の仕様との間の主な相違点は、以下の通りです： 有効なサブタグを探すただ1つの場所、新しいIANA registryがあります。 サブタグは固定された位置と長さを持ちます。これは、言語タグのマッチングをより簡単にします。 言語タグの潜在的な構成要素の周りにより多くの柔軟性を持ちます。 RFC 3066は基本的に、そのままの言語コードか、言語コードに国コードを加えたもの、あるいはIANA language tag registryで特別に登録されたごく少数の値
High Performance HTML -さまざまなデバイスに配慮されたクリーンで簡潔なHTMLの書き方
多くのWeb制作者はパフォーマンスというと、JavaScriptや画像の最適化、サーバーの設定、CSSなどのファイルの圧縮や結合を検討します。そして、Webページのコアとなる言語にも関わらず、HTMLは無視されがちです。 HTMLは単に複雑さと要素の数を減らすだけでは、パースにかかる時間をあまり改善することはできません。しかしよく作られたHTMLはページを素早くロードするための決定的な土台になり、異なるビューポートサイズに対応するレイアウトになります。 さまざまなデバイスに対して素早くロードし、うまくいくコンテンツを作ることができるクリーンで簡潔なHTMLのコードを紹介します。 High performance HTML 下記は各ポイントを意訳したものです。 著者のSam Dutton氏は、Google ChromeのDeveloper Advocateをされています。 ※当ブログでの翻訳
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
wordpressで、rel="category tag"が、html5でvalidじゃないと怒られる件とその対処 | xxxx7
wordpressで、rel="category tag"が、html5でvalidじゃないと怒られる件とその対処 怒られちゃいました W3C が提供している、構文チェックサービス「Markup Validation Service」を使ってこのサイトをhtml5でチェックしてみたら、次のようなエラーがたくさん出てきました。 Bad value category tag for attribute rel on element a: The string category is not a registered keyword or absolute URL. Whitespace in path component. Use %20 in place of spaces. rel属性がとれるキーワードに、「category」なんてものはないですよ、と怒ってるみたい。 怒られた原因をもう少
ニューＨｔｍｌチェッカー（Ｎｕ Ｈｔｍｌ Ｃｈｅｃｋｅｒ）
ニューＨｔｍｌチェッカー（Ｎｕ Ｈｔｍｌ Ｃｈｅｃｋｅｒ） いつもマークアップチェックで使用していた「Ｗ３Ｃ」の「Ｍａｒｋｕｐ Ｖａｌｉｄａｔｉｏｎ Ｓｅｒｖｉｃｅ」が、2015年7月14日頃から「Ｎｕ Ｈｔｍｌ Ｃｈｅｃｋｅｒ（ニューＨｔｍｌチェッカー）」という新しいページに誘導されるようになりました。 伴い、「role属性」のコードチェックが、軒並み「Ｗａｒｎｉｎｇ（警告）」となりましたので、以下の通り修正を行いました。 header（ヘッダー）要素の「role属性」 チェック結果「警告」になったコーディング例 <header role="banner"> <p>ホームページ作成方法</p> </header> 「警告」とは、「エラー」と異なりコードの間違いでは無いので「有効」です。「変だね！」程度と捉えて、余裕があれば「警告」が無くなるように修正します。 修正方法は「警告」の内容に沿
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
HTML5におけるstrongとemの違い。強調と強勢。 | Ginpen.com
先に結論を述べちゃうと、HTML5におけるstrongは重要性 (importance)を、emは強勢 (emphasis)を表す。強勢って何？ってのは後述しています。 かつてHTML 4.01の場合は単純にemが強調 (emphasis)、strongがより強い強調 (stronger emphasis)でした。 なおどちらもemphasisという単語を使っているんだけれど、この英単語自体が重要性を示す「強調」と、発声時の強弱の強を示す「強勢」と、両方の意味を持っています。HTML 4.01とHTML5では日本語訳を分けているのは、文脈から判断したものです。 重要性 こちらは重要なものである、という事を表します。普通です。ここ試験に出るぞーってやつですね。 吾輩は「猫」である。 すると、きっと試験にこんな問題が出るわけです。 「この物語の語り手である「吾輩」は何者であるか。漢字一字で答え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.webbsy.com/index.html