CSSを使って横並びのナビゲーションを作ります。 ブラウザプレビュー ポイント#nav liをフロートさせるために、その親要素の#nav ulにoverflow: hidden;を指定する。すると横並びになる。 ソースHTML <div id="nav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">カフェフード</a></li> <li><a href="#">カフェドリンク</a></li> <li><a href="#">インフォメーショ</a></li></ul></div>…
スタンプツールでは、画像上の画像をスタンプのようにコピーしながら描いていくツールです。 やり方 スタンプツールを選択しコピーの対象となる物体のうえでAlt+クリック 他の場所でドラッグしながら描く。 応用このコピーツールを使用することで、写真から…
写真の補正をすることで、写真をより引き足させます。 写真の補正には「イメージ」メニューから「色調補正」と、「調整レイヤー」を使用することで、「調整レイヤー」は後でその調整がいらなくなった場合消すことができます。レベル補正画像の階調幅を調整し…
Photoshopを使ってポラロイド風の画像を作ります。 新規ファイルをつくります 下地に色をつけます（わかりやすくするためなので、何色でもいいです）。 選択ツールで長方形を作り、白色に塗ります。 そのまま選択範囲に境界線をつけます。 レイヤーコピーを…
CSSで、擬似クラスをうまく使い、ナビゲーションを作っていきます。 擬似クラス擬似クラスは、閲覧者が起こしたアクションによって、ページに変化が起こせるようにしたものです。aタグに良く使われます。a:link、a:visited、a:hover、a:activeなどがあります…
Photoshopの選択範囲を利用して、画像を切り抜くことができます。 です。長方形ツールや楕円ツールのほかにも、特定のオブジェクトを切り抜くのに最適なツールがあります。 自動選択ツール自動選択ツールは似たような色を選択範囲にしてくれます。数クリック…
レイヤーマスクを使うと、簡単な画像の合成や、アナログでは不可能なグラデーションのかかった合成などができます。やり方合成したいレイヤーを選択し、レイヤーマスクを追加します。すると新しく画像サムネイルの隣にレイヤーマスクサムネイルが生成されま…
ドロップシャドウで浮かびあがる文字を作ります。やり方 適当な文字を文字ツールで書き込む。 背景色と文字色を同じ色にする。 文字レイヤーを選択し、「レイヤースタイル」からドロップシャドウ。 出てきたプロパティの「角度」と「距離」を0にする。
CSSでのフォントの指定には、そのフォントを表示する環境が少ない順から指定していきますフォントの指定Mac→Windows→両方共通のように書いていきます。フォント名にスペースが含まれるものはダブルクウォーツで囲います。ゴシック体通常であれば、これらを指…
HTMLにもCSSにも慣れてきたので、1カラムレイアウトの演習をしました。演習結果（ブラウザプレビュー） ポイント ヘッダーの画像の上にテキスト（h1）を表示するために、imgタグではなくCSSでdiv#headerにbackgroundで背景画像を設定。 画像上のテキストの位…
角丸長方形ツールでドラッグ中にカーソルの右を押すと、丸くなります。逆に左を押すと丸みがなくなります。上と下で角丸の大きさを微調整できます。
作り方 楕円形ツールで、ひとつ楕円を作ります。 それを下に三つコピーします。コピーするときは選択ツールダブルクリックで、楕円の縦の直径分移動します。 もうひとつコピーを作り、二つの楕円と接線が合うように楕円を左側へ移動させる。 三つの楕円と接…
長方形ツールをつかってロゴを描いてみます。 ITを描いてみる ポイント 描画で醜い場合は表示をアウトラインのみにすると編集しやすくなる。（Ctrl+Y） 長方形の太さは大体みんな同じなので、ひとつ長方形を作ったらそれをコピーして利用します。90度回転さ…
CSSを使ったレイアウトの宿題が出ていたので、さまざまなレイアウトをトレースしました。01 サイト概要風ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>Spread Experiment Web Site</title> <style> html, body, div, h1, h2, p{ margin: 0; padding: 0; line-height: 1.0; } body{ font-family: "Hiragino Ka</meta></head></html>…
Floatを使ったレイアウトを使うことで、横並びのページを作ることができます。 Floatを使い場合は、floatさせた要素が他のスタイルに潜り込まないように、overflow:hidden;（はみ出した要素を隠す）を設定するのが一般的です。 ２カラムレイアウト２カラムレ…
今まで学んだことを踏まえて、簡単なCSSレイアウトを演習します。CSSのみでスタイリングborderとbackgroundでレイアウトしました。ブラウザレビューソース <html lang="ja"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <style> html, body, div, h1, h2, p{ padding:0; margin:0; line-height:1.0; } body{ </meta></head></html>…
ヘッダーにあるh1はそのページの中で一番重要なものなので、特に文法に従って書くことが望ましい。 一番望ましい形は以下の通り、h1とpのセットが望ましいです。 <h1>一番重要なキーワード | 会社名</h1> <p>h1の概要、会社名などは後のほう</p> 人々が検索するときに、会社…
HTMLの要素に「border」を指定していすることで、ボーダー（境界線）をつけることができます。 ボーダーの種類ボーダーには、solid（実線）、dashed（破線）、double（二重線）、dotted（点線）があります。他にも種類がありますが、あまり使われません。 実…
CSSで背景画像を設定するには「background: url(#);」を使います。背景画像を全面に敷き詰める。背景画像を全面に敷き詰めるには、「background: url(#);」をそのまま使います。ソース body{ background:url(img/01.gif); } 背景画像を横や縦に並べる背景画…
CSSにも慣れてきたので、CSSを使った簡単なレイアウトを書いていきます。 01 ソース <html lang="ja"> <head> <meta charset="utf-8"> <title>01</title> <style> body{ font-family: "HIragino Kaku Gothic ProN", Meiryo, sans-serif; } h1{ color: #108889; } h2{ background: #355584; color: #fff; padding: 5px 0 5px 0; </meta></head></html>…
CSSを用いてのHTMLをスタイリングしていきます。 CSSを書く場所CSSは一般的に外部ファイルとしてHTMLに読み込ませます。 その場合headの中に、以下のように記述します。 <link rel="stylesheet" href="style.css"> また、直接CSSをheadの中に書き込むこともできます。 <head> <meta charset="UTF-8"> <title>CSSの練習</title> <style> h1 { color: red; </style></meta></head></link>…
かにをトレースしながら、複雑な図形を描いてみます。ポイント 同じような図形は移動ツールとShift+Alt+ドラッグでコピーする。 線対称の図形は、リフレクトツールでコピーする。 拡大縮小ツールで縮小する場合基準点を変えることで、より直感的に縮小できる…
CSSでのスタイルの指定方法です。指定の方法セレクタ{ プロパティ:値;}です。セレクタはh1などのタグやID（#）、class（.）を指定します。 "{}"（波括弧、カーリーブラケット）は宣言です。この中にプロパティと値を書きます。各プロパティの最後は必ず";"（…
背景に画像など指定するとき、画像のパターンが斜めになるようにすること。何故なのかは覚えていませんが、ゲシュタルトの崩壊が関係するようで、空間が広がって見えるのだそうです。 後々、理由がわかったら追記使用と思います。
RGBカラーは色相・明度・彩度で構成されている。RGBカラーの基本 色相･･･色の違い 明度･･･明るさ 彩度･･･色の鮮やかさ CSSでの書き方。CSSでは"#"の後にR(Red)G(Grean)B(Blue)の数値を入れてあげる。数値には16進数（0~F）を使う。0が一番濃く、Fが一番薄い…
UTF-8は１文字３バイトあるが、世界中のあらゆる言語を表示できる。 人間の瞬間記憶の限界は平均して７個。なので、グローバルナビゲーションなどは７項目を基準に、二つ減らしたり増やしたりすると見やすい。日本人は５とか７が好き。 検索エンジンはh4まで…
HTMLでテーブル（表）を作ります。ソース <table border="1" width="300"> <caption>キャプション</caption> <tr><th>月</th><th>火</th><th>水</th></tr> <tr><td>○</td><td>×</td><td>○</td></tr> <tr><td>○</td><td>×</td><td>○</td></tr> </table> タグの説明 table テーブルの範囲 caption テーブルの題名 tr 行 th テーブルヘッダー td テーブルセル
Illustratorに慣れてきたので、イルカのテンプレートからイルカをトレースしてみます。ポイント コーナーを作る。 なるべくアンカーポイントを少なくすると綺麗に見える。 線を太くすると見やすい。
HTMLでの基本的な文章の構造を書きます。 HTMLではアウトライン構造が重要になります。書き方例： <h1>一番重要な見出し<h1> <p>h1に関する概要</p> <h2>次に重要な見出し</h2> <p>h2に関する概要</p> ポイント必ず見出し（h1）と段落（p）をセットにする。そのセットだけで題名と文章として</h1></h1>…
回転ツールで一枚の葉っぱをコピーしながら、四葉にしていきます。作り方 選択ツールで葉っぱを選択。 回転ツールを選択し、四葉の中心となるところをAlt+クリック。 角度を９０度にしてコピー。 すると９０度回転した葉っぱが一枚コピーされる。 Ctrl+Dで繰…
