Web白描

Webサイト制作科補足メモ

Illustratorペンツール - ベジェ曲線

ベジェ曲線 2つの点を結ばないと線にはならない 直線の始点と終点に力を加えて曲げると曲線になる 力には「方向と大きさ」がある 直線を描く 連続してクリック 描き終わるときは、余白を「Ctr + クリック」 曲線を描く プレス+ドラッグ(クリック+ドラッグ…

縦ナビゲーション

ナビゲーション マウスクリックにより、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 縦ナビゲーション 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空きを指定する …

CSS ★演習

演習 CSSの記述は、内部参照(embed)で記述 問題 CSS1 #1B888D #355584 <body> <h1>style要素</h1> <h2>style element</h2> <p>HTML文書内にまとめて設定します。</p> </body> 問題 CSS2 幅の指定は不要 #91BC86 #BC908F #F5F5DB <body> <h1>About wine</h1> <h2>Chianti Classico Riserva</h2> <p>1435年創業の由緒あるワイン</p></body>…

Emmetの使い方

Emmetとは Emmetは、主にHTMLやCSSの記述・編集を効率化するプラグインです blogs.adobe.com テキストエディターの場合 Adobe Bracketsは、プラグインをインストールします VS Codeは、インストールされています Dreamweaverの場合 Emmetは、インストール済…

楕円形だけでロゴを描く

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

長方形だけでロゴを描く

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

文字指定

CSS

情報を伝える文字 文書構造で伝える 文字情報の価値の優先順位をブラウザに伝えるHTML 閲覧者に情報の内容をわかりやすく伝えるためのCSS CSSを指定しない場合は、ブラウザの初期値(CSS)が適用されます★HTMLの検証:The W3C Markup Validation Service CSS…

ボックスモデルとリセットCSS

CSS

ボックスモデル テキストP.75 HTMLタグでマークアップされた要素は1つの箱とみなされます ブロックレベル要素(幅指定をしない場合、ブラウザー幅で表示される) 記述するプロパティの順序は、空間からコンテンツ内容への順が一般的 パディング(padding) …

スタイルの継承

CSS

スタイルの継承(inheritance) CSSには親要素から子要素へとスタイルが継承される仕組みがあります この仕組のおかげで、同じ指定を繰り返さなくても効率よく指定ができます <html lang="ja"> <head> <meta charset="utf-8"> <title>スタイルの継承</title> <style> body { color: red; } </style> </head> <body> <h1>bodyの子要素である見出し要素は、</h1></body></html>…

CSSとは

CSS

CSSとは Cascading Style Sheets 構造化された文書をどのように表現するのかを指定するための言語 文字の色、文字の大きさ、余白などのレイアウトの指定 CSSのコーディング規約(Google) 「Google HTML/CSS Style Guide」を適当に和訳してみた Google HTML/…

要素の入れ子(ネスト)と子孫関係

CSS

要素の入れ子(ネスト)と子孫関係 テキストP.035 HTML文書全体が、html要素を最上位(ルート)の先祖要素とする入れ子によるツリー構造になっています このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造に…

HTMLを書く- 文書構造(ページの内容)

bodyの中に何を書くか ページのテーマ内容の「文書構造」を記述します パラグラフ・ライティング shouronbun.com テキストP.20〜43 見出し heading(1〜6) 一般的には、「h1」〜「h4」までを使用します 段落(本文) paragraph パラグラフの最も重要なポイ…

HTMLを書く- 基本構造(ページの枠組み)

HTML Hyper Text Markup Language の略 HTMLドキュメント 新規ドキュメント作成 拡張子を「.html」として保存する 基本構造を入力する 基本構造 入力は、必ず「開始タグ」→「終了タグ」という順序で入力する DOCTYPE宣言 文書が「HTML5「で記述したることを…

フォルダー・ファイル管理

Cドライブ内の管理フォルダー 例えばフォルダー名を「自分の名前」(英字表記)で作成 各プロジェクトごとのフォルダーが内包されている状態 「img」フォルダー内には、そのプロジェクト(フォルダー内)で使用する画像を入れる CSSファイルを内包する場合も…

形の変形

変形 すでに描画されているオブジェクトの変形を練習します。 コンピューターは既存の形を利用することが得意 特に複製は、コンピューターのもっとも得意とするところ リフレクトツール 「線対称」の複製を作るときに使用するツールです。 ドキュメントを開…

はじめてのIllustrator

Adobe Illustrator Vectorデータを作るアプリケーション 再計算の処理により拡大・縮小しても画質が崩れない画像を作ることができる Adobe Creative 道場#158 <30周年記念スペシャル> Illustratorやろうぜ! ベクターイメージ Vectorとraster Illustrator…

HTMLの基本構造のマークアップ

HTML基本構造のマークアップ 全てのHTMLドキュメントに必須 HTML5のDOCTYPE宣言 lang属性:ページの主要言語を指定する HTML5の文字コードセットは原則「UTF-8」 ページタイトル:30字から40字で重要な後から始める <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの基本構造</title> </head> <body> </body> </html> CSSファイルの読…

HTMLの入力

入力練習の準備 管理フォルダーを作成(このとき、日本語使用不可) Cドライブ直下に「myName(自分の名前を英字で)」フォルダーを作り管理しなさい その中に「日付フォルダー」を作り、データを管理します(最初の段階では日付、後にプロジェクト名で管理…

文字を入力する

テキストエディター 文字を入力するツール(基本的に、メモ帳以外を使用します) Adobe Brackets(ブラケッツ) brackets.io 管理フォルダーを設定 「Getting Started」をクリックし、管理したいフォルダーを選択します 入力データを保存する準備 管理フォル…

制作環境を整えよう

準備するもの 自宅学習用のパソコン ブラウザー(Google Chrome) テキストエディタ(Adobe Brakets) 画像編集ソフト(無料版、体験版、有料版のいずれか) テキストエディター 初期の段階で「HTML」を記述する練習には「メモ帳」ではないエディターが必要…

Webページを表示する仕組み

Webページを表示する仕組み Webページ Webにおける文書の単位 1ページあたりの分量はページごとに異なる ひとつのWebページに URL(Uniform Resource Locator)が対応する ブラウザのアドレスバーに URL を入れてアクセス Webページの中には、テキスト(文…

はじめてのWebデザイン

デザインとは 目に見えるもの(形而下)の本質を伝える 目に見えないもの(形而上)の本質を伝える まずはじめに 目の前にあるものをわかりやすく整理 紙で「余白」の使い方の練習をします アナログ的に手の動きで体験します 文字でわかりやすく伝える 単に…