タグ

CSSとdesignに関するlockcoleのブックマーク (78)

  • Gmail 2 Skin - Fe mails

    Style with custom themes! Change the background, color, schemes, fonts, and more! Share your own themes too!

    Gmail 2 Skin - Fe mails
    lockcole
    lockcole 2007/11/16
    Gmail 2を女性っぽくかわいらしいピンク地のデザインに変更するユーザスタイル。
  • 50 More Beautiful Blogger Templates

    Palin is a marketing communications and social media consultant, based out of New Delhi (India), and has handled campaigns of clients across verticals ranging from IT and telecom to automobiles to government bodies. Besides reviewing online tools for Mashable, he also writes for India PR Blog (http://www.indiaprblog.com), which he started in 2006, on trends and issues in the marketing/ PR space. H

    50 More Beautiful Blogger Templates
    lockcole
    lockcole 2007/10/07
    Blogger用のきれいなデザインテンプレート集。
  • 2カラムサンプル13種

    2カラムのサンプルを色々作ってみました。 事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。 IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | P O P * P O P http://www.popxpop.com/archives/2007/04/ie7csscss_layouts.html で、まぁ日語のサイトがあんまり無いっていうのと、どーにもこーにも使い勝手が悪い気がしてならないので、自分が使いやすいだろう2カラムのサンプルを作ったという訳です。 細かく作っていけば限りなく出来

    2カラムサンプル13種
    lockcole
    lockcole 2007/07/10
    2カラムレイアウトのCSSサンプル集。XHTML 1.0 Strict,UTF-8,XML宣言なし。ありがたい。
  • http://zymic.com/index.php

    lockcole
    lockcole 2007/07/06
    無料のWebデザインテンプレートが手に入るサイト。
  • 有料ソフトとデザイン作業を無力化させる30のブックマークまとめ*ホームページを作る人のネタ帳

    今回はデザインという分野の作業を極力省く為のジェネレータを多く収録。 有料のソフト等と同様の力を持つオープンソースのフリーソフトもプラスしてあります。 WEB制作環境 aptana 優れたWEBページの作成支援ソフトであるDreamweaverと同等の機能を持つオープンソースアプリケーション。 レビュー記事はGIGAGINEで CSSVista CSSVistaというフリーソフト。 InternetExplorerとfirefoxの両方のCSSを同時にチェックできるツール。 画像作成・編集(インストール型) GIMP 言わずと知れたオープンソースの画像編集ソフト。 非常に高機能。多言語対応で、日語に対応済み。 日語がきちんと表現されていないという不満から、日語ローカライズパッチを配布しているサイトもある。 ・GIMP日語ローカライズ さらにフォトショップと同じ名称に直すパッチもある

    有料ソフトとデザイン作業を無力化させる30のブックマークまとめ*ホームページを作る人のネタ帳
    lockcole
    lockcole 2007/07/01
    Aptana, CSSVista,GIMP,Picnik,その他色々,テーマは「有料ソフトの置換」と「スクラッチデザインの必要性をなくす」こと。ジェネレータ系が粒ぞろいな感触。
  • AdSense広告をCSSでWeb2.0風にするテンプレート29種類 - GoogleMania | グーグルの便利な使い方

    AdSense広告をCSSでWeb2.0風にするテンプレート29種類 管理人 @ 6月 26日 04:20pm AdSense Web 2.0 Magazine: 29 Different Google Ads Styleにて、AdSenseのテキスト広告をCSSでWeb2.0風にするテンプレートが、29種類も公開紹介されています。 これまで、背景に馴染ませるしかなかったテキスト広告が、立派なサイトのデザインの一部になります。 どうやって、デザインを変えるかというと、AdSenseのコードを変更するのは違反ですので、CSSを使ってその周りの背景に手を加えます。 利用方法 次のテンプレート一覧ページで好みのテンプレートを選びます。 Web 2.0 Magazine: 29 Different Google Ads Style 「View Code」リンクをクリックすると、それぞれのテンプレー

    lockcole
    lockcole 2007/06/30
    AdSenseのコードを改造するのは規約違反なので,CSSを使ってデザイン変更。いろいろあって楽しいけど,デザインを変更することには変わりないから,Googleがこれを許容するかどうかが問題になりそう。
  • http://youmos.com/news/css_step_menu

    lockcole
    lockcole 2007/06/30
    li要素を横ナビゲーションバーと同じように並列に配置してclass指定で色を分ける。5ステップも必要な入力フォームはECサイトぐらいじゃないとお目にかかれないけど,参考までに。
  • Webデザイン・Webデザイナーのまとめサイト | Webデザインに優れたサイトのリンク集 ≪デザインリンクデータベース≫

    ~10程度っすよ ~50程度かな ~100くらい ~300程度です ~500はこなす ~1000はやってます これ以上 ( ! )

    lockcole
    lockcole 2007/06/23
    Webデザインに優れたサイトがたくさん登録されている,リンク集。色別,コンテンツ別,テイスト別にカテゴライズされている。わかりやすいね。
  • CSS Galleries: Free Web Designs for Download

    A visually appealing website design will not result in lots of recurring visitors if you don't have good content. In contrast bad, old-fashioned, or boring designs may well be accepted by a loyal readership if you have good content. To have both good content and a good design is invaluable. People who want to publish on the web do not need any knowledge of HTML, CSS and the like to get a site up a

    lockcole
    lockcole 2007/06/17
    無料で使えるCSSデザイン配布のサイトのまとめ。似た名前が多いから,時々迷うことがあった。ここは助かる。
  • CSS:ボックスのおはなし

    この資料についての説明と謝罪 この資料は公開時より24時間内において他サイトの内容を無断で使用しておりました。 これに関して、kzは以下のエントリにおいて説明及び謝罪をしております。 社内勉強会の資料についての説明及び謝罪

    lockcole
    lockcole 2007/06/17
    いろいろなCSSのボックスについて。行ブロック,包含ブロック,そのほか。プレゼン資料。
  • サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ:phpspot開発日誌

    サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ 2007年06月04日- chris erwin dot com - CRIR: Checkbox Radio Input Replacement This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ。 ライブラリを使うことで、次のようなフォームを実現することが出来ます。 必要なCSSとライブラリを読み込んで、input に class をあてるぐらいの簡単な方法でフォームの変更が可能です。 CSSデザインなので画像を変更で自分好みのフォ

    lockcole
    lockcole 2007/06/08
    Javascriptで動的にフォームアイテムのデザインを変更するライブラリ。
  • マージンの相殺について:CSS | Tech de Go

    漬物は料理において重要なアクセントを提供します。 その酸味が、事の味わいを引き締め、新たな深みを加える役割を果たします。 例えば、酢漬けの漬物は、独特の酸味と爽やかさで料理全体を軽やかにし、油っぽさを中和します。 これにより、べ手の口の中をさっぱりとさせるだけでなく、欲を増進させる効果も期待できます。 また、塩漬けの漬物もまた重要です。 塩の効果で野菜から水分を抜き、旨味を凝縮させることで、料理に深いコクと風味を加えます。 この塩味は料理全体のバランスを整え、事を豊かにしてくれます。 漬物の酸味が生む料理のアクセントは、料理の種類や季節によっても異なります。 夏にはさっぱりとした酢漬けの漬物が、冬には塩漬けの漬物が特に重宝されます。 季節感や地域の材と漬物の組み合わせを工夫することで、料理の魅力がさらに引き立ちます。 漬物は単なる付け合わせではなく、事の一部としてその重要性を増

    lockcole
    lockcole 2007/06/06
    垂直方向のmarginについて。相殺される条件とそうでない条件,内包ボックスのマージン指定の注意点。
  • フッターが素晴らしい19サイトを参考に足もとを見直そう | Web担当者Forum

    通常、フッターには基的なナビゲーションを繰り返して用い、著作権情報やプライバシーポリシーなど「細字部分」にあたるものが書き込まれる。また、標準に基づいたデザインの人気が高まり、フッターにXHTMLCSSへの準拠を示すバッジが置かれるようになった。 新しいクライアントのために、フッターが完全に不足しているサイトを再デザインしながら、僕がデザインをまとめるとフッターがやる気のない付け足しになってしまうのはどういう具合なんだろうと思った。僕のフッターはたいてい内容が乏しく、デザインも大好評とはいかない。これまでに作った最も内容豊かなフッターはおそらく、ミニサイズのサイトマップとコンタクト情報がちょっとばかり入った、Avatar Financialのものだろう。 こうして僕は興味をもった。ほかのウェブデザイナーはフッターを何に使っているんだろうか?ウェブを回って集めた、フッターが目を引く19サ

    フッターが素晴らしい19サイトを参考に足もとを見直そう | Web担当者Forum
    lockcole
    lockcole 2007/04/30
    フッターの設計が素晴らしいサイトを選出。
  • 黄金比をサイトのデザインに取り入れる簡単な3つの方法 | コリス

    その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、1つの値

    lockcole
    lockcole 2007/03/31
    マージンの比率も黄金比。お見事。
  • Faux Column CSS Layouts - Code-Sucks.com

    We're working hard to finish the development of this site. Stay tuned for updates!

    lockcole
    lockcole 2007/03/27
    CSSレイアウト集。シンプル。
  • willmayo.com » CSS Speech Bubbles

    Account Suspended This Account has been suspended. Contact your hosting provider for more information.

    lockcole
    lockcole 2007/03/18
    コメントを吹き出し表示するライブラリ。もちろん角丸。3種類のパターンがある。
  • 固定幅ベースの elastic レイアウトサンプル

    elastic レイアウトと言っても、固定幅ベースか可変幅ベース(とは言っても min、max-width による半固定だけど)のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px(640×480向け)、780px(800×600向け)、960px(1024×768向け)の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比

    lockcole
    lockcole 2007/03/17
    Elasticレイアウトの固定幅サンプル。3パターン。「600px(640×480向け)、780px(800×600向け)、960px(1024×768向け)」
  • フッターとかの区切り『|』のサンプル4種|CSS HappyLife

    フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home|アバウト|イラスト|BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。(サンプルに寄ってid名とか変わりますが) <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home| About| Gallery| Blog 普通にhtmlに|を記述しているのでソースは当然下記のように。 <ul id="samp

    フッターとかの区切り『|』のサンプル4種|CSS HappyLife
    lockcole
    lockcole 2007/02/24
    フッターの区切り方に関するTips。昔は|を手書きで挟んでたなぁ・・。画像を使って区切るのも意外とかっこいい。隣接セレクタを用いた方法が新しめ。
  • *{ margin : 0 } はもう古い!? | Emotional Web

    This domain may be for sale!

    lockcole
    lockcole 2007/02/22
    何もかも設定を上書きしてしまうユニバーサルセレクタを使うことのデメリット(高負荷で重い,不必要な上書き)を認識し,よりスマートな方法を採用しましょうっていう話。YUIライブラリを使ったり。
  • class名に「sidebar」が何故ダメなのか - つれづれ

    d:id:iwaim:20060707:1152240513 を書いたついでに。 div要素のclass名を「sidebar」として、CSSでレイアウトを右横か左横に持ってきているサイトも多いですが、あれってどうなんですかね? 私には赤くしたい部分に「red」と付けたり、10ptにしたい部分に「size10pt」と付けたりするのと同等だとしか思えないんですが。クラス名に特定の見た目を意識する名前を付ける是非というやつですね。みんな、もっと考えて名前付けようよ。 まあ、赤くしたい部分に「red」と付ける人なら使ってもいいと思うけど。 ちなみに、「header」や「footer」にも同様の違和感を感じます。

    class名に「sidebar」が何故ダメなのか - つれづれ
    lockcole
    lockcole 2007/01/25
    命名記法がレイアウトに準じたものであることに対する違和感。Header, Footerは文書構造としてあるけども,Sidebarはちょっと違うなと。うーむ,本質的にはそうなんだけど,今のCSSレイアウト方法ではやむを得ない面も??