css | Web活メモ帳 https://blog.verygoodtown.com WEB開発者が使える世界の情報を発信します Tue, 24 Feb 2015 14:49:30 +0000 ja hourly 1 https://wordpress.org/?v=5.9.10 122803348 一つのdivタグでアイコンを表示するCSSアイコン101 https://blog.verygoodtown.com/2015/02/one-div-css-icon/ https://blog.verygoodtown.com/2015/02/one-div-css-icon/#respond Wed, 25 Feb 2015 01:00:19 +0000 http://blog.verygoodtown.com/?p=9366 DIV要素1つでCSSアイコンを表示出来るOne divをご紹介。 サイト自体は2012年からあるのですが、改めてCSSアイコンを作る際に参考にさせていただきました。 HTMLがDIVタグ1つなのとCSSが簡単にダウンロ […]

The post 一つのdivタグでアイコンを表示するCSSアイコン101 first appeared on Web活メモ帳.]]> 20150224 01

DIV要素1つでCSSアイコンを表示出来るOne divをご紹介。

サイト自体は2012年からあるのですが、改めてCSSアイコンを作る際に参考にさせていただきました。

HTMLがDIVタグ1つなのとCSSが簡単にダウンロード出来るようになっています。

プログレスバーや矢印など101個のアイコンが使えるようになっています。

興味のある方は下のリンクからどうぞ
One div

The post 一つのdivタグでアイコンを表示するCSSアイコン101 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2015/02/one-div-css-icon/feed/ 0 9366 classを指定するだけでGoogle+風のボタンを実現できるCSS「Google+ Buttons in CSS」 https://blog.verygoodtown.com/2011/08/use-google-plus-to-improve-your-ui/ https://blog.verygoodtown.com/2011/08/use-google-plus-to-improve-your-ui/#respond Thu, 18 Aug 2011 01:00:53 +0000 http://blog.verygoodtown.com/?p=7703 classを指定するだけでGoogle+風のボタンを実現できるCSS。 Google+風のデザインを実現できる24種のボタンが使えますよ。 有名なWebサービスのデザインはUIも非常に凝っているので、参考にできますね。 […]

The post classを指定するだけでGoogle+風のボタンを実現できるCSS「Google+ Buttons in CSS」 first appeared on Web活メモ帳.]]> 20110817 02

classを指定するだけでGoogle+風のボタンを実現できるCSS。

Google+風のデザインを実現できる24種のボタンが使えますよ。

有名なWebサービスのデザインはUIも非常に凝っているので、参考にできますね。

ライセンスはCreative Commons CC-BY。IE6でも動作するようになっているとの事。

詳細&ダウンロードは下のリンクからどうぞ。

The post classを指定するだけでGoogle+風のボタンを実現できるCSS「Google+ Buttons in CSS」 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2011/08/use-google-plus-to-improve-your-ui/feed/ 0 7703 有料だけど超クールな管理画面用テンプレートのまとめ「35 Premium Admin and CMS interface HTML templates」 https://blog.verygoodtown.com/2011/06/35-premium-admin-and-cms-interface-html-templates/ https://blog.verygoodtown.com/2011/06/35-premium-admin-and-cms-interface-html-templates/#respond Thu, 09 Jun 2011 01:07:16 +0000 http://blog.verygoodtown.com/?p=7476 有料だけど超クールでかっこいい管理画面用のテンプレートが「35 Premium Admin and CMS interface HTML templates」というエントリーでまとめられていたのでご紹介。 クライアントへ […]

The post 有料だけど超クールな管理画面用テンプレートのまとめ「35 Premium Admin and CMS interface HTML templates」 first appeared on Web活メモ帳.]]> 有料だけど超クールでかっこいい管理画面用のテンプレートが「35 Premium Admin and CMS interface HTML templates」というエントリーでまとめられていたのでご紹介。

クライアントへのCMS納品時に管理画面のデザイン費用は取れない場合や、
社内の人間しか使わないシステムの場合などなど、
できるだけ手軽に使いやすい画面を構築する際に使えそうです。

ほとんどのテンプレートでJavaScriptが利用されており、
リッチなインターフェイスになっているのが特徴です。

Adminica Professional Admin Template

20110609 01

Terminator admin template with 13 different Admin Backend pages

20110609 02

TurboAdmin Panel

20110609 03

WeAdmin Admin Control Panel

20110609 04

Reality Admin Template

20110609 05

有料とはいえ、ほとんどが1000円〜3000円程度のものでした。
デザインができない、時間を節約したいという方にもおすすめです。

リンク先にはわかりずらいですが、２ページ目もあるので
全部みたいという方はじっくりどうぞ。

The post 有料だけど超クールな管理画面用テンプレートのまとめ「35 Premium Admin and CMS interface HTML templates」 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2011/06/35-premium-admin-and-cms-interface-html-templates/feed/ 0 7476 GIFやJPEG画像をCSS化できるオンラインサービス「Img to CSS」 https://blog.verygoodtown.com/2011/05/imgtocss/ https://blog.verygoodtown.com/2011/05/imgtocss/#respond Mon, 16 May 2011 01:30:34 +0000 http://blog.verygoodtown.com/?p=7203 「Img to CSS」は、写真やロゴなどのGIF・JPG・PNG画像をCSS化できるオンラインサービスです。 CSS化したテキストは、コピーペーストで使用できるようになっています。 以下に使ってみた様子を載せておきます […]

The post GIFやJPEG画像をCSS化できるオンラインサービス「Img to CSS」 first appeared on Web活メモ帳.]]> 20110516 14

「Img to CSS」は、写真やロゴなどのGIF・JPG・PNG画像をCSS化できるオンラインサービスです。

20110516 12

CSS化したテキストは、コピーペーストで使用できるようになっています。

以下に使ってみた様子を載せておきます。

画像を指定

20110516 13

↑サイトにアクセスすると、画像をアップロードフォームから画像をしてする事ができます。
画像はURLからも指定できるようになっています。

20110516-15

↑試しにFirefoxの画像をアップしてみました。
画像は拡大表示していますが、ほぼ忠実に再現されていますね。

大きな画像は対応していないようで、250 x 250px以内でなければいけないようです。

これはすごい。
使ってみたい方は下のリンクからどうぞ。

The post GIFやJPEG画像をCSS化できるオンラインサービス「Img to CSS」 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2011/05/imgtocss/feed/ 0 7203 classを指定するだけでボタンにアイコンを表示してくれる「Mega Web Buttons Pack」 https://blog.verygoodtown.com/2011/04/megawebbuttonspack1/ https://blog.verygoodtown.com/2011/04/megawebbuttonspack1/#respond Mon, 18 Apr 2011 04:30:57 +0000 http://blog.verygoodtown.com/?p=6910 ボタンにアイコンを表示する際に使えそうな「Mega Web Buttons Pack #1」のご紹介。 javascriptとcssをいくつか読み込むだけで、簡単にアイコン付きボタンが作れるようになります。 いくつか使い […]

The post classを指定するだけでボタンにアイコンを表示してくれる「Mega Web Buttons Pack」 first appeared on Web活メモ帳.]]> 20110418 03

ボタンにアイコンを表示する際に使えそうな「Mega Web Buttons Pack #1」のご紹介。
javascriptとcssをいくつか読み込むだけで、簡単にアイコン付きボタンが作れるようになります。

いくつか使い方をご紹介。

サンプル

■ 追加

Add

20110418 04

■ お気に入り

Favourite

20110418 05

■ フォルダ

Folder

20110418 06

■ RSS

RSS

20110418 07

■ 検索

Search

20110418 09

■ ユーザー

Users

20110418 08

何のためのボタンなのか、わかりやすくするのに良いですね。
ダウンロードは下のリンクからどうぞ。

The post classを指定するだけでボタンにアイコンを表示してくれる「Mega Web Buttons Pack」 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2011/04/megawebbuttonspack1/feed/ 0 6910 最近公開されたハイセンスなHTML/CSSテンプレート集 https://blog.verygoodtown.com/2011/04/free-css-templates-2011/ https://blog.verygoodtown.com/2011/04/free-css-templates-2011/#respond Mon, 18 Apr 2011 00:50:11 +0000 http://blog.verygoodtown.com/?p=6863 ハイセンスなHTML/CSSテンプレートを探している。 そんな方におすすめなのが「20 Fresh Free CSS Templates」。 以下のような素敵なテンプレートをまとめてくれています。 個人利用、商用利用がO […]

The post 最近公開されたハイセンスなHTML/CSSテンプレート集 first appeared on Web活メモ帳.]]> ハイセンスなHTML/CSSテンプレートを探している。
そんな方におすすめなのが「20 Fresh Free CSS Templates」。

以下のような素敵なテンプレートをまとめてくれています。

20110416-01
20110416-02
20110416-03
20110416-04
20110416-05
20110416-06
20110416-07

個人利用、商用利用がOKなものがほとんどになっています。
使ってみたい方は下のリンクからどうぞ。

The post 最近公開されたハイセンスなHTML/CSSテンプレート集 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2011/04/free-css-templates-2011/feed/ 0 6863 classを指定するだけでGitHub風のボタンが作れる「CSS3 Buttons 」 https://blog.verygoodtown.com/2011/03/css3-buttons-simple-framework-for-creating-github-style-css3-buttons/ https://blog.verygoodtown.com/2011/03/css3-buttons-simple-framework-for-creating-github-style-css3-buttons/#respond Fri, 04 Mar 2011 06:51:06 +0000 http://blog.verygoodtown.com/?p=6633 ちょっとしたボタンに使えそうなCSSフレームワークだったので、ご紹介。 cssを読み込んでclass指定するだけでGitHub風のボタンが作れちゃいます。 以下に使い方を簡単にご紹介。 四角いボタン aタグにclass= […]

The post classを指定するだけでGitHub風のボタンが作れる「CSS3 Buttons 」 first appeared on Web活メモ帳.]]> 201100304-10

ちょっとしたボタンに使えそうなCSSフレームワークだったので、ご紹介。
cssを読み込んでclass指定するだけでGitHub風のボタンが作れちゃいます。

以下に使い方を簡単にご紹介。

四角いボタン

aタグにclass=”button”を追加します。

リンク

20110304-11

角丸のボタン

class=”pill button”を追加します。

角丸リンク

20110304-12

エラー系ボタン

class=”negative button”を追加

リンク

20110203-13

個人利用および商業利用も可能との事です。ダウンロードは下のリンクからどうぞ。

The post classを指定するだけでGitHub風のボタンが作れる「CSS3 Buttons 」 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2011/03/css3-buttons-simple-framework-for-creating-github-style-css3-buttons/feed/ 0 6633 もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 https://blog.verygoodtown.com/2011/01/user-agent-specific-css-classes-with-cssuseragent/ https://blog.verygoodtown.com/2011/01/user-agent-specific-css-classes-with-cssuseragent/#comments Wed, 05 Jan 2011 02:29:20 +0000 http://blog.verygoodtown.com/?p=5866 CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでよ […]

The post もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 first appeared on Web活メモ帳.]]> 20110104-03

CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。
CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。

詳しくは以下

設定方法はJavaScriptを一つ読み込むだけになります。

<script src="cssua.min.js" type="text/javascript"></script>

このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。

例えばですが、IE6でアクセスした場合には
ua-ie-6というclass名が追加されるようになります。

<html class="ua-ie-6">
<head>…</head>
<body>…</body>
</html>

iPhoneの場合はua-mobile-iphoneというclassが追加されます。

<html class="ua-mobile-iphone">…<html>

ブラウザ毎に異なるclassが追加されるので、CSSを作る際にブラウザ名を指定しておけば、
該当するブラウザでアクセスした場合にのみ適用されるようになります。

以下はPNG画像の処理をIE6以下と、それ以外で分ける場合のコードです。

/* 通常のCSS */
.logo-area
{
background-image: url(logo.png);
background-repeat: no-repeat;
background-position: left top;
}

/* IE 5.0, 5.5, 6.0の場合 */
.ua-ie-5 .logo-area,
.ua-ie-6 .logo-area
{
background-image: url(logo.gif);
}

ブラウザ毎の差を簡単に設定できますね。
興味のある方は以下のリンクからダウンロードしてみてください。

The post もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2011/01/user-agent-specific-css-classes-with-cssuseragent/feed/ 1 5866 リセットCSSを比較できるWebサービス{ CSS:resetr } https://blog.verygoodtown.com/2010/12/cssresetr/ https://blog.verygoodtown.com/2010/12/cssresetr/#respond Fri, 17 Dec 2010 00:10:10 +0000 http://blog.verygoodtown.com/?p=5585 各ブラウザのスタイルシートを初期化するために使われるリセットCSSを比較できるWebサービス「{ CSS:resetr }」をご紹介。 YUI、Vanilla Resetなど人気のリセットCSSをプルダウンで選択し、使用 […]

The post リセットCSSを比較できるWebサービス{ CSS:resetr } first appeared on Web活メモ帳.]]> 20101216-06

各ブラウザのスタイルシートを初期化するために使われるリセットCSSを比較できるWebサービス「{ CSS:resetr }」をご紹介。

YUI、Vanilla Resetなど人気のリセットCSSをプルダウンで選択し、使用したいHTML構造を選択するだけで簡単に比較できるようになっています。

使ってみた様子

サイトでは見出しやリスト構造、テーブルなどの比較ができるようになっています。
今回はフォーム要素で比較してみました。

■ Yahoo! Reset 2の場合

20101216-03

■ HTML5 Dr. Resetの場合

20101216-04

■ Vanilla Resetの場合

20101216-05

それぞれに特徴がありますね。
各ブラウザのスタイルの違いを見るのに覚えておいても良いかもしれません。

The post リセットCSSを比較できるWebサービス{ CSS:resetr } first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2010/12/cssresetr/feed/ 0 5585 タイポグラフィに特化したCSSフレームワーク「Atatonic」 https://blog.verygoodtown.com/2010/08/typography-css-framework-atatonic/ https://blog.verygoodtown.com/2010/08/typography-css-framework-atatonic/#respond Fri, 13 Aug 2010 00:36:15 +0000 http://blog.verygoodtown.com/?p=4732 「Atatonic」はタイポグラフィに特化したCSSフレームワークです。 グリッド配置に重点を置いているため、背景画像に経線が使われていたりします。 デモ 英文用のため、文字サイズが小さめに設定されていますがカスタマイズ […]

The post タイポグラフィに特化したCSSフレームワーク「Atatonic」 first appeared on Web活メモ帳.]]> 20100808-13

「Atatonic」はタイポグラフィに特化したCSSフレームワークです。
グリッド配置に重点を置いているため、背景画像に経線が使われていたりします。

20100808-14

デモ

英文用のため、文字サイズが小さめに設定されていますがカスタマイズしても使えそうですね。

The post タイポグラフィに特化したCSSフレームワーク「Atatonic」 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2010/08/typography-css-framework-atatonic/feed/ 0 4732