[B! HTML] takahumi_nakanoのブックマーク

takahumi_nakano id:takahumi_nakano

HTMLに関するtakahumi_nakanoのブックマーク (7)

EmmetでHTML 5.1のレスポンシブイメージを効率よく記述しよう - Qiita
HTML、CSSを短い文字数で打てるプラグインEmmetを使いこなせば、コーディングの時間は大きく短縮されます。昨今のEmmetでは、HTML 5.1のレスポンシブイメージ(※)を効率的に記述できることをご存知でしょうか？本エントリーではEmmetでレスポンシブイメージのコードを効率的に記述する方法を紹介します。 ※ 参考記事「レスポンシブイメージで画像の表示を最適化〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA」 srcset の記述レスポンシブイメージでは、デバイス環境に応じた最適なファイルサイズの画像を表示するためにimg要素のsrcset属性を用います。Emmetでは次のように記述します。
takahumi_nakano 2017/01/26
HTML

emmet

Web制作
リンク
商用無料でしかも高品質！レスポンシブ対応、HTML5/CSS3で作成されたテンプレートのまとめ
最近のWebページで人気のある縦長ページ、繊細なインタラクション、大きい写真画像を使ったヘッダ、カード型コンポーネントなど、UIデザインのトレンドが取り入られたHTML5/CSS3で作成された商用利用無料のテンプレートを紹介します。各デバイスごとのレイアウト、気持ちいいアニメーションなどの勉強にもいいですね。 Synthetica デモページ最近のトレンドでもあるビジュアルのセクションを広く確保し、洗練されたアニメーションを備えたインタラクションが気持ちいいテンプレート。個人のポートフォリオからプロダクトのランディングページまで、何かを見せることに適しています。
takahumi_nakano 2016/06/09
Web制作

HTML

CSS

レスポンシブ
リンク
Webページを作成する時の基本になるHTML5の最小限構成やリセット用CSS、CSS3アニメーションなどのまとめ
Webページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。 HTML5で作成する時の必要最小限のテンプレートスタイルの正常化・リセットグリッドをつくるスタイルシート CSS3アニメーション HTML5で作成する時の必要最小限のテンプレートまずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。テンプレートはIE9や8以下への最低限の配
takahumi_nakano 2015/12/22
web制作

HTML

CSS
リンク
iOS9からiPad横ランドスケープはdevice-widthが効かない？
5,280views／投稿 2015-09-30／更新 2016-08-16 iOS8までのiPadのSafari横向きランドスケープ時は、viewportをdevice-widthで横幅ピッタリになる仕様でした。 iOS9からiPad Airで見るとノートPCやAndroidと同じ等倍になったようです。なんで？iPad Pro発売とiOS9のタイミングとみた iPad Proが登場した影響と思われます。iPad ProはMicrosoft SurfaceみたいにノートPCでもありタブレットでもあるので、横向きはノート扱いなのでしょう。私が持っているiPad Airは横向きでdevice-width無視されるのが確認できました。 iPadブラウザサイズ 768×1024（iPad Air／iPad Pro 9.7インチ） 1024×1366（iPad Pro 12.9インチ） iOS8ま
takahumi_nakano 2015/10/05
Web制作

HTML
リンク
href・doctype・src…？HTMLタグの読み方まとめ
Web担当者の皆様は、ページのちょっとした修正を自分で行うケースが少なからずあるのではないでしょうか。HTMLのタグや属性など、それぞれの正しい読み方を知っていますか？「qやa」など、一見するとどう読んでいいかわからないものが多いため、なんとなく読んでしまっている方も多いでしょう。今回は、読みづらいHTMLタグ・属性の読み方をまとめました。読み方に自信が無い方はこの機会に不安を解消しておきましょう。 HTMLタグの読み方 1.!DOCTYPE 読み方：ドックタイプ Document Type Definitionの略。文章の先頭に記載する宣言文。 2.a 読み方：アンカー anchorの略。リンクの出発点・到達点を指定するHTMLタグ。 3.br 読み方：ブレイク Breakの略。改行を指定するHTMLタグ。 4.dfn 読み方：ディフィニション Definitionの略。定義する用語
takahumi_nakano 2015/06/05
Web制作

HTML
リンク
https://developers.google.com/web/tools/setup/workspace/setup-devtools
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
takahumi_nakano 2015/03/02
Web制作

HTML
リンク
HTML5 | MDN
HTML5 は HTML で定義されている最新の標準仕様の名称です。この用語は、 2 つの異なる概念を表しています。これは HTML 言語の新しいバージョンであり、新しい要素、属性、動作、およびより多彩でパワフルなウェブサイトやアプリケーションを構築することができるより大きな一連の技術でもあります。このセットは HTML5 & friends と呼ばれることがあり、よく HTML5 と短縮されます。このリファレンスは、すべてのオープンウェブ開発者に便利になるように設計されており、機能に基づいていくつかのグループに分類された数多くの HTML5 の技術についてのリソースにリンクしています。 Semantics: そのコンテンツが何であるかをよりはっきりと表現することを可能にします。 Connectivity: 新しい革新的な方法でサーバーと通信することができます。 Offline and
takahumi_nakano 2015/03/01
Web制作

HTML
リンク
1