タグ

**CSSに関するsihou1のブックマーク (8)

  • [CSS]CSS3で何ができるの? という時にみておきたいサイト集

    角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコードなど実装例が掲載されているサイトを紹介します。

    sihou1
    sihou1 2010/12/01
  • [CSS]画像無しで作成する美しいデザインのボタンのスタイルシート

    Photoshopで作成したかのような美しいデザインのボタンを実装するスタイルシートを紹介します。 キャプチャは上から、ノーマル時、ホバー時、クリック時です。 Make CSS3 buttons that are extremely fancy デモページ デモページ(カラーバリエーション) ※更新:カラーバリエーションを増やしました。 ボタンはCSSで実装されているため、ブラウザの文字サイズの拡大に伴いサイズも変更し、カラー変更も簡単におこなえるように設計されています。 ※CSS3非対応のIE7/8などでの見栄えはそれなりになります。 実装はシンプルながらもテクニカルで、先日当サイトで紹介した「Safariで見かける角丸のにじみを解消するスタイルシート」なども利用されています。 HTML ボタンのカラー変更が簡単にできるようにインラインスタイルシートを使用しています(下記キャプチャ参照)

    sihou1
    sihou1 2010/08/18
    地味に役立ちそう
  • Dreamweaverの機能を活用する・テンプレートの使い方:Web作製

    能率的なウエブサイト更新のヒント:道具としてのパソコン@おやこニュース Dreamweaverの機能を活用する:テンプレートの使い方 関連ページ 更新履歴 2005-07-07:更新 このページの構成 テンプレートについて テンプレートのメリット どういうときに使うか テンプレートの作り方 テンプレートファイル(.dwt)を作る 編集可能領域設定上の注意 テンプレートの活用法 テンプレートから新規ファイルの作り方 既存ファイルにテンプレートを適用する テンプレートを修正する テンプレートに関する注意事項 「能率的なウエブサイト更新のヒント」について 更新履歴 ご案内・関連ページ 環境設定に注意すること。また、DreamWeaver MX2004によるHTML作製も参照のこと。 テンプレートについて ああ。さすがだ。ドリームウィーバーはすごいなぁ、と思わせる機能のひとつが、テンプレートです。

    sihou1
    sihou1 2010/07/21
    テンプレート機能について
  • 配置をマスターして「機能するレイアウト」を作る大切なポイント

    ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、

    sihou1
    sihou1 2010/07/07
    凄いなぁ こういう見方があるのか。
  • http://csscorners.com/

    sihou1
    sihou1 2010/06/13
    これはかなりよい ジェネレータで久々に感動
  • 画像は一切使ってない!?CSS3だけで描いた“ドラえもん”がすごい - はてなニュース

    こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか?PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeCSS3に対応しているので、グラデーションま

    画像は一切使ってない!?CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
    sihou1
    sihou1 2010/05/06
    すげー! マジッすか・・? これでも俺も明日から職場のヒーローになれるんだね・・?
  • CSSビギナーに気をつけてほしい5つのポイント | コリス

    スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex

    sihou1
    sihou1 2010/03/26
    私もビギナーなので気をつけよう・・・
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    sihou1
    sihou1 2010/02/25
    CSSを利用して、ボタン作成。画像を加工しなくていいから便利だよね。
  • 1