動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
透明ノイズと紙テクスチャ。
ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。このブログにも背景にうっすらノイズ画像を敷いてます。真っ白にするよりも何となく柔らかい感じになって好きなんです;)。 そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみます:)。 透明ノイズ 「透明ノイズ」とは、ノイズ画像を半透明にしたPNG画像のこと。僕が勝手にそう呼んでるだけですけど。 Firefoxで、画像を右クリックして「画像だけを表示」を選んだ時に開くページの背景にも使われてました（※下図は2013年9月現在。今は透明じゃないノイズになってます）。 Firefoxの「画像だけを表示」 body要素のスタイルに、下記のように指定されてました（※下記ソースコードは2013年9月現在）。 body { background: #222
Webサイトの作り方のまとめ！コーディングまで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめました。 ここで言うコーディングとは、「HTMLで文書を書いて（マークアップして）、CSSで見栄えを整える（CSSコーディングする）」ことを指します。主に「Webデザイナー」と呼ばれる人たちが担う範囲のコーディングについて書いてます。 以下は目次です。クリックするとその項目へ移動します。 コーディングの下準備 ディレクトリの構造を考える ディレクトリの設置 Web開発環境について CotEditorというテキストエディタ Zen-Codingという便利なプラグイン その他のWeb開発環境 コーディング！まずはマークアップ（HTML） index.htmlの基本設定 トップページの内容をマークアップ コーディング！レイアウトを整える（CSS） style.cssの基本設定 トップページのレイアウトを整える <heade
Googleマップをイラストマップみたいにしたい。
サイト制作において、アクセスマップなどの地図の表示はどうしてますか？「Google Maps API」を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。 今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ！というお話です。 記事中に出てくる画像は2012.3現在のもののため、現在のGoogle Maps APIでの表示とは異なりますので注意です…X(。 リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました（2015.7.20追記）。 まずはしっかり抑えておきたい「Google Maps APIの基本」から。 基本をすっ飛ばして早速カスタマイズしたい方はこちら↓。 Google Maps APIの基本 Google マップはGoogle API キーを発
CSSだけでスライドショーはつくれるよ。
この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。 CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術です ということで、ここでは、前回の記事で作った、グローバルナビの下の大きめの画像のところ（以下：スライドショー）を、CSSだけで実装してみます。JavaScriptで実装したサンプルはこちら。 以下が目次になります。 まえがき CSS Programmingに使える便利なやつ transitionプロパティ E ~ F（間接セレクタ） :not(s)否定疑似クラス :checked疑似クラス <label>要素 それCSSで出来るよ。 きっかけづくり チョボのところの仕組み ~と:checked <label> transition :first-childと:fi
Webサイトの作り方のまとめ！ブラウザチェック。
サンプルサイト制作を通して「Webサイト制作」についてまとめてます。 前回の記事で、トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。 以下は目次です。クリックすると各項目へ移動します。 対象ブラウザ。 ブラウザの種類 ブラウザのバージョン ブラウザの進化 チェックすべきブラウザ ブラウザチェック。 ブラウザチェックツール BrowserStackを使ったブラウザチェック VMware＋IETesterでブラウザチェック Internet Explorerでバージョン別チェック チェック結果 表示の崩れを整える。 IE8での表示を整える IE7での表示を整える IE6での表示を整える モダンブラウザと同じくらいまで整える。 transitionの動きをjsで実装する IE8以下でも:last-childとか使
Lopan.jp
このサイトは、分析、パーソナライゼーション、およびターゲットを絞った広告の目的だけでなく、サイトの重要な機能を有効にするためになどのテクノロジーを利用します。詳細については、次のリンクをご覧ください。ポリシー設定の管理ストレージの設定サイトにアクセスすると、および同様の技術「」を使用して、ユーザーに関するデータが保存または取得される場合があります。は、サイトの基本的な機能やその他の目的に必要になる場合があります。特定の種類のを無効にするオプションもありますが、無効にするとサイトでのエクスペリエンスに影響を与える可能性があります。ポリシー必須サイトの基本的な機能を有効にするために必要です。必須のを無効にすることはできません。クッキーを見るターゲットを絞った広告あなたとあなたの興味により関連性の高い広告を配信するために使用されます。広告の表示回数を制限したり、広告キャンペーンの効果を測定したり
Webサイトの作り方のまとめ！トップページ完成まで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
Photoshopのシェイプでできること。
PhotoshopをWebデザイン制作として使ってると、画像を編集する事よりも、シェイプを使って図形を描く事の方が多い気がします。Illustratorで描くのと違って、ピクセル具合も気にしながら描けるので、小さいアイコンなんかはPhotoshop上で作った方がきれいに描けたりします。それでいてパスなので、拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せるし、いろいろ重宝ポイントがあるんです。 そんな万能シェイプの機能や特長について、個人的なまとめです。 ※この記事では、主にPhotoshop CS4を使っていますが、Photoshop CS6との違いも、分かる範囲で注釈入れてます。 ※OSはMac OS X 10.6 Snow Leopardを使ってますが、Mac OS X 10.8 Mountain Lionとの違いも、分か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
