2014-02-01から1ヶ月間の記事一覧
CSSによるページ構築の手順 この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブロック化 「コンテンツのブロック化」であるので、１行…
floatプロパティを使ったレイアウト 通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になります floatは浮き上がっている状態 floatを使ったレイアウトは、HTMLソースコードの順序と表示順が連動するため、レイアウトに一定の制約…
レイアウト Webサイトのレイアウトは「カラム数」と「可変か固定」の組み合わせです 情報量や閲覧環境に応じて適切に選択する必要があります サンプルサイト サンプルサイト：Layout Gala 固定レイアウト（Fixed Layouts） コンテンツを特定の横幅で固定した…
リセットCSS リセットする意味を理解する必要がありますが、初学者にとってCSSの全体像をつかめないと理解しにくいのも「リセットCSS」です 《サンプル》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>リセットCSSを記述する前に</title> <style> body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-se</meta></head></html>…
id/classは要素タイプから記述する 原則として、id/classには要素タイプをつける div.note { … } p.moveto { … } div#search { … } 原則id、例外class ページ内のテキストやパーツそれぞれは本来、特定の役割を備えているはず 原則としてidを使い、他のもの…
テキストリンク テキストリンクの色は、一目でわかるように「青色」で表示するようブラウザの初期値のCSSが決めています リンクの装飾にはユーザーへの配慮が不可欠（そこがクリックできるということを明示する） リンク色は、デザインや配色などの統一感を…
HTMLの入力練習 HTML&CSS｜タイピング｜mr100 Mac版Chromeには対応していないようです ドラッグ（Press+Drag）の練習 グラフィックを扱うIllustrator・Photoshop・Fireworksなどではドラッグの精度が重要になってきます Photoshopの目的 初心者がPhotoshopの…
テキストエディターとしてのDreamweaver 効率化のために使用するDreamweaverですが、初心者はテキストエディターとして使用します 自宅学習でDreamweaverを利用できない場合は、テキストエディターを準備します サイトの管理（サイトの定義） Dreamweaverは…
CSSのコーディング規約（Google） 「Google HTML/CSS Style Guide」を適当に和訳してみた Google HTML/CSS Style Guide CSSはどこに書くか？ 外部ファイルにCSSを書く方法 styleタグを使ったCSSを書く方法 HTML要素にCSSを書く方法 外部ファイルにCSSを書く…
ボックスモデルの解説の代表例 ボックスを構成する要素 ボックス幅は、コンテント領域幅 ＋ パディング ＋ ボーダーの太さ ＋ マージンです。 コンテント領域がボックス幅ではないので、注意が必要です。 ※コンテント：widthとheightプロパティで規定される…
CSS（Cascading Style Sheets） 文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 メリット サイトの重さ軽減（SEO対策にも効果あり） 自由なレイアウト（文章構造を保ちながら可能） 編集が簡単（外部…
セマンティックなマークアップ セマンティック＝意味をきちんと考えた（例: そのテキストは「見出し」なのか「通常のパラグラフ」なのか、見出しならばh1〜h6要素のどれでマークアップすべきか） セマンティックなマークアップによって、そのページは自然と…
イラストをトレース
イラストをトレースする準備 （1）新規ドキュメント作成 （2）［ファイル］メニュー → ［配置］ （3）「イラスト」→「かに下絵.tif」を選択する ※オプションは「テンプレート」のみ、チェックする。 （4）「レイヤー１」が選択されていることを確認して描き…
コーナーを描く
曲線を描く S字曲線を描く 連続した曲線を描く 連続した直線・曲線を描く
直線の修正 右クリック（コンテクストメニュー）で画像を保存 新規ドキュメントに「テンプレート」のみにチェックをして配置 トレース（描き終わる） 点線の位置までアンカーポイントを移動修正 クローズドパス 水平・垂直・45°の直線
線の修正 描かれた線を修正する すでに描かれている線は、ダイレクト選択ツールを使いセグメントをクリックして、方向点の位置に変更を加えて修正する。 「ダイレクト選択ツール」で、セグメント（パス）をクリックする。 方向点をプレスドラックして曲線を…
Illustratorで作るボタン アンチエイリアスの処理 IllustratorからWeb画像に書きだす段階でのアンチエイリアスの処理 プレビュー境界を使用 ピクセルプレビューにチェック ピクセルにスナップにチェック これだけです。 結果は、以下のようにスナップされて…
素材←ダウンロード 変形 すでに描画されているオブジェクトの変形を練習します。 コンピューターは既存の形を利用することが得意 特に複製は、コンピューターのもっとも得意とするところ リフレクトツール 「線対称」の複製を作るときに使用するツールです。…
描画（描く） 基本的に、すべてを「ペンツール」で描きます。 いわゆる「鉛筆」などのメタファーではなく、力学の理論構造で線が描画されます。 ドラッグをして描く 長方形も楕円形も手の軌跡は同じです。 クリックして描く ドラッグしたときと同様、基準点…
Illustratorの役割 コンピュータを扱う仕事の中では、コンピュータの特徴である「複製」を利用することが鍵です 「デザイン」的な視点でいえば、「対称（シンメトリー）」を利用して「画面上の安定」をつくります 周りにあるモノの中にある「シンメトリー」…
Illustratorを起動 ベクター（Vector）データを作るアプリケーション 新規書類作成 必ず新規書類を作成することが必要です。（机の上に紙をおいて準備する。） [ファイル]ニュー → [新規] 練習用のファイルサイズは、各自のモニタにあわせます。 初心者は「…
Webページを表示する仕組み Webページ Webにおける文書の単位 １ページあたりの分量はページごとに異なる ひとつのWebページに URL（Uniform Resource Locator）が対応する ブラウザのアドレスバーに URL を入れてアクセス Webページの中には、テキスト（文…
記述の練習の準備 管理フォルダーを作成 Cドライブ直下に「name」フォルダーを作り管理しなさい その中に「名前」→「日付フォルダー」を作り、データを管理します ※このとき、フォルダー名・ファイル名に日本語使用不可。 ブラウザに情報を表示するためにはH…
HTMLの入力練習 日本語の入力練習も必要ですが、授業中の8割は欧文の入力になるため、欧文入力の練習をしましょう もちろん、最初からHTMLの入力の練習を始めてもよいと思います HTML&CSS｜タイピング｜mr100 Mac版Chromeには対応していないようです Webクリ…
地図を描く （1）新規ドキュメント作成 （2）［ファイル］メニュー → ［配置］ （3）配置する写真を選択する。ファイル名「地図下絵.tif」 ※オプションは「テンプレート」のみ、チェックする。 ※「リンク」のチェックは必ずはずすこと。 （4）「テンプレート…
World Wide Web インターネット上で提供されるハイパーテキストシステム。 単にWeb（ウェブ）と呼ばれることも多い。 ハイパーテキスト(hypertext) 複数の文書（テキスト）を相互に関連付け、結び付ける仕組み ハイパーリンク：テキスト間を結びつける参照の…
複合パス （1）長方形の上に楕円を大小重ねて２つ描く。 （2）楕円２つを選択し「オブジェクト」→「複合パス」→「作成」 ※穴が空いたように見えます。 ※ただし穴を空ける機能ではなく、階層構造にあるオブジェクトをひとつの階層にまとめて、ひとつのオブジ…
パソコンを使う パソコンの電源を入れる これは、2進数の「0（OFF）」と「1（ON）」を組み合わせて作られた記号です すべてのパソコンの電源記号は、統一されています。（ユニバーサルデザイン） 電源を入れる マイクロプロセッサーは、ROMのプログラムを読…
