CSSで使われるフォント / もうパンツはかない
チェック対象は、HTML文書内のstyle要素とstyle属性のCSSの指定と外部CSSファイルです。およそ12,000ページを調べました。あまり正確な調査にならなかったので雰囲気程度にとらえてください。 左側の数字は調べた範囲での出現数、右側がフォント名です。フォント名のうしろの印は次の通り。 Windowsの標準フォント / Macの標準フォント / Webフォント ここでは実際にそのフォントでフォント名を表示するようにしました。フォントがあればそれで表示されるはずですが、ブラウザによっては表示されないこともあります。 さて、Webフォントでは、「Roboto」「Open Sans」はGoogle制作のsans-serif系欧文フォント、「Source Code Pro」はソースコード表示のためにAdobeが作った等幅欧文フォント、「FontAwesome」はアイコンフォントです。また
WEBデザイナーに必要な3つの基礎と持っていると役立つ5つの能力 - アシアルブログ
こんにちは。 アシアルWEBデザイナーの鴨田です。 最近はディレクターとしても頑張っていたりするのですが、 やはり根本はデザイナーなので、デザイナーが持ってると、 役に立つんじゃないかと個人的に思う能力について、語ってみようかと思います。 まずは基礎編として、 WEBデザイナーを目指す人が身につけておくべき必須能力についてです。 １．Photoshop力 何を差し置いても、これがないと始まりませんね。 とりあえず、教則本を読むって言うのは、 使い方を覚えるのにはいいんですが、多分操作だけ覚えてもつまらないので、 個人的には、自分で写真を撮って、それを加工しまくる、 というのがいいんじゃないかと思ったりします。 まあ、Photoshopは元々フォトレタッチソフトなので、 その特性を生かすことで出来るデザインも出てくると思います。 大学生くらいの時にこういうフィルターをつくって、 なんちゃって
YUI: CSS Grid Builder
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut d
愛の妖精ぷりんてぃん 公式ホームページ
コーナー一覧 ご覧になりたいコーナーをお選びください ☆ トップページタイトル ☆ 今日の未女子日女（ミニ日記） 【SPECIAL】 愛の妖精ぷりんてぃん きらめきの商品 販売中☆ ☆ ぷりんてぃんのお店 【SPECIAL】 あなたの運気（pr）を高めます♡ スマホ用 壁紙 無料配布中 ☆ きらめきの壁紙カード ☆ ぷりんてぃん ここがすごい!! 【はじめに】 ♡ ぷりんてぃんってなに？ ♡ ミーちゃんがご案内する 愛のぷりんてぃんの世界 【絵 本】 ♡ 愛のファンタジアランドへ ようこそ！ ♡ ぷりんてぃんと遊ぼうよ！ 【エッセイ】 ♡ あなたが幸せになるために 【作 品 集】 ♡ 未女子日女ギャラリー１ 東日本大震災復興祈念 ♡ 未女子日女ギャラリー２ ♡ 未女子日女ギャラリー３ ♡ 未女子日女 直筆 書道メッセージ集 【ミニ劇場】 ♡ 愛と幸せの ぷりんてぃん物語 【ライトノベル】
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
はてなブックマークエントリーページの「参考になった」ボタンは何故利用されなかったか - uilab
「参考になった」ボタンとは エントリーが参考になったかどうかを「はい」「いいえ」で選択して可視化することにより、該当エントリーの参考度を計る機能です。 はてなブックマーク新バージョンの公開ベータテスト開始について - はてなブックマーク日記 - 機能変更、お知らせなど 去年の11月7日に、はてなブックマークの新しいバージョンが公開されるとともに、上記の機能がリリースされました。 ところが、それから約半年後の14日に、はてなから以下のような発表がありました。 昨年11月のはてなブックマークリニューアルから、試験的にエントリーページ(コメント一覧が表示されるページ) にて「参考になった」ボタン機能を提供してきました。 半年間運用してみましたところ、想定していたよりも利用されていないことが分かりましたので、本日本機能を停止いたしました。ご了承ください。 「参考になった」ボタンの廃止について -
ごく簡単なHTMLの説明
HTMLは本来簡単で便利なものです。「30分間HTML入門」で基本は十分。まずシンプルに自分の情報を表現してみてください。 You can write a document as simple as you like. In many ways, the simpler the better. -- Tim Berners-Lee 簡単なHTMLの説明 少し詳しいHTMLの説明 XHTMLから次世代ウェブへ 電子テキストで情報発信 簡単なHTMLの説明 だんだん説明の量が増えてきたので、コンパクトな入門ページを用意しました。 基本がきちんと分かる30分間(X)HTML入門 HTMLを使った人間・コンピュータ双方にわかりやすい表現 （スライドのHTML版） 何のためのHTML？ HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正
複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT
なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。 今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応
はてなブックマークが重い件について、Page Detailerというツールを使って調べてみる - VTuberになったプログラマーの魂の残滓
JavaScriptの部分は というわけでid:amachangに任せましょう。 というわけでそれ以外の部分でいったいどこが重いのか 何が重いの？ということで重たい箇所を分析していきましょう。 IBM PageDetailer 解析ツールとしてIBM PageDtailerを利用します。 alphaWorks Community 解説するよりも見てもらうほうが早いと思うのでさっそく使ってみるよ。 ちなみに上記ソフトのダウンロードにはIBMアカウント（無料）が必要なので、使いたい人は登録しよう！ http://b.hatena.ne.jp/HolyGrail/ の結果 こんな感じのグラフが出てきます。 では、詳細を見てみましょう。 このグラフですが、長い部分が http://b.hatena.ne.jp/HolyGrail/ のHTMLそのもののロード時間になっています。 内訳としては 濃い
フリーのお天気アイコン集いろいろ:phpspot開発日誌
Free Weather Icons Collection フリーのお天気アイコン集いろいろ。 クオリティの高い天気アイコンが多数公開されています。 Livedoor のお天気APIと組み合わせれば、サイト内に天気を表示できますね。 Glossy Weather Icons Weather Icon Set Sticky Weather Icons Flat Weather Icons Tick Iconbest Weather Conditions Icon Set Small & Big Weather Icons Bubble Weather Icons Weather Sniffer 7 Degress Glossy Weather Condition Icons Large Weather Icons Pathfinder Very Detailed Weather Icon S
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
Webの縦組みに「m9」とかする人たち - DTP+印刷営業メモ（跡地）
昨日新潟の白山会館っていうところでJAGATさん主催のクロスメディアセミナーを受講しに行きました。 クロスメディアエキスパートって、簡単にいえば、マーケティングやプレゼンテーションを含めてメディアの活用ができる能力がある人を認定するとでも言えばいいでしょうかね。 印刷業界じゃないところのマーケティング業界だったら「当たり前だろ…常識的に考えて…」というところですが、まだまだ受注・請負産業チックな業界なので、そういうところから脱出して欲しいという思いもあるんでしょうねー。 そんで、クロスメディアはちょっとおいといて、JAGATさんがHTML関係で縦組みができるようにW3Cに提起しているって話をしていました。 そのあと、若い方が「ぷっ、WEBで縦組みはないよなぁ。」「ウケルwww」「JAGAT今更m9」とか言っていたのが気になりました。 ん〜…。 縦組みいいじゃない。 なんで縦組みがダメか考え
マックの新サイトも導入した「LPO」対策とは？
Webサイトのページビューがなかなか伸びない。アクセス解析をすると、せっかくサイトに来てくれた訪問客の多くが、ページを開いてはすぐに帰ってしまっているようだ――。 「直帰率」や「離脱率」の問題を解決し、サイト内の滞在時間を伸ばしたり、最終的なコンバージョンを高める方法として注目されているのが「LPO（Landing Page Optimization）」だ。LPOとは、検索エンジンなどの外部サイトから訪れる人が最初に開く“着地ページ”を最適化すること。もう少し具体的にいえば、検索キーワードによってページの内容を一部を書き換えたり、関連性の高いページへ誘導する方法だ。 このLPOの仕組みを新たに取り入れたのが、9月25日にリニューアルされた日本マクドナルドのWebサイト（http://www.mcdonalds.co.jp/）だ。以前の白を基調としたポップなイメージから、ブラウンをベースにし
入力ミスを減らすメールアドレス入力フォームの作り方 - キャズムを超えろ！
メールフォームでgmai.com abc.jなどはGoogleの検索結果よろしく「もしかして...Gmail？」と指摘してほしい。 つまり、アットマーク以降の入力文字列のうち、g,m,a,i,l,c,oのうち5文字を含んでかつ11文字以内のアドレスで、かつGmail.comと入力されていないなら「Gmail.comではありませんか？ Gmai.comと入力されています」とWARNINGを出すメールフォームとしてはどうか、ということだ。 メアドはなるたけ簡単に入力させたいが、入力ミスは救ってあげたい(すべてではなくても)、という二律背反に対するひとつの解決策ではないかと思うのだが、なぜ誰も実装しないのだろうか。 この流れでhotmail／yahoo mailぐらいは最低対応させたいものである。あと、よくあるのが以前書いたUIについてのエントリでも触れたがdot/commaの間違い、入力忘れ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
IDEA * IDEA
Mac、Win等のブラウザのPhotoshopテンプレート集:phpspot開発日誌