少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ
http://nelog.jp/wordpress-h1-h6

— posted by midilin @ 07:44PM | Comment (0)

CSSの「フレームワーク」　Bootstrap


HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - ＠IT
http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html


かっこいいボタンやタブなど、簡単にデザインできる。
またレスポンシブデザイン対応。


http://getbootstrap.com/
からダウンロードできる。

— posted by midilin @ 11:05AM | Comment (0)

・CSS3を使ってイントロアニメーションを作る
http://tympanus.net/Tutorials/SplashComingSoonPageEffects/index.html

demo1〜demo3まで３つサンプル有り
プログラムの説明は
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css/css3-animation-intro/）


・CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet
http://coliss.com/articles/build-websites/operation/css/css3-animation-cheat-sheet.html

・文字の移動
https://developer.mozilla.org/samples/cssref/animations/cssanim1.html


・10分で作れる！初心者でも簡単にできるCSS3アニメーション　その１
http://oreweb-e.hatenablog.com/entry/2013/02/04/10%E5%88%86%E3%81%A7%E4%BD%9C%E3%82%8C%E3%82%8B%EF%BC%81%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A7%E3%82%82%E7%B0%A1%E5%8D%98%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8BCSS3%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC
回転とかある。

・フェイドイン
http://builder.japan.zdnet.com/story_media/20406086/fadein01.html

・フェイドイン・フェイドアウト
http://blog.oukasoft.com/htmlcss/%E3%80%90css3%E3%80%91css3%E3%81%A7%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3%E3%80%81%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E8%A1%A8%E7%8F%BE%E3%81%97/

— posted by midilin @ 09:45AM | Comment (0)

スマホサイト作成時に、HTTPリクエストを減らすため、
必要な画像をひとつの背景画像にまとめ、
1つの画像で読み込み、
CSSで見える部分を制御する（部分表示する）方法がある。

これをCSS Spriteと言う。

背景画像のバリエーションや、ボタンなどを背景画像として
全画像を１つの画像で作成して表示することができる。

— posted by midilin @ 02:56PM | Comment (0)

・border-radius：丸角
・box-shadow、text-shadow：影つけ。box-shadowはinsertを使用することで内側にも影がつけられる（へこんでいるように見える）
・Gradients：グラデーション
・transform：図形を変形させる。（回転や歪ませるなど）
・transition、animation：アニメーション。
・transitionはシンプルな一定の変化のないアニメーション。
・animationはFlashでいうところのシェイプのようなもので、キーフレームという概念を持つ。

— posted by midilin @ 05:55PM | Comment (0)

各ブラウザの未完成段階の機能の
CSSプロパティや値を実装する場合、
他のブラウザは対象外のものがあるので
それぞれのブラウザで独自のプロパティを実装する必要がある。

このプロパティ実装の接頭辞ベンダープレフィックスと言う

— posted by midilin @ 05:15PM | Comment (0)

上　n-resize
下　s-resize
右　e-resize
左　w-resize
右上　ne-resize
右下　se-resize
左上　nw-resize
左下　sw-resize
十字　crosshair
移動　move
ヘルプ　help
砂時計　wait
ポインタ　pointer
デフォルト　default

例
<SPAN style=cursor:pointer;>ここに文字</SPAN>

http://zumirin.cool.ne.jp/kowaza/cursor.htm

— posted by midilin @ 04:56PM

.on {
background-color:#339911;
width:180px;
height:35px;

text-align:center;
font-weight:bold;
font-size:12pt;
border:inset #009900 4px;/*　枠線の内側がへっ込んで見えるデザイン　中より濃い色を使う*/
}

.off {
background-color:#99FF88;
width:180px;
height:35px;

text-align:center;
border:outset #CCFFAA 4px;/*　枠線の内側が出っ張って見えるデザイン　中より薄い色を使う*/
}

— posted by midilin @ 10:45AM

http://www.1uphp.com/con2/menu/tab11.html

— posted by midilin @ 10:38AM

hoverを使う方法
http://coliss.com/articles/build-websites/operation/css/1040.html
http://css-eblog.com/csstechnique/post-14.html

— posted by midilin @ 09:20AM