最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
面白Web API 100連発 - pastak-pub
エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu
これは便利！アイコン型WebフォントのCDN「Font Awesome」
まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f
JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
プログラミングやスクリプトやフレームワークなど、さまざまなアイテムが揃ったWeb開発者のための無料アイコン素材 -Devicons
Web制作や開発で使用するさまざまなプログラミング言語やスクリプト言語、フレームワーク、データベース、ウェブサービスなど、制作者・開発者なら目にしたことのあるアイコンが揃ったフリー素材を紹介します。 アイコン全145種 ダウンロードできるアイコンはWebページですぐに利用できるよう2種類が用意されています。 Webフォント（.eot, .woff, .ttf, .svg） スプライト用（.png, .svg） Webフォント用のCSS、スプライト用のCSSなども用意されているので、簡単に利用できると思います。使う時は、こんな感じに。 <link href='//cdn.jsdelivr.net/devicons/1.4.0/css/devicons.min.css' rel='stylesheet'> <span class="devicons devicons-bing_small">
Dreameaverをもっと便利に！ カスタマイズ＆拡張機能をご紹介 - Webデザイン初心者向けのあれこれ
こんにちは！ もう年の瀬でかなり寒くなってきました。寒いと手がかじかんで上手く動かず、作業スピードが落ちてしまいますよね……。 少しでも作業効率を上げるために手を温めるのもいいですが、普段使っているDreameaverをカスタマイズするというのもいかがでしょう？ ちょっと手を加えるだけで驚くほど便利になっちゃいますよ。 なお今回はDwのconfigurationファイルの書き変えを行うものもあるため、カスタマイズ前にファイルのバックアップを必ず取ってください。 ・CSSのコードヒントの順番を変える CSSで横幅を指定する時、「wi」と入力しコードヒントからwidthと打つつもりが、 ↑のようにwidowsという何に使うんだか分からないものを誤入力……なんて経験ありませんか？ そんな誤入力を防ぐ為に、コードヒントの順番を変えてしまう方法があります。 Program Filesから Adobe
jQuery Mobile にもっとアイコンを | karak
jQuery Mobileはたいへん便利だが、BootstrapのGlyphiconsほど豊富なアイコンは用意されていない。ボタンやナビゲーションにちょっと気の利いたアイコンを加えたいときに不便である。Glyphiconsを引っ張ってくるのも面倒だし、何か良い方法はないか、そういえばGlyphiconsにインスパイアされたWebフォントがあったな、と記憶の糸をたどって検索。そうしたらFont Awesome icons now included in jQuery Mobile Icon Pack – andy matthewsというまさに求めていたものが見つかった。 jQuery Mobile Icon Packは、Font AwesomeをjQuery Mobileから使えるようにまとめたもので、CSSのフォルダにいくつかファイルを追加するだけで使えるようになる。リンク先のGithub
もうアイコンには困らないぞ！ 11,245個のピクトグラムのアイコンがダウンロードできる -flaticon
10,000個以上あっても品質はどうよ、と思う人もいるかもしれませんが、サイトを運営しているのは当ブログともコラボしたfreepik.com！ 彼らのアイコンをはじめ、質の高いアイコンが揃っています。 ちなみに、コラボしたのはCelebrations Icon Setです。
Retinaでもボケない「シンボルアイコン」を使いこなそう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも！デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。 ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。 有名所ではシャープのIGZO（約500ppi）、ジャパンディスプレイのLTPS（約650ppi）などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという！4K時代の到来を予感させる！（その前に地球が終わらなければいいのだが！） ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。 そもそも♥「シンボルフォント」♥って何？ 読んで字の如し、「図形のフォント」です。タイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Icons | Font Awesome
http://www.uiplayground.in/css3-icons/
IDEA * IDEA
HugeDomains.com
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現
IDEA * IDEA