Today: Yesterday: Total: Online:
カテゴリー
その他
  • RSS1.0
  • RSS2.0
  • atom0.3
  • valid XHTML1.0
  • valid CSS2
  • Credit
RSSリーダーで購読する | この日記のはてなブックマーク数 | プロフィール
コメントが一番多い記事(233コメント):人の心理の裏をかくホームページ集客術:リピータになってもらうためには
ツイートが一番多い記事(94ツイート):ちょっと待て!twitterやfacebookに子供の写真を掲載する親達への警告
いいねが一番多い記事(574いいね):facebookスパムに要注意。なりすましの見分け方とアカウント乗っ取りの手口(2013年度版)

[ カテゴリー » スタイルシート ]

カテゴリー » スタイルシート September 01, 2016

CSSサンプル集 ID:1472726673


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

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

カテゴリー » スタイルシート March 26, 2014

Webデザイン初心者でもかっこいいデザインが作れる Bootstrap ID:1395799538


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 July 12, 2013

CSS3のアニメーション ID:1373589916


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

demo1〜demo3まで3つサンプル有り
プログラムの説明は
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アニメーション その1
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)

カテゴリー » スタイルシート » CSS3 February 08, 2012

CSSを使ってHTTPリクエストを減らす CSS Sprite(スプライト) ID:1328680575


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

これをCSS Spriteと言う。

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

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

カテゴリー » スタイルシート » CSS3 February 07, 2012

スマホデザインでCSS3のよく使うもの ID:1328604900


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

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

カテゴリー » スタイルシート February 07, 2012

ベンダープレフィックスとは ID:1328602530


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

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

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

カテゴリー » スタイルシート December 08, 2010

スタイルシート カーソル 変更 ID:1291794979


上 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

カテゴリー » スタイルシート November 08, 2010

スタイルシート:リンクをボタンのように見せる ID:1289180718


.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

カテゴリー » スタイルシート November 08, 2010

スタイルシートでタブ作成 ID:1289180281


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

— posted by midilin @ 10:38AM

カテゴリー » スタイルシート November 08, 2010

スタイルシートでツールチップ ID:1289175606


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

— posted by midilin @ 09:20AM


カウンター