アイコンの実装方法
ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとおり、「そのアイコンの意味を伝えるテキストが付随するかどうか」を考える必要があります。 テキストが付随しないアイコン 家のアイコンだけでホームページへのリンクを表す場合など、ラベルとしてのテキストが存在しないアイコンは、自分自身でその意味を伝える必要があります。こういったアイコンの実装方法は限られていて、ほぼ 1 つしかありません。alt 属性に代替テキストとしてラベルを指定した img 要素をマー
🌻 Brighten Up Your Life With The 😊 Smile Emoji List: 10 Emojis To Improve Your ✨ Online Content | 🏆 Emojiguide
🌻 Brighten Up Your Life With The 😊 Smile Emoji List: 10 Emojis To Improve Your ✨ Online Content When you talk to people online, it’s always fun to throw an emoji here and there to express how you are feeling. It’s a great way to liven up emails, texts, and social media posts and benefits both the giver and the receiver. If you’re a man or a woman of few words, and you hate getting mushy, telling
Developer Tool - App Icon Resizer
Best app icon resizer for mobile developers. Optimized for both for Xcode and Android Studio.
WebサイトをiPhone,iPadのホーム画面に追加したときに表示されるショートカットアイコンの作り方＆指定方法
まぁ、「これ以上大きくてもおｋ」とは書いてありますが、iPhoneに表示されるアイコンのサイズは決まっておりますので114×114pxで作成するのが無難でしょう。 画像が用意できたらアップロード、そしてheadタグ内に [html]<link rel="apple-touch-icon" href="画像パス" /> [/html] を追加します。 これだけ。 ちなみに、「apple-touch-icon」の部分を「apple-touch-icon-precomposed」とすると、iPhoneアイコン特有のつや出し効果を拒否することもできます。（角丸効果は防げません） Webサイトのホーム画面への追加方法 さて、早速アイコンを設定した自分のブログをiPhoneでホーム画面に設定してみました。 ホーム画面にショートカットを追加したいページをSafariで開いて下部真ん中のアイコンをタップ。
CSSだけで組み立てられたアイコンを公開しているサイト『One div』
CSSだけで組み立てられたアイコンを公開しているサイト『One div』 『One div』は純粋にCSSだけで組み立てられたさまざまのアイコンを公開しているサイト。 各アイコンの下にあるボタンをクリックすると、アイコンを表示させるためのHTMLやCSSの内容が表示され、これらのデータをファイルとしてダウンロードすることも可能です。 実際、下のアイコンは画像ではなく空の<div>を下のCSSでアイコンとして描画しています。 .fish { width: 2.1em; height: 2.1em; position: relative; border-radius: 1.5em 0em 1.5em 0em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);
おーぃ自分のブログの「iPhoneホーム画面用アイコン」設置した方がモテるぞ | nori510.com
のりごとー( @nori510 )です！ ブロガーの皆さん、iPhoneホーム画面用のアイコンは設置してますか？ みんな！どうやらコレは設置しといた方がいいですよ！ 私事ですが、当ブログ宛にこんなレターが届きました。 ノリゴローさんへ(キャピ いつもブログ楽しく見ています。(キャピ 中略) ノリゴローさんのブログをアイホンのホーム画面におくと変です。なにかカッコよく置けませんか? 後略) ※コンタクトフォーム より頂いたメールより一部抜粋 お分かりですね！そうです！ 私、のりごとーであって、ゴローじゃないんです！「ほたぁるっ」なんて一度も呟いたこともないんです！ホントにいつも楽しく見ていてくれるんでしょうか。。 じゃなくて、「ブログをアイホンのホーム画面におくと変です」の部分。 以前「blogのiPhoneアイコンを設定する方法」こんな記事を書いておきながら、iPhone用サイトを変更した
Why icon fonts are awesome
I’ve been using icon fonts for a few projects lately instead of graphical icons. There are several advantages to using icon fonts. Scale them with CSS Color them with CSS Add shadows with CSS Change opacity with CSS Rotate with CSS Basically make any changes without opening Photoshop and editing a sprite They automatically scale for retina displays See for yourself. Chris Coyier put together a fan
画像の代わりに使えるアイコンタイプのWebフォントのまとめ
アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy i
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
最近話題になっていたこちらのサイトがとても便利です。 Fontello – http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭文字を取るとか、abc～とかにするとかですかね。 文字列の指定が終わったら、フォントファイルのダウンロードを行います。 サイト右上にある「Download webfont(n)」をクリックしましょう。 「fontello-xxxxxxxx.zip」がダウンロードされます。 解凍して中身を見てみましょう。 fontello －cssフォルダ －icons.css －icons-codes.css －icons-ie7.css －
画像アイコンはもう古い！CSSでスタイル自由自在のアイコンWebフォント
Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件
意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
apple-touch-iconやbrowserconfig.xmlなどWebサイトのスマホ用アイコン指定の最新情報を調べてみた | 初代編集長ブログ―安田英久
cmmntr.com
画像もFlashも無し！ スタイルシートでローディング時のスピナーを生成する -CSS load.net