【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
【メモ】タグに独自属性を設定してjQueryで取得する
独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP 独自データ属性は、名前空間に属さない属性で、その名前は文字列 “data-” で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。 （中略） すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。 使用例 注意 data()は、もともとは要素にデータを付与しそれを取得するための関数で、HTMLのパースとは関係がありません。付与されたデータはjQueryのキャッシュデータとして保存されます。一方で属性を取得する関数attr()の方は、キャッシュは利用をせずHTMLを読みに行くので、この2つを同時に使うと混乱します。具体的には、atr()で更新したデータがdata()で取得出来ないなど。 $('#use
Flickrの貼り付けコードがまた変わってた
Google Photos も始まって、いよいよオワコンのさらに一歩先へまったなしのFlickrですが、それでも一回アーカイブされた写真てのはなかなか動かせないもんで、今でもFlickrを使ってます。個人的には別にFlickrで十分なんですけど、あんまり不人気だとサービス終了するとか言い出しかねなくてびくびくしてます。まあそれはGoogleだって同じですけどね。 貼り付けコードが変わってた 楽天ブログでブログを書いている彼女の人から「また写真を貼れなくなった」というSOSが届いたので調べてみたら、貼り付けコードが地味に変わってました。今の貼り付けコードはこんな感じ。 aタグに独自データ属性が、画像タグの後にscriptタグが追加されています。 実際の表示はこんな感じになって、画像に投稿者と画像タイトルが追加されるようになっています。 楽天ブログに貼り付けるには 楽天ブログではルールに違反し
CSSで指定出来る色名
CSSにおける色の指定はこれまですべて「#ff0000」形式で統一してきました。 理由は、 「色名指定」では柔軟な設定が出来ない（一段階濃くとか） ブラウザに解釈を任せたくない で、特に設定の柔軟性については、コーディングしている統合環境の補完で「aqua」「black」「brue」などの17色しか表示されないのもそう考える理由の1つになっていました。でも、違うのね、もっとたくさん指定出来る色名あるのね、というのが今回の本題です。いまさらですが知りませんでした。 参考になるサイトはたとえばこちら。 CSS/HTML色見本 全部で140色もの色名が色見本・RGB値と共にリストアップされています。これを見て自分がよく使っていた色が「OrangeRed」とか「DarkRed」で指定出来るんだと解ってちょっと目鱗でした。自分程度の柔軟性なんて、既に設定されている範囲の中でしかなかったです。なんとま
Dive Into HTML5した
ダイブ・イン！ 60%くらい。「結局どうすればいいの？」を参考にしました。@hail2u_さん、ありがとうございます。id属性とかclass属性が減って気持ちいいですね！ 別にサイズは減りませんし、むしろ増えてますけどね！ フッターはfooter要素でもちろん良いですが、よくあるソーシャルメディアへのリンクをnav要素で括ったりしないように気をつけましょう。サイトのナビゲーションじゃないですしね。aside要素だとfooter要素の中によくあるページ製作者情報との関連が薄れると思うので、section要素が妥当なんじゃないかと。メガメニュー系でTwitterでのつぶやきを取り込んで表示するなどという場合はaside要素の方が良いと思います。 検索フォームはnav要素が良さそうです。 <nav> <ul> <li> <form ...> <div> <input type="search"
iPhone向けHTML5プレーヤーリリース‐ニコニコインフォ
iPhone向けHTML5プレーヤーリリース 2011年10月13日 Tweet iPhone/iPod touch向けのHTML5の動画プレイヤーをリリースしました。Safariでニコニコ動画の動画視聴ページにアクセスするだけで、気軽に動画を視聴できます。これまで、iPhone/iPod touchでニコニコ動画を視聴する場合、「ニコニコ動画iPhoneアプリ」のインストールと起動が必要でしたが、HTML5に対応した動画プレーヤーの開発により、Safari上でもニコニコ動画の基本的な機能である動画視聴・コメントの投稿ができるようになりました。対応OSはiOS4以降ですが、iOS5ではSafariの仕様上、動画再生中のコメント表示には対応していません。動画を再生しながらコメントも楽しみたい場合は、従来通り「ニコニコ動画iPhoneアプリ」をご使用下さい。 なお、HTML5の関係上、対応動画
rel="canonical"はhead要素の先頭に置いてね
Googleでのrel="canonical"の扱いについての中の人の話。rel="canonical"が適切ではないURLを指していた場合に、Googleとしては無視したいし、多くの場合無視するので、万全を期すのなら(「If you really want to be safe」)head要素の先頭に書けと言っている。わかるけどHTMLの書き方が検索エンジンの意向に左右される世の中は嫌だなぁ……。 こういったネガティブなURL評価だけでなく、rel="canonical"のhref属性の値がスラッシュで始まる相対URLで書いてあれば信用してくれるとか、そういうポジティブなURL評価も欲しいですね。要は違うドメインを指しているrel="canonical"の評価を下げてくれれば、場合によっては無視してくれれば、良いんじゃないかとかそんな感じです。まぁユーザーのページがサブドメインで切られて
チャート生成ライブラリ「amCharts」 JavaScript/HTML5版 | mutter
このサイトでもいくつか使用しているチャート生成ライブラリ「amCharts」。 Flashを使って簡単にグラフを表示でき、柔軟にデザインできるので重宝しています。 使用例 「消費者物価指数（CPI）」をグラフ化してみた（2005年１月以降） - nplll そのamChartsにFlashを使用せず、 JavaScript/HTML5でグラフを描き出すバージョンが加わっていたので試しに使ってみました。 ドキュメントが英語でしかも結構わかりづらいので最低限の設定だけしています。 グラフ上で右クリックすれば、これがFlashではないのがわかると思います。 ソース 基本的にはWeb上のサンプルと同梱のサンプルを参考にしています。 データは配列形式で記述。データ、設定共に別ファイルに分けて読み込むことが出来ます。 <div id="chartdiv" style="width:590px; hei
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
HTML5 雑感 - てっく煮ブログ
twitter にちょぼちょぼ書いてたけど改めてまとめてみた。HTML5 の捕らえ方 HTML5 自体は Flash 対抗というよりも、Ajaxで作ってたようなサイトをより作りやすくするようなものなんだと解釈している。 2010-02-02 21:09:20 via web HTML5 vs Flash の話を見てて気になるのは、人によって Flash を何と捕らえるかが違うところ。videoタグで不要になるFlashは全体の一部だし、Flash使わなくてもできるようなところは既にHTML+JSに置き換わってる物も多い。 2010-02-02 21:09:33 via web JavaScript 使ってるだけで「Ajax だ」「Web2.0 だ」と言われた時代は去り、canvas つかってるだけで「HTML5 だ」と言われる時代がやってきました。 2010-02-11 10:10:53
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カレーハウスCoCo壱番屋｜ココイチ創業祭 グランド・マザー・カレーを食べて当てよう！キャンペーン実施中！！