CSSのcounter-incrementを使ってリスト以外に番号を付ける方法
あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介します。 「counter-increment」というプロパティを初めて聞いたという方も多いかもしれません。「counter-increment」は、サンプルのように番号を自動的に付けるときに使われます。リスト（list-style-type: decimal）のような感じですね。「counter-increment」で番号を付ける対象を指定して、疑似要素を使って表示することになります。 疑似要素を使っているため、IE7以下は非対応ですのでご注意ください。 今回サンプルを２つ用意しました。 ではHTMLから順番に解説していきます。 HTML HTMLはどちらのサンプルも同じで以下のようになっています。 <div class="divCount"> <h4><a href=
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
ウェブデザインが苦手なプログラマーたちへ「XHTML+CSSデザイン 基本原則、これだけ。」 - elm200 のノマドで行こう！
私はウェブデザインができないプログラマーである。以前はデザインはデザイナーさんに任せておけば良いと思っていた。だが、考えてみると、われわれは、デザインされたものしか目にすることはできないのだ。どんなに優れたアルゴリズムをプログラマーが実装しても、残念ながら私たちの目には見えない（反応速度で体感できることはあるにしても）。人もウェブサイトも見た目が９割なのである。 最近、私は「書評人」というウェブサービスを始めた。当然、私にデザイナーを雇う余裕などない。自分でデザインを制作する必要に迫られた。さて困ったどうするか。 私は、ある人気ウェブサービスを運営する友人に尋ねてみた。彼は、昔、一緒に仕事をしたことがあるプログラマーだ。特にデザインを専門的に勉強したことはないはずなのに、彼が作るサイトはどこかあかぬけている。彼に根掘り葉掘り尋ねるうちに、勧めてくれた本がこれ。 XHTML&CSSデザイン
Webデザインを提出してお客さんによく指摘を受ける基本的なこと。 │ モノづくりブログ 株式会社8bitのスタッフブログです
株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 よくWebデザインをクライアントに提出すると、現場レベル(制作会社や代理店)ではOKだったものがお客さん(エンドクライアント)にとってはNGだったりします。 「ええ！そんなことしたらせっかくのデザインが台無しになっちゃう！」 という経験を持つデザイナーさんも少なくはないのでしょうか？ ですが、デザインが分かっていない！ありえない！とばっさり切らないで考えてみることも大切です。 実際に利用する人のほとんどはデザインが分かる人(デザイナー？)ではないので、その方々のご意見を受け入れて満足されるものをつくるのもプロだと思います。 お客さんに指摘をされる部分は読みやすさ、見やすさなど、いたってシンプルな部分だったします。 (大抵のお客さんは最初のイメージをそぐわないものでなければ、デザインテイストがどうと
25 Amazing HTML5 Portfolio Web Designs For Inspiration
25 Amazing HTML5 Portfolio Web Designs For Inspiration by Priya on April 21st, 2011 No Comments » Share HTML 5 is a higher version of markup language which contains advance tags for web design and web development. It consists of new features, functions and techniques. HTML 5 is a language used for representing content for web technology. It is the latest version of HTML. Its main objective is
松井酒造株式会社
松井酒造株式会社は、享保11年(1726年)創業。 東山三十六峰と鴨川に囲まれた自然豊かな酒蔵は、西に京都御所や下鴨神社、東には大文字山を望みます。 蔵元が自ら杜氏として、数名の蔵人と共に酒を醸します。積極的な営業や販売は、行っておりません。 私共の酒は、香りだけのものや辛口だけのものではない、甘酸辛苦渋の「米の旨み」を最大限に引き出した、旨い酒、味のある酒であることが特徴です。
http://blog.v-colors.com/wcfukuoka2011-open.html
あのWordCampが今年も福岡にやってきます！ 今年は2011年2月19日、九州産業大学にて開催です！ ということで、今年はなんと！サイトデザインとコーディングを担当させていただきました…！！ このデザインにした理由と作業の流れ等を書いておきたいと思います。 デザインを起すにあたって 今年のキーワードは【Publish】です。 WordPressが、自身を「Blog Tool and Publishing Platform」とうたっていること、近年さまざまなPublishの方法がうまれてきていることなどから、今年は、【Publish】をテーマに、デザインやアイディアが生み出されるまでの過程にも焦点をあてていこう！ということのようです。 Skypeで様々なアイディアを頂く Skypeで会議をしました。 それぞれが【Publish】という言葉に持つイメージやサイトの方向性について話していきま
ウェブページのサイドバーに生じる空きスペースの活用方法
ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript でメディアクエリを行う window.matchMedia の使い方
http://japan.internet.com/webtech/20120725/1.html
フレッシュでフリーなWordPressテーマ２０１１:phpspot開発日誌
https://www.fenrir.co.jp/blog/2011/06/blog-design-5-step.html
Loading...
デザイン丸ごとPSDダウンロード80
designerterminal.com