2013-05-01から1ヶ月間の記事一覧
Forms 「thead」「tbody」の記述が必須 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <table> <thead> <tr><th>曜日</th><th>訪問者数</th></tr> </thead> <tbody> <tr><td>月</td><td>3100<…</td></tr></tbody></table></body></html>
参考サイト ゼロから始めるレスポンシブWebデザイン入門 (ASCII.jp) 「可変グリッドレイアウト」機能の使い方 (Adobe Developer) Adobe HTML5 特設サイト Responsive Design with Mockups 実例 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサ…
Fluid Image Fluid Imageとは、ウィンドウサイズに合わせて画像サイズも可変させる手法 Fluid Imageのデモ ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Fulid Image</title> <link rel="stylesheet" href="css/style130.css"> </link></meta></meta></head></html>
Twitter Bootstrap Twitter社が作った、CSSフレームワーク iQueryに依存している Twitter Bootstrap Twitter Bootstrapの使い方 Twitter Bootstrapの使い方 Twitter Bootstrapを導入 解凍したファイルを管理フォルダーに入れる 新規ドキュメント作成 「index…
grid system 12個のコラムで、幅940pxの container を構成する レイアウトの記述 「class="row"」で「行」を、「class="span4"」でカラム数を指定する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> </body></html>
ゼロから始めるレスポンシブWebデザイン入門 ASCII.jp 日本のスマホサイトは2年間でこんなに変わったWebサイトのRetina対応は必要か？ 流行期を過ぎたレスポンシブ・Webデザインのこれから レスポンシブWebデザインのメリット、デメリット比較まとめ 一個覚…
レスポンシブ主要レイアウトパターン プロトタイプを作る 可変レイアウト 可変レイアウトによるレスポンシブWebデザイン 最も利用頻度の高いレイアウトパターン Sサイズ 599px以下 Mサイズ 600px〜979px Lサイズ 980px以上 固定レイアウト 各画面サイズで固…
メディアクエリとスタイルシート 横幅をいくつかの範囲にわけてデザインを切り替える 「CSS3メディアクエリ」を利用する 特定の画面サイズで表示したときに適用するスタイルシート <link rel="stylesheet" href="スタイルシート名.css media="only メディアタイプ and (特性)" > 外部スタイルシートを読み込む<link rel="stylesheet" href="外部スタイルシート名.css media="only メディアタイプ and (特性)" > CSS内に設定を記述@media only メディアタイ</link></link>…
デザインのベースとなるスタイル 【 例 】 style-s.css：599px以下 style-m.css：600px〜979px style-l.css：980px以上 【 書式 】 《sample.html》 スマートフォンの場合は、自動的に「style-s.css」が選択される <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>メディアクエリ</title> </meta></meta></head></html>
レスポンシブWebデザイン 多様なデバイスに対応するためのWebページ制作 iPhone、iPadはもちろんAndroidを搭載したスマートフォンやタブレットへも対応することが必要 「レスポンシブWebデザイン」と呼ばれるテクニックを利用する タイ国政府観光庁 タイ国政…
ibbdemo3 iPhone, iPad の表示を PC 上で行うエミュレータ プラグインのダウンロード ibbdemo3 ibbdemo3の使い方 Demo3 – iPhone, iPad の表示を PC 上で行うエミュレータ 確認したいURLを記入 キーボード/マウスでの各種操作 iPad 表示に切り替え キーボー…
iPad 2のシミュレーター PCやMacのブラウザ上で動作するiPad 2のシミュレーターが公開 iPad 2のシミュレーター 参考サイト iPad 2のシミュレーターはスゴイ！ | モバイル林檎ニュース | iPhone/iPad/Mac 表示方法 右にスライドでスタート safariを選択 URLの…
Google web fonts 商用・非商用を問わず無料で利用できるWebフォント 使いたいフォントを選択する CSSを追加する スタイルシートにてfont-familyを適用する Google web fonts Google web fonts使い方 今さらながらWebフォント「Google web fonts」の使い方・…
IEにも対応！10分でできるWebフォント実装法 Webフォントは、クライアントにインストールされていないフォントをWebページで自由に使えるようにする技術 フォントをダウンロードする フォントを読み込む（Firefox/Safari/Opera編） EOTファイルを作る IEにフ…
擬似クラス a要素を対象とする :link、:visited、:hover、:active の4つ :link と :visited はa要素のみに使用できる擬似クラス ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>擬似クラス</title> <style> a:link { color: green; } a:visited { color: gray; } a:ho…</meta></meta></head></html>
CSS3アニメーション CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツール 【CSS】コ…
マーキー 左右や上下にスクロールする文字や画像を表示する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>角度を変更した要素のマーキー</title> <link rel="stylesheet" href="css/style100.css" media="only screen and (max-width:480px)"> <…</link></meta></meta></head></html>
水平移動（連続移動背景） 画像の横幅が移動するために要する時間を設定する/li> ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>無限背景</title> <script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></meta></meta></head></html>
CSS3用リセット 《reset.css》 ソースコード【 CSS 】 @charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, …
CSS3でデザイン CSS3を使いデザインする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>森の工房についてGreen Leaf</title> <link rel="stylesheet" href="css/style72.css" media="all"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> </link></meta></head></html>
解説 nav要素 nav要素はページ上のナビゲーションを表す サイトマップページのサイト内リンクは、サイトマップページ上ではメインコンテンツなので、nav要素を用いるのは不適切になる 参考 section要素 section 要素はページ上のセクションを表し、セクショ…
CSS Selectors CSS Selectors CSS Selectors 意外と知らない!?CSSセレクタ20個のおさらい 属性セレクタ class属性やid属性も含め、属性の値を使うセレクタ ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>属性セレクタ</title> <style> [class] { color: hotpink; } </style> <…</meta></meta></head></html>
透過を保ちつつPNGを高圧縮する .pngファイルを圧縮しデーターを軽くする .pngを使う場合圧縮をかけるようにする Web画像の書き出し JPEG「最高画質 100」は再現できないので、通常「高画質 80」 JPEGは透過できない 透過GIF(マット指定は必須) PNG24(透過)…
CSS Framework デザインが苦手でもそれっぽいウェブサイトを作ることが出来る Object-oriented CSS Object-Oriented CSS Object-oriented CSS 参考サイト OOCSS（オブジェクト指向CSS）のススメ STUDY OOCSS OOCSS(Object-Oriented CSS)の考え方 Bootstrap S…
オンラインジェネレーター – UI Live Tools WEB2.0なサイトのデザインを作る際にかなり使えるブラウザツール集がまとまっていました。 WEBデザインに便利なオンラインジェネレーター＆ツール集 Ui Parade - Live Tools Ui Parade - Live Tools Live Tools - …
枠の内側に影をつける 枠を立体的なデザインにする ２つ目の影を追加する 枠の内側に影をつける 枠内のすべての辺に影をつける ソースコード【 CSS 】 article section { clear: both; border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px 18px 1…
背景画像を表示する ソースコード【 CSS 】 #container { width: 900px; margin: 0 auto; background-color: #fff; padding: 0 40px; -webkit-box-shadow: 0 0 30px #bbb; box-shadow: 0 0 30px #bbb; background-image: url(images/circle.png); } 背景画像…
背景と区切り線の色を半透明にする 背景色を半透明にする RGB（赤, 緑, 青）で色指定：rgb(1, 122, 205) 不透明度（alpha）：a(0.3) ソースコード【 CSS 】 nav ul li a:hover { background-color: rgba(1, 122, 205, 0.3); } 区切り線の色をRGBで指定し半透…
サイト名をリボン状に表示する フッターを罫線で区切って表示する ソースコード【 CSS 】 footer { clear: both; color: #888; margin: 25px 0 0 0; padding: 8px 0 8px 0; border-top: solid 1px #aaa; } small { font-size: 0.75em; font-style: normal; t…
機能別にまとめたCSS3ジェネレーター28選 簡単にCSS3を適用できるジェネレーターを機能別にまとめサイト ウェブ学のすすめ 多機能型 CSS3プロパティジェネレーター CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator CSS3 GENERATOR CS…
