授業
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…
ページ全体のデザイン article、microdataを記述した例 角丸とグラデーションの編集前の設定 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>森の工房についてGreen Leaf</title> <link rel="stylesheet" href="css/style56_2.css" media="all"> </link></meta></head></html>
CSS3でナビゲーションバーを角丸にする 角を丸くする ソースコード【 CSS 】 nav ul { font-size: 0.75em; margin: 0 0 10px 0; height: 30px; background-color: #005087; border-radius: 6px; } 角丸が全体に反映されない原因のリンクの背景色を削除する …
枠に影をつける 「box-shadow」プロパティ ソースコード【 CSS 】 article header { border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px; border-radius: 10px; box-shadow: 10px 10px #ccc; } 影をぼかす ぼかしの大きさ「5px」 ソースコード【…
グリッドレイアウト 本家サイトは、右側 左側は、ユニットを「float: left」で設計すれば囲みは必要なくなる 右側は、縦１列を「section」として考えれば左側と同じように進めることが可能 4つの写真の番号は、左上→右上→左下→右下の順という本家の流れを踏…
ColorSchemer 任意の1色を指定するだけで、相性の良い似たトーンや色合いの15色を表示してくれるジェネレーター 使い方 Color Schemer Online - ジェネレーターブックマーク 〜Generator Bookmark〜 PAGE TOP
☆★データーでの確認★☆ページ全体のデザイン article、microdataを記述した例 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Green Leaf</title> <link rel="stylesheet" href="css/style.css" media="all"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></link></meta></head></html>
☆★データーでの確認★☆グリッドレイアウト 練習として使わせていただきました。meta要素（キーワード・詳細）は入れない。 【 本家 】 楽しいおかず by鎌倉bowls Webデザインの原則「整列」「グリッドレイアウト」 グリッドレイアウトとは、一つ一つの要素や…
企業サイト 素材は、テキストデータ（または独自データ）を利用する ナビゲーションは、作成する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル スタイルシート カンパニー</title> <link rel="stylesheet" href="css/style3.css" media="screen,print"> </head> <body> <div id="container"> <h1 id="logo"></h1></div></body></html>
HTML5, きちんと。 HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。 HTML5, きちんと 論理構造を意識したアウトライン 見出しでつくる構造の限界（divでの階層構造は、理論構造にはならない） Sections may contain…
HTML5―新しい要素 Time要素 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>その他の新しい要素</title> <link rel="stylesheet" href=""> <script src=""></script> </link></meta></head></html>
HTML5―新しい要素 figure要素、figcaption要素 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>その他の新しい要素</title> <link rel="stylesheet" href=""> <script src=""></script> …</link></meta></head></html>
floatを使ったレイアウト header部の画像を準備 条件コメントを設定 CSSにコメントアウトを記述 条件コメント（Conditional Comments） IEによって解釈されるHTMLソースコード中にある条件付きのステートメント IE6以下のバージョンに適用するCSSを読み込む …
バリエーション ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Sample</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"> </link></meta></meta></head></html>
