[CSS]YUI Fonts CSSでフォントサイズの相対指定とクロスブラウザに対応する方法 | サイブリッジラボブログ
[CSS]YUI Fonts CSSでフォントサイズの相対指定とクロスブラウザに対応する方法 by かのう · 2011-06-15 かのうです。 クールビズ期間なのに肌寒くて乗り切れていないのが悔しい今日この頃です。 さて、今回は「YUI Fonts CSSでフォントサイズの相対指定とクロスブラウザに対応する方法」をご紹介します。（タイトルながい） サイブリッジには効率化のためにコーディングのガイドラインがあります。定期的に見直しを行っているのですが、今回改めてフォントサイズについて書いてみたいと思います。 ウェブデザイナーが必ずぶつかるフォントサイズの問題 今回考慮すべき点は5つ。出来る限り解決する方法を考えていきます。 1)固定せず相対指定をし、ユーザーが文字サイズを変更できる 2)11px以下を指定した場合でもIEで意図した文字サイズにする 3)英数字が読みやすい欧米フォント 4)
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
メモログ
💡 Personal notes about somthing I'm interested in text-align−スタイルシートリファレンス 「text-align:justify」は、対応していないブラウザがあるから使わない・・と思っていたのでが、今ではどのブラウザでもだいたい対応しているということに今さら気がつきました。いちど見捨てたプロパティにはなかなか目を向けないものだなと思った次第でございます。 追加したCSSはこんな感じ。特に何のひねりもないです。 .asset-content{text-align:justify; text-justify:distribute;} IE 6で確認した感じでは、日本語の両端揃えはまだtext-justifyの方が有効に機能するようなので、text-justify:distribute;を入れています。英文であればtext-align
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
検索フォームをCSSでデザインするサンプル集 | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
webの縦書き!! - お前の血は何色だ!! 4
今日の sugamo.css で webの縦書きについてのプレゼンを聞いた。 すごく面白かったので、自分でも調べてみた。 蝶と文字、そして糸 第24回Sugamo.cssで話したCSS3縦書きのスライド http://blog.imagedrive.jp/web/research/2011/01/08/sugamocss-css3-vertical-writing 早速テスト あなたの予想に反して、あなたのブラウザでは、この文章が縦書きにみえていますか？ h1 / h2 がはてなのスタイルシートで壊れてますね、、直接このファイルを開いてみてね。 縦書き123XYZこの中は、縦書きされますわよ。 おねえさま 問☆題☆解☆決！ 段落のテストとかやってみたり、 これは段落じゃなくしてみたり。 「あれ、セリフはどうなるのかな？って みさかはみさかに縦書きを行ってみたり。」 超長い文章は勝手に改行さ
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
iPhone対応したサイト構築のための基礎情報 « nulldesign
iPhone用のサイト制作の仕事が来そうなので、前もって情報をさっくりと集めておいたのですが、せっかくなので公開してしまおうと。特に目新しい情報という訳ではなくて、いろいろと散らばっていた物をまとめた物です。 iPhone対応と最適化(提案ベース) iPhoneの仕様的な部分 実相時のiPhoneの判別方法 html実装まわり viewport設定 ホーム画面にアイコンを表示 manifestファイルの設定 iPhone対応と最適化(提案ベース) ・iPhone対応 → iPhone搭載のSafari4対応 ・iPhone最適化 → ・3G通信、Wifi通信を考慮 ・UIのカスタマイズ ・ブラウザキャッシュの最適化もしくは調整等々 ・manifestファイルの設定 ・ローカルストレージによるデータの保存 iPhoneの仕様的な部分 ディスプレイサイズ 320px * 480
【iPhone】<meta name=”viewport”>について « minimo
2010年1月24日（日） No Comments <meta name=”viewport>について、Safari Dev Centerを参考に、自分なりにまとめてみた。 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193 Viewportとは iPhoneにおける仮想的なウィンドウサイズのこと。デフォルト値は980px このメタタグにより、ページを最初に開いた時の画面サイズ、拡大率などを指定できる。 iPhoneの画面サイズは横：320px 縦：480px。 例えば、下記は「横幅はデバイス（iPhoneは横幅320pxなので、ここ
iPhone向けサイトのHTML/CSS まとめ - カミジン＠ファンタの平穏な日常 Blog
パソコン/アニメ/プログラム/デザインなど、さまざまな事を書いていきたいと思います！ javascript/CSS/HTMLなどを勉強してます・・・・ iPhone/iPod対応のサイトを作りには少々コツが必要です。せっかくなので調べた内容を書いていきたいと思います。 ・CSSの振り分け まずiPhoneとパソコンなどに別々のCSSを読み込ませるのがサイト作りの一歩です。 <link media="only screen and (max-device-width:480px)" ref="iphone.css" type="text/css" rel="stylesheet"/> <link media="screen and (min-device-width:481px)" ref="pc.css" type="text/css" rel="stylesheet"/> このように<h
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
ボックスを上下左右画面中央に
ウィンドウを小さくした時に左上が見えなくなってしまうことに関する対処を追記しました。 何か、こういう立場のお仕事してる人とか、初心者のススメでFirefoxを使え！とかまずはFirefoxで確認すべしとか聞きますが、ボクはIE派です。 Firefoxに乗り換えようと頑張った時期もあったんすが、どーも合わない感じだったんすよね。 重さとかスクロールの仕方とかが、、、 だから確認もIEが先だったりします。 まーコレはボクのスタンスなんで、どーでもいいんすが。 ちなみにこのサイトのアクセス解析を見てると、IEとFirefoxの比がおおよそ、5:4っていう普通のサイトじゃありえない結果が出ます。こんなブログ書いてると当然っちゃ当然かもしれませんが（笑 さて本題にでも。 Tipsでも充実させたいと思ったので、特に目新しい内容ではございませんが、div要素とかのボックスを左右の中央、そして上下も中央に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今日から導入できるCSS3 | ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
【CSS】コーディングがさらに速くなる！Zen-Codingで覚えておきたいよく使うCSSスニペットコマンド | バシャログ。
CSS Lecture: 有名サイトが使っているid名class名集めてきました！
ZenHTMLSelectorsEn - zen-coding - Selectors and aliases for Zen HTML plugins - Project Hosting on Google Code