Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。

東京Node学園祭2015

最近の情報収集の仕方も昔とはめっきり変わった感がある。 そもそも情報が多すぎるのが困りモノだ。 フロントエンドの技術サイクルも目まぐるしく早い。 多すぎる情報を効率良くフィルタリング出来る仕組みを確立すればいいと個人的には思っている。 それには自分に合った質の高い発信元を把握しておくことだ。 今日は自分の日頃使ってるものを紹介する。 国内 はてブ(テクノロジー – Webデザイン) 技術系の鉄板。毎日眺めるだけでホットな話題がある程度わかる。 Gunosy 言わずと知れたキュレーションサイト。意外とコアな情報も入ってくる。 dotHTML5 初めはHTML5関連だったけど、最近は多岐にわたってる印象。 HTML5 Experts.jp JSer.info azuさん運営のJSer御用達しサイト。 ここ 見ておくと参考になる。 そういえば最近JSerという言葉聞かなくなった。 海外 Smas

更新されたエントリーがあります。 psn.hatenablog.jp 構造化テストツールが新しくなり、機能変更・追加が行われたというお話で、今までOKだった記述がNGになったというネタを見て「これはこういう意味ですよ。」という解説を書いておかないとなぁと考えていたら一週間くらい過ぎそうなので、いい加減書いておきます。 構造化テストツールのチェックが厳しくなった？ パンくずリストの部分で起こっているようです。 厳密に言えばそうなります。 この部分ですね。きちんとリンクを置かないとエラーが表示されるようになった。というお話のようです。 そういえば、このエントリーを書いてもシブタクさん気づかないですね。 IDコールできません。 そもそもどういう事だろう？ 一例として、簡単にパンくずを表現すると カテゴリ > 今見ているページのタイトル このような表現になります。 HTML+microdataでマ

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I’ve been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you’re good with IE 9+, using inline SVG and the <use> element to reference an icon is a superior system. First let’s cover how it works.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31

CSSの定義をアルファベット順にした後、HTMLの属性を書く順序についてずっと考えていた。アルファベット順だとわかりやすいが、非常に読み解きづらくなる。そういった点での読みやすさだけでなく、必須属性を書き忘れないようにもできたら良いのかなと色々考えている。 今のところ以下のような順序が良さそうだと感じている。 id属性 class属性 style属性 他属性をアルファベット順で WAI-ARIA(role属性とaria-*属性) data-*属性 Microdata(item*属性) id属性とclass属性を先頭にするのはCSSとの兼ね合いで、これらだけ知りたいというケースが多いからだ。使われることが多いclassが前の方が効率的だろうと思われるが、一意に確定されるidの強さを先頭にすることで表現したい。style属性を使うならclassと離して書くのは良くなさそうなのでこれらに続けて書

2013/10/23に開催されたHTML5BeginnersのBrush up your Codingのセッションの資料です。

11:10～ 課題ページの確認＆PageSpeed Insightsの実行目的：チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20～ 画像ファイルの最適化目的：画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの