「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31
web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
＆nbsp; は半角スペースではないというお話 (フェンリル | デベロッパーズブログ)
いかがでしょう？ WEBブラウザにもよりますが、結構実際の見た目も違うように思います。 で、冒頭の「半角スペースと 」の件ですが、ちゃんと意識しておかないと「あれ？」と思うことがあります。 「 を半角スペース (0x20) に置き換える」プログラムがあるように、「 を半角スペースに置き換えず、nbsp (0xC2A0) に置き換える」プログラムもありますから、WEB ブラウザのように 0xC2A0 を表示できる場合はいいですけど、表示できないプログラムだと困りますよね。 冒頭の画像は、わが愛するテキステエディタ Emacs だとこんな感じになります、というサンプルでした おまけとして、 を 0xC2A0 に置き換える例を。雰囲気をお楽しみください。 use HTML::Entities; use Encode; use Data::Dumpe
5000兆円欲しい！.css
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
meta name="referrer"は、HTTPS→HTTPでもリファラを出す新しい仕様 | 初代編集長ブログ―安田英久
今日は、ちょっと技術的な話を。「meta referrer」という、リンクをクリックしてページ移動するときなどにリファラをどう送るかを、ページ側で指定できるタグの実装が進んでいるのです。 グーグルはHTTPSを推奨するけれども、リファラが……グーグルは、サイトがHTTPSかどうかを順位決定の要因とするなど、HTTPSを推奨しています。 でも、自分のサイトをHTTPSにすると、自分のサイトから非HTTPS（ふつうのHTTP）のサイトへのリンクをクリックしたときに、リファラが飛ばないんですよね。 これは、RFC 2616で、「セキュア接続のページから、非セキュア接続のページに移動するときは、リファラを送出するべきではない」と定められているからです（セクション15.1.3）。 とはいえ、Web担のようなメディアでは、「Web担のページから、うちのサイトにけっこう来る人いるんですよ」という反応も大
［速報］HTML5、ついにW3Cの勧告となる
W3Cが発表したプレスリリース（日本語）の冒頭を引用します。 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の
HTMLをレイヤー別けしたPSDに変換するキャプチャーソフト Page Layers が神 | fladdict
Page Layersは、すごいウェブのキャプチャアプリ。なんとキャプチャするサイトを、DIVやIMG要素ごとにレイヤー分割したPSDにしてくれるのだ！ これは素敵と言わざるをえない。 ビデオをみれば使い方は一目瞭然。URLを入力して保存ボタンを押すだけで、なんでも構造化したPSDにしてくれる。 Mac専用アプリで、AppStoreで$28.99。これは買いだと思います。 Web関係者は必須的な。
ASCII.jp：jQueryで作る多階層ドロップダウンメニュー｜Web制作の現場で使えるjQuery UIデザイン入門
基本のドロップダウンメニュー メインメニューにマウスカーソルを重ねると、すぐ下にサブメニューを表示するドロップダウン型メニューから作りましょう。サブメニューの1回層目までの表示に対応したメニューです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述します。メインメニューをul/li要素で記述し、メインメニューに対応するサブメニューをli要素の中にul/li要素で入れ子に記述していきます。メインメニューのul要素にはclass属性「menu」を、子カテゴリーのul要素にはclass属性「sub」を付けて親子関係を分かりやすくしておきます。 ▼サンプル01（HTML部分） <ul class="menu"> <li><a href="#">メニューA</a> <ul class="sub"> <li><a href="#">サブメニューA</a></li> <li><a
Googleプラス1のタグをiframe で表示、その後
7月初旬に「Google プラス1のタグをiframeや「divとaタグ」で実装」を紹介した件のその後。 この記事の全文を読む
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - SHIROMAG
IDEA * IDEA