logoMemo クラウド環境でのメモ帳
「青春ぶらり旅」作成時に書いた"Style 画面設計"をここに転記する。
Webスタイルの基本要素をデザインするためのメモです。w3schoolsが分かりやすい。CSS/JS標準テンプレートとしてBootstrapが良い。

CSS3 テスト

Ruby

秋山の 黄葉(もみじ)を茂み 迷いぬる (いも)を求めむ 山道(やまじ)知らずも(巻二-二〇八)

Transition

Chrome, Opera, Safariはブラウザープレフィックスを書けば機能する。Firefoxはtimingが効かない。IE9は未サポート。
transition:color 3s, background-color 3s linear 0, width 3s ease 0, height 1s;

Box-shadow

box-shadow:2px 2px 2px rgba(0,0,0,0.2);

CSSを使った画像の入れ替え

マウスを重ねると画像が変わる。
<style>
#mover:hover { background:url(/test/thumb/002.jpg) no-repeat;}
#mover:hover img { visibility:hidden; }
</style>
<div id="mover"><img src="/test/thumb/001.jpg" /></div>
sample HTML

ブログのスタイル

<link rel="icon" href="/img/banner/burariIcon.png" type="image/png">

code { background-color:#E5F3C8; border:solid 1px #D3EAA4; }
#E5F3C8(229,243,200) #D3EAA4(211,234,164)

画面サイズ

  • Wide 12:5(2.4) 1920x 800 960x400 640x267 480x200 360x150 240x100 180x 75 120x50 96x40
  • HD 16:9(1.77778) 1920x1080 960x540 720x405 640x360 480x270 320x180 240x135 160x90 80x45
  • NTSC 15:10(1.5) 1920x1280 960x640 720x480 640x427 480x320 360x240 180x120 120x80 90x60
  • Display4:3(1.33) 1920x1440 960x720 800x600 640x480 480x360 320x240 160x120 120x90 80x60

映画スクリーン縦横比率

  • Ultra Panavision 2.76 (1957-1966) Ben-Hur(1959)
  • Super Panavision 2.20 (1959-1983) Walt Disney "The Big Fisherman"
  • Cinerama 2.65/2.76/2.88/3.0

デジカメ

  • JVC 3648x2056 1920x1082
  • HTC 3264x1952 2592x1552
  • 携帯 1920x1080
.photolist img { margin:0 3px 6px 5px; box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);border-radius:3px;}
.shadow { margin:0 10px 10px 0px; box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);border-radius:3px;}
.w90 img { width:90px;height:60px; }
<div class="photolist w90">
001 002 003 004 005

スタイル学習サイト

Scripts BACK | HOME | ARCHIVE Flowplayer