TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ

光るボタン CSS3 Gradient Buttons〔クロスブラウザ対応のグラデーションボタン〕 Better Button and Nav Interactions〔フェード効果付きの角丸ボタン〕 CSS3 Buttons Without Any Images〔button要素を角丸ボタンに〕 Super Awesome Buttons with CSS3 and RGBA〔角丸ボタン〕 Nice CSS3 buttons〔背景色が変えられるボタン〕 lovely Candy CSS3 buttons〔ラムネ菓子みたいな可愛いボタン〕 Animated Bubble Buttons CSS3〔マウスオーバーで背景の泡がアニメーションするシャンパンみたいなボタン〕 CSS3 Gradient Buttons クロスブラウザ対応のグラデーションボタン unknown CSS3 Gradie

最近になって、ひとつ気付いた事がある。 僕は仕事としてプログラミングやデザインをするのに向いていない。 一応、職業としてはソフトウェア・エンジニアという肩書きを持っており、 UI と UX を専門とする研究職という立場にはなっている。 プロジェクトの進行や状況に応じてプログラマー役、デザイナー役、ビジネスプランナー役をバタバタと切り替えているので、最近は「必要に応じてなんでもやってる感あるので、あんまり自分を専門家的に思えなくなってきたっていうかタダの小間使いでは」としか思えないのではあるが。 ”何か”を作りたい、成し遂げたいと思ってものづくりに取り組んでいない 他のプログラマー、エンジニアやデザイナーが、実際どうなのかは知らないけれど自身がプログラミングを独学で始めた時によく言われた事が 「何かやりたいこととか、作りたいものが無いのに覚えたり学ぼうとしても、効果は低く、あまり意味が無い」

小さいころから占いに興味があって、色々と勉強しているうちにどんどん好きになり、皆さんにも占いの良さを知ってほしくて記事を書いています。 知り合いに占い師や霊能力者、お寺の住職がたくさんいるので、その方たちにインタビューして記事を書いています。

パーツをモジュール化してHTMLテンプレートを組むための概念。 モジュールとは、ページを構成する小さなパーツの単位。 モジュールが並べられてページが成り立つと考える。 ###例 具体的なページ : http://bp-mobile.pxgrid.net/ モジュールの一覧 : http://bp-mobile.pxgrid.net/_template/modules.html なぜモジュールか 例えば1000のページを作るとき、1000枚のデザインを起こすのは非効率な方法と言える。そのような考えのもとでページを作っていけば、同じようなCSSを何度も何度も書くことになり、CSSの容量・数は無限に増えてしまう。このような状況を回避するため、ページを構成するデザインパーツの単位を「モジュール」と考え、この組み合わせでページを作っていくのがモジュール組みの基本的な考え方。 モジュール組みでHTML

こんばんは、ishidaです。急に肌寒くなってきましたね。 弊社シーブレインは馬車道から目と鼻の先にありますが、その馬車道にて今年も恒例の馬車道まつりが開催されています。１１月１日（日）～１１月４日（水）まで開催されておりますので、馬車道付近にお越しの際は是非お立ち寄りくださいね。 それはさておき、フォントサイズを指定するときにまずはベースとなる基準のフォントサイズをbody等に指定しますが、サイトによって基準を12pxにしたり、13pxにしたり、たまぁ～に10pxにしたりしてます。 そうなってくると相対指定で20px相当って何％だっけ？ってことがよくあるのと、毎回毎回電卓をたたくのが面倒になったので、ここに基準としてよく使いそうなフォントサイズをメモします。 基準文字サイズ 10px 基準文字サイズ 11px 基準文字サイズ 12px 基準文字サイズ 13px 10px

先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ

「IA100 �ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計」を読了した。けっこうななめ読み。 IA は Information Architecture で、情報アーキテクチャのこと。 じゃあ 情報アーキテクチャ ってなに？というと、こんな感じ。 情報アーキテクチャ（Information Architecture）は、知識やデータの組織化を意味し、「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術である。 ウェブデザインの発展に伴い、従来のグラフィックデザイン（平面デザイン）に加え、編集・ビジュアルコミュニケーション・テクノロジーを融合したデザインが要求されるようになった。情報アーキテクチャはこれらの要素技術を組み合わせた、わかりやすさのためのデザインである。ウェブ技術の発達に伴いその重要性が認識されているが、情報アーキテクチャの考え方自体は、紙

Make 24 monthly payments Pay 0% interest Start using the domain today. See details

<p>Normal</p> <p class="dropShadow">Drop Shadow</p> <p class="stroke">Stroke</p> <p class="outset">Outset</p> <p class="inset">Inset</p> <p class="block">Block</p> <p class="glow">Glow</p> <p class="blur">Blur</p> <p class="doubleStroke">Double Stroke</p> <p class="reflect">Reflect</p> <p class="deepInset">Deep Inset</p> <p class="gradient">Gradient</p> <p class="blind">Blind</p> body { background