floatを使ったレイアウト実践

floatプロパティを使ったレイアウトサンプルサイト：Layout Gala <html lang="ja"> <head> <meta charset="UTF-8"> <title>floatを使ったレイアウト</title> <style> ここにCSSを記述 </style> </head> <body> <div id="container"> <div id="header">#header</div> <div id="nav">#nav</div> <div id="wrapper"> <div id="content">#content</div></div></div></body></html>

2015-03-30

floatを使ったレイアウト基礎

CSSレイアウトテキストP.092〜095 基本は、floatを使ったレイアウト floatプロパティを使ったレイアウト通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になります floatは浮き上がっている状態 floatを使ったレイアウトは、HTML…

2015-03-29

レイアウトの種類

レイアウトテキストP.108〜115 Webサイトのレイアウトは「カラム数」と「可変か固定」の組み合わせです情報量や閲覧環境に応じて適切に選択する必要がありますサンプルサイトサンプルサイト：Layout Gala 固定レイアウト（Fixed Layouts）コンテンツを…

2015-03-28

選択範囲

Photoshopで選択範囲素材選択範囲を決める（1）「練習_1」の中の「face.psd」を開く。 ※または［ファイル］→［開く］。【Ctrl＋O】open：開く（2）「長方形選択ツール」で画面上ドラッグしてみる。（3）「楕円形選択ツール」に切り替えて画面上ドラッグ…

2015-03-27

確認テスト（1）

記述テスト次の記述をしなさい（プリント配布）プリントに「名前」と「終了時間」を記述して提出すること記述後ファイルは、保存したものを添付してメールで講師に送ること（ファイル名は、名前_CSS01.html）メールの内容を確認した時点で終了とします …

2015-03-26

無料サーバーに登録

レンタルサーバーを選ぶ有料サーバー、無料サーバーサーバーの容量動作保証のPHPのバージョン使用できるデータベースの種類所有できるデータベースの数無料レンタルサーバー freeweb：無料・広告あり Hostinger：無料・広告なし未来サーバー：無料・…

2015-03-25

縦ナビゲーション

手順のチェック以下の手順は、必ず実行しましょう。 DTD（HTML5）の入力 HTMLの基本構造の入力 meta（文字コード）の入力 title要素の入力文書構造の設定（見出し+本文）ブラウザでプレビュー HTML文法チェック←W3C公式サイト CSSは外部リンクで記述再度…

2015-03-24

目的とパレットの使い方

Photoshopの目的初心者がPhotoshopの勉強をするときのポイントは以下の３点です。選択範囲を決める。（どこをという最初の部分。または主語にあたります。）補正する。（写真をキレイにします。目的にあった画像にします。）加工する。（マスクや合成を…

2015-03-23

１カラムレイアウト：演習（2）

１カラムレイアウト応用画像のaltは空にボタンは、画像を横に並べること手順 HTML基本構造の入力 body内にテキストをペーストしマークアップする基本は、見出しと本文の関係必然性があれば、div要素でグループ化する head内にstyle要素を記述する使用…

2015-03-22

１カラムレイアウト：演習（1）

１カラムレイアウト div要素でグループ化文書構造をマークアップした後、div要素でグループ化をしてレイアウト用ブロックを作成 <html lang="ja"> <head> <meta charset="utf-8"> <title>石垣島観光ガイド</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>石垣島観光ガイド</h1> <p class="lead">石垣島は八重山諸島の中で一番大きな島で…</p></div></div></body></html>

2015-03-21

グラデーションとブレンド

グラデーションとはグラフィックデザインの手法のひとつで、ある異なる2色の色や濃淡が滑らかに連続して変化してゆく表現のことグラデーションツール線形（リニア）円形グラデーションを作る《グラデーションのポイント》開始色と終了色を決める線形…

2015-03-20

複合パスとクリッピングマスク

クリッピングマスク（1）新規書類の上に写真を「配置」する。 ※「リンク」にはチェックをしない。（2）写真の上に楕円を描く。（3）写真と楕円両方選択し、「オブジェクト」→「クリッピングマスク」→「作成」（4）文字の場合も同様の手順です。ショート…

2015-03-19

地図を描く

地図を描く（1）新規ドキュメント作成（2）［ファイル］メニュー → ［配置］（3）配置する写真を選択する。ファイル名「地図下絵.tif」 ※オプションは「テンプレート」のみ、チェックする。 ※「リンク」のチェックは必ずはずすこと。（4）「テンプレート…

2015-03-18

楕円形だけでロゴを描く

i-modeのロゴを描く（1）楕円ツールで、楕円をひとつ描きます（2）移動パレットで数値を指定しながら、移動コピーをしていきます（3）楕円の左ポイントを押したまま移動コピーをします ※上下の円が重なっているところにくると、マウスポインターが白い矢…

2015-03-17

長方形だけでロゴを描く

長方形だけでロゴを描いてみる：IT 下絵を「テンプレート」で配置する塗りなしの長方形で基準となる形を描く（ユニット）その長方形を複製して規則性をつくるキーオブジェクトを利用して基準の辺に整列させるレイヤーパレットの下絵のアイコンをOFFにし…

2015-03-16

書体指定とリセットCSS

適切なフォントファミリー日本語の書体指定で表現したい日本語の場合、フォントメーカーの制約から自由な選択は出来ません 2014年12月現在の設定方法 iOSにはProNしか入っていません（初期設定は、W3）ヒラギノ角ゴの英数字が読みにくいという考え方もあ…

2015-03-15

擬似クラス

リンクの色（擬似クラス：Pseudo-classes）要素の性質スタイルを適用させたい場合に使います主に「a要素」のリンク時のカーソルの表示状態を設定します疑似クラスには次の6種類があります。 lang 指定された言語のスタイル link 通常リンク（未アクセス）…

2015-03-14

文字色と背景色と囲み - 演習

文字色と背景色【CSS01】文字色と背景色 <body> <h1>style要素</h1> <h3>style element</h3> <p>HTML文書内にまとめて設定します。</p> </body> h1 { color: #3FA068; } h3 { background-color: #355584; color: #FFF; } p { color:#000080; } 【CSS02】文字色と背景色 <body> <h1>About wine</h1> <h2>Chianti Clas</h2></body>…

2015-03-13

ボックスモデルと色指定

ボックスを構成する要素ボックス幅は、コンテント領域幅＋パディング＋ボーダーの太さ＋マージンです。コンテント領域がボックス幅ではないので、注意が必要です。 ※コンテント：widthとheightプロパティで規定される長方形パディング：padding ボ…

2015-03-12

セレクタの種類

セレクタの種類タイプセレクタ IDセレクタ classセレクタ子孫（descendant）セレクタ属性（attribute）セレクタユニバーサルセレクタなどがあります。タイプセレクタ要素に対してスタイル指定する div: division em：emphasis h1 { color: #00CC00; } <h1></h1>…

2015-03-11

CSSからWebデザインを習得

勉強のステップ Webサイトを見るデフォルトCSSが適用されたページを見る HTMLのソースコードを見る CSSのソースコードを見るギャラリーサイトの活用ギャラリーサイトを閲覧する気になったサイトを分類しながらブックマークするブックマークを管理する C…

2015-03-10

Adobe Brakets

Adobe Brakets Bracketsは、HTML／CSS／JavaScriptで開発されている、HTML／CSS／JavaScript用の新しいオープンソースコードエディターです CSSの内容に入る時点で導入します（Webページ作成時点でDreamweaverに入ります） GIFアニメデモインストール後の画…