CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
JPEG画像をより美しく、より軽量に最適化するテクニック
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
DoCoMoのCSSとXHTMLまとめ | 村式開墾日記
DoCoMoのCSS、XHTMLにはクセがあります。注意すべき点をまとめてみました。 これに関してはいろいろなサイトで論じられていますが、既出のネタや仕様書の内容も含めなるべく広範囲に渡って情報を集めました。 他のキャリアについてはまた書くと思います。 特に気をつけるべき点を先にまとめると、こんな感じです。 ・CSSはインラインでしか記述できない。 ・XHTMLが必須でかつ適切なContent-Typeヘッダを吐く必要がある。 ・istyle属性は使えない。 ・MARQUEEタグは使えない。 ・object要素によるFlashの埋め込みはiモード対応XHTML1.1から。 ・TABLEタグはiモード対応XHTML2.0以降でないと使えない。 ・GPS用の属性lcsはiモード対応XHTML2.1以降でないと使えない。 (DoCoMoに限った話ではない内容も含まれています) CSSの名称、記述
WordPress でトップページを静的ページにして、サブディレクトリにブログを配置する方法 - minorio のプログラミング・メモ
基本的な情報は、Pages - WordPress Codex 日本語版に書いてあるんだけど、なんだかややこしいので整理しておこう。 ※ WordPress のバージョンは 2.6 として書いています。それ以前のバージョンではプラグインなどを導入しないと使えない機能があるかも知れません。 目標とするサイト構造 今回、目標とするサイト構造は、http://example.com/ に静的なトップページがあり、http://example.com/blog/ にアクセスするとブログのトップページが表示されるというもの。http://example.com/ で表示されるトップページには http://example.com/blog/ へのリンクが含まれる。またブログの記事は全て http://example.com/blog/ 以下に配置される。 ページテンプレートを２つ作成する 以下の２つ
（恐らく）最も簡単な、対IE用CSSハック術
CSSコーディングにおいて最も邪悪かつ驚異的な存在、Internet Explorer。 どんなに完璧にCSSを理解していても、彼らの挙動を把握していない限り、まさに「机上の空論」となってしまうという、恐るべき魔物。 それに立ち向かうべく発明されたのが、各ブラウザの独自仕様やバグの穴を利用して各ブラウザ個別に対応するという、いわゆる「CSSハック」。 今回はワタクシsmknが対IE用として日常的に使用している、（恐らく）最も簡単であろうCSSハック術をご紹介します。 と、その前に...。 今回ご紹介するCSSハック術は､CSSの正式な文法としては間違っています。 バリデート通りません。invalidです。 本来なら文法的にも正しいハックを使った方が良いのかもしれませんが、そもそもハックしちゃってる時点で正しいもクソもないような気が、個人的にはしてるので。 さらに、ハックの所為でCSSがバリ
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
[CSS]複数行のテキストを天地左右中央に配置するスタイルシート
Vertically Center Multi-Lined Text demo デモでは、一行、複数行ともに中央に配置されています。 仕組みは、吹き出しに「display: table;」、その中のパラグラフに「display: table-cell;」を指定し、天地左右中央に配置します。 HTML <div class="area"> <div class="bubble"> <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p> </div> </div> CSS .area { width: 300px; height: 300px; background: url(../images/abe-bg.png) no-repeat;
シゴタノ！ — 「人生をEvernoteに詰め込みたい！」というあなたのためのアウトプット収集法まとめ
私のEvernoteを万一他人に見られたら、リアルで爆発する・・・！ それくらい、今の私のEvernoteには、私の人生（ここ数ヶ月）が詰まってます。 何故かというと、twitterをはじめとしたミニブログや、読書記録サービスなど、バラバラにアウトプットしていた情報を、Evernoteに全て集めて管理するようにしたから。パソコンからアウトプットしている情報の多くが、半自動的にEvernoteに投稿されるようになっているんです。 Evernote for iPhoneの便利さに惚れ込んで以来、「とりあえずEvernoteにライフログを全部詰め込みたい！それをiPhoneから時折読み返してニヤニヤしたい！」 という欲求を満たしたいがために試行錯誤した結果が、今回ご紹介するアウトプット収集法まとめです。 １．何はともあれプレミアムアカウントにする » Evernote プレミアムアカウント プレ
ソーシャルメディアを使った情報収集パターンがかなり変わってきた :Heartlogic
ソーシャルメディアを使った情報収集パターンがかなり変わってきた フィードリーダー、Twitter、ソーシャルブックマーク等を使った情報収集＆記録のパターンがここ1、2か月でかなり変わってきたので、メモしておきます。 Twitterを「リアルタイム新着情報閲覧ツール」として利用 Twitterをつぶやき＆会話のサービス（会話を追いかけてあわよくば参加しようとするもの）ではなく、ブログやソーシャルブックマークやら画像共有サイトやらTumblrやら諸々のフィードをまとめて大ざっぱに見るサービスだと捉え直すことで、Twitterをずっと気楽に楽しめるようになりました。 時間のあるときにたまたま目に付いた情報をアバウトに見る、あまり深追いしない、気になるものはとりあえずどこかにクリップしておく、という感じ。フィードをどんどん流す人は昔は敬遠していましたが、最近は全く問題なくウェルカムです。 全てを読
3分LifeHacking：見たWebページをすべて保存する - ITmedia Biz.ID
自分の見てきたWebページの履歴を、より分かりやすく表示したり、閲覧したページを都度、ローカルに保存してしまう方法。ただしFirefoxのみ。 「あ、あの1時間前に見たページ、なんだっけ？」「昨日見たページ、今日いってみたらなくなっていた……」──。Web閲覧の時間も量も増える中で、こんな経験をしたことはないだろうか。 今回はFirefoxユーザー向けに、Webページの閲覧履歴を、ブラウザ標準のものよりもより詳細に、そして確実に保存する方法をご紹介する。 閲覧履歴をサムネイル画像で「Thumbstrip」 拡張機能として提供されている「Thumbstrip」（ダウンロード）は、閲覧したWebページのサムネイルを自動的に保存してくれる。ポイントは、 サムネイルがフィルムのコマのように一列に並び、マウスを置くだけでスクロールして流れをチェックできる いつ閲覧したかを「42mints ago」の
WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル:phpspot開発日誌
WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル 2009年04月15日- PHP Tutorials Examples Embedding PHP In CSS WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル。 CSSファイルをPHPとして実行して共通の値を変数にして使うというチュートリアルが公開されています。 PHPは知ってるという方には当たり前すぎるかもしれないですが、WEBデザイナーの方が最初に入門するにはよいかも。 ステップ1 AddType application/x-httpd-php .css .htaccess等に、AddTypeを追記して、.cssファイルがphpとしてサーバ側で処理されるように指定 ステップ2 <link rel="stylesheet" href="style.php" media="
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
議事録の書き方 Part2 : LINE Corporation ディレクターブログ
はじめまして。１月入社、ネトアニ等担当しているタカハシと申します。 部署の中で一番の新入りなので、定例会議等の議事録をよく作成しています。 議事録については、すでに「議事録の書き方 基礎講座」という名エントリがあるのですが、今回は、その続きを勝手に書いてみたいと思います。 初心者向け、そして、部署内の定例など、それほど形式ばっていないミーティングでの議事録を対象にした内容です。 議事録を作成するメリット 議事録の作成を依頼された時、「面倒だな」と思ってしまっていませんか？ 特に、入社したばかりで同じ部署の人の名前ですらうろ覚え、取引先の会社名なんて聞いたこともない！という状態だと、メモを取ろうにも皆が何を言っているかまったく分からなかったりしますし。 しかし、議事録を作成するという使命を持って会議に臨むと、 ・理解しようと一生懸命になる ・手を動かすことで記憶しやすくなる というメリットが
Google Feed APIで3分マッシュアップ (1/2)
特定のテーマに関する情報を集めた、ポータル的なWebサイトを作りたい――。そんなとき、JavaScriptを使って、他のWebサイトのフィードから情報を得て、そのサイトの最新情報を表示できると便利です。 しかし、普通の方法ではできません。というのも、JavaScriptでフィードを読み込むのに使う「XMLHttpRequest」オブジェクトでは、セキュリティ上、異なるドメイン（クロスドメイン）とのやり取りが制限されているためです。そこで、「Google AJAX Feed API」を使いましょう。 Google AJAX Feed APIは、指定したフィードをGoogleのサーバー側で取得し、JSON（JavaScript Object Notation）と呼ばれるJavaScript専用のデータ形式に変換します。変換されたデータは、JSONP（JavaScript Object Nota
text-indentを使用せずに画像置換【CAMU - Webデザインのネタ】
以前書きました「text-indent:-9999;」を使用すると、FireFoxリンク時のはみ出した点線が表示される問題がありました。 CSSでFirefoxのはみ出したリンク点線を消すなんか面倒くさいなってことで、今回はoverflow:hiddenを使用して画像置換します。 今回の方法では、FireFoxのリンク点線の問題もなく使いやすいと思います。 CSSのサンプルa { width:400px; height:0; padding-top:250px; /* 要素の高さ */ background:url(images/hoge.jpg) no-repeat; overflow:hidden; display:block; } 「height:0;」と「padding-top:250px;」とすることで、文字は250px下に表示されることになります。 そして、そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/06/google-analyitcs.html
あ～ゆ～どりま～ | 画像もMODxで管理
jQuery でCSVをテーブル表示 [Javascript] All About![jQuery でCSVをテーブル表示 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
developerWorks : IBM's resource for developers and IT professionals in Japan
wrapScroll JavaScript Library - youmos