HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
無料で最強！レスポンシブ対応の高品質HTMLテンプレート23個まとめ 2017年10月度
2017年のウェブデザイントレンドをうまく反映したかっこいいウェブサイトや、アニメーションなど素敵なエフェクトを採用したランディングページなど、HTML5/CSS3で制作された無料テンプレート素材をまとめてご紹介します。 デザインの現場でも人気の高いBootstrapフレームワークをベースとしたテンプレートも多く、自由にそして手軽にHTMLテンプレートのカスタマイズを行うことができる素材が揃います。どれもスクリーン画面サイズに関係なく表示できるレスポンシブデザインを採用しており、さくっとウェブページを作成したいときの参考にもどうぞ。 Bootstrap 対応！2017年最新の無料HTMLテンプレート上半期まとめ レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Wired
JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。 You can get pretty far in making a slider with just HTML and CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Step 1: 最初にセマンティックなマークアップ Step 2: flexboxを使ってスライダーを実装 Step 3:
Web制作者がiPhone Xの発売前に知っておきたい、Webページを表示した際に起きる現象とその解決方法
iOS 11が本日リリースされ、iPhone Xの発売を楽しみにしている人も多いと思います。 しかし、Web制作者やブログのオーナーはiPhone Xに対応しておく作業が増えるかもしれません。 iPhone Xではスクリーンが変更され、それに対応するための解決方法を紹介します。 Removing the White Bars in Safari on iPhone X 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone XでWebサイトを表示した際の問題点 解決方法 その1: background-color 解決方法 その2: viewport-fit 解決方法 その2 補足: safe-area-inset-* iPhone XでWebサイトを表示した際の問題点 新しく発売されるiPhone Xは、美しいディスプレ
レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度
ウェブサイトの閲覧方法は、モバイルやタブレットの普及によって大きく変わってきており、あらゆる端末へ対応することがウェブデザイン制作では必須となってきています。このややこしい問題を解決する、もっとも一般的な方法のひとつが、レスポンシブWebデザインです。 レスポンシブWebデザインとは、デスクトップやタブレット、スマートフォンなどさまざまな画面サイズごとにデザインを調整でき、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる制作手法を指します。 今回はレスポンシブWebデザインに対応した、無料ダウンロードできるHTMLテンプレート素材をまとめてご紹介します。どれも文字テキストや画像イメージを編集するだけで、すぐに高品質なウェブサイトを作成できます。またBoostrapなど人気フレームワークを利用した素材も多く、柔軟にカスタマイズできる点もポイントです。 サイト設計の手間を
[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア
Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。
![[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア](https://cdn-ak-scissors.b.st-hatena.com/image/square/756f0468957ea28ca57928b50217267f6ec350ab/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016101105-01.png)
video-resize - videoタグの大きさをダイナミックに変更
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で追加されたタグの中で注目度が高いのはvideoタグではないでしょうか。動画は人気コンテンツの一つですし、Flashが終わる中とあってvideoタグに期待がかかっています。 しかしそんなvideoタグはあまり柔軟にできていません。例えばリサイズですが、標準では問題があるのでvideo-resizeを使ってカバーしましょう。 video-resizeの使い方 video-resizeを使っているところです。 大きいときの表示。 高さを変えた時の表示。 video-resizeが便利なのはウィンドウの高さの変化にも追従してくれることです。レスポンシブは幅の変化に合わせますが、video-resizeは高さにも関係してきます。そして、なるべく全体が見られるような状態を維持してく
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など
HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。
GLSlideshow.js·WebGLを使ったスライドショー MOONGIFT
Web上で写真やスライドを切り替えるスライドショーは数多くあります。その多くはCSS3を使ったアニメーションで切り替えるものが多いかと思います。しかしもっと高度なエフェクトを実装したいと思ったことはないでしょうか。 今回はWebGLを使ったスライドショーアプリケーション、GLSlideshow.jsを紹介します。写真のスライドショーなどにぴったりです。 GLSlideshow.jsの使い方 GLSlideshow.jsのデモです。 実際にスライドが切り替わるところです。 こんなズームするエフェクトも指定できます。 WebGLを使いこなすことで高度なエフェクトが実現できるようになります。これもまたHTML5を使いこなす上で大事な要素でしょう。 GLSlideshow.jsはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
ウェブサイトで事前レンダリングする方法
ウェブサイトで事前レンダリングする方法を紹介します。 １．はじめに 先日発表された、モバイルウェブ高速化を目的としたプロジェクト「AMP」の記事を読んでいたところ、事前レンダリングという手法が使われていることを知りました。 AMPプロジェクト ということで、本エントリーで事前レンダリングについて紹介します。 ２．事前レンダリングとは 事前レンダリング（Prerendering）とは単語が示すとおり、あるページを表示している間に別のページの読み込みとレンダリング実行するものです。 Google検索では、検索結果の1番目に表示されたサイトは、この仕組みを使って事前レンダリングされています。 ３．ウェブサイトで事前レンダリングする ウェブサイトで事前レンダリングするには、ページに下記のlink要素をページに埋め込みます。 <link rel="prerender" href="http://us
11 Free Fresh HTML5 & Responsive WordPress Themes
With this collection, we aim to share another exciting compilation of some responsive WordPress themes. WordPress is a wonderful platform and the huge collection of available themes makes it even more appealing and attractive. This post contains 11 free to use HTML5 and responsive WordPress themes for you. HTML5 comes with many advanced and latest features to give awesome and realistic results. He
GreedyNav - これは良い！レスポンシブにメニュー数を変化 MOONGIFT
スマートフォンやタブレットが増えるのに伴ってWebの世界ではレスポンシブなデザインが求められるようになってきました。単に各デバイスに向けて最適化するだけでなく、情報の整理も大事な要件になっています。 今回はWebサイトをレスポンシブにする上での面白いソフトウェア、GreedyNavを紹介します。このアイディアはなかなかイケてますよ。 GreedyNavの使い方 GreedyNavを適用しているサイトです。上のメニューに注目です。 幅を狭めました。 さらに狭めました。 縮んだ分はクリックすると出てきます。 GreedyNavは画面の幅によってメニューを出す個数を可変できるのがポイントです。つまり左側から大事なメニューを並べていくことで、スマートフォンやタブレットでも操作性を損なうことなく使えるようになります。 GreedyNavはHTML5/JavaScript製、MIT Licenseのオ
Medium – Where good ideas find you.
A place to read, write, and deepen your understanding
HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
Firefox 38 が正式リリース、レスポンシブ・イメージ、ruby 要素のサポートなど
Firefox 38 が正式リリースされ、自動更新も提供開始されました。picture 要素がデフォルトで有効になり、srcset 属性が使えるようになったことで、レスポンシブ・イメージの利用が可能になりました。またルビへの対応が行われています。 Firefox の最新版、Firefox 38 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。自動更新が少し遅れて、38.0.1 として届いたので、リリース直後に少し問題があったみたいですね。 picture 要素がデフォルトで有効になり、srcset 属性が使えるようになったことで、所謂レスポンシブ・イメージ （Responsive images） の利用が可能になりました。また、ruby 要素、CSS Ruby への対応が行われ、ルビの使用が可能になっています。 Firefox 38.0 リリースノート An
picture 要素（レスポンシブ・イメージを実現する） - HTML （HTML Living Standard） タグリファレンス
picture 要素は、所謂レスポンシブ・イメージ （Responsive images） を実現するための要素です。 picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、sizes 属性を組み合わせて指定することで、デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能になります。 複数イメージソースの指定は、picture 要素内に source 要素を記述する事で行います。詳しくは source 要素の項目をご確認ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
521 Dimensions
.JS web coding memolist
商用無料でしかも高品質！レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ
新着記事
