2012年9月20日のブックマーク (2件)

  • [CSS]さまざまなバリエーションを簡単に利用できる美しいデザインのボタンを実装するチュートリアル

    画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button class="button">Button</button> CSS CSS3を使って、ちょっとリッチにスタイルしてみましょう。 .button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow

    ebisu3htn
    ebisu3htn 2012/09/20
    さまざまなバリエーションを簡単に利用できる美しいデザインのボタンを実装するチュートリアル 画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエ
  • Dwの可変グリッドレイアウトを使ってブログを構築した際に気をつけた事など - すしぱくの楽しければいいのです。

    公開日:2012年9月20日 カテゴリ:Web制作に役立つネタ うちのブログを デスクトップPC・タブレット・スマートフォン のブラウザサイズごと最適化して表示させるレスポンシブウェブデザイン(以下RWD)にリニューアルしました。「どうやって作ったのか教えてほしい」など、数人からリプライをもらいまして、使用したDreamWeaverCS6の可変グリッドレイアウトについて、気をつけた点などを備忘録ついでに書いてみましたよ。 流行りに乗り構築したので不安もありましたが、PV数+広告収入は上昇しており個人的には「導入してよかったぁ」っと満足してます。 DreamWeaverの可変グリッド 今回、DWの可変グリッドレイアウトを利用してRWDサイトを構築しようと思うわけですが、作る前の読み物として Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice ヒロさんが解説

    Dwの可変グリッドレイアウトを使ってブログを構築した際に気をつけた事など - すしぱくの楽しければいいのです。
    ebisu3htn
    ebisu3htn 2012/09/20
    Dwの可変グリッドレイアウトを使ってレスポンシブデザインにした際に気をつけた事 うちのブログを デスクトップPC・タブレット・スマートフォン のブラウザサイズごと最適化して表示させるレスポンシブデザイン(以下RW