読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

企業系サイトトップページ構築

定義 色彩計画・キービジュアル画像は適宜 全体は、#conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピクセルのナビゲーションボタンを7個作成 高さは「50px」 「トップページ TOPPAGE」「ソリューショ…

ナビゲーションボタンを作る

新規ドキュメント 横幅800pxピクセルのナビゲーションボタンを作成するので、幅960pxを設定 ピクセルプレビュー ピクセルプレビューにチェック 長方形を描画 CS6・CCの場合 線の位置を内側にする(書き出しが、800pxからずれない) 区切り線を追加 ダイレク…

CSS Spriteでナビゲーション設定

ナビゲーションの役割 ユーザーが目指すページに進めるよう適切に案内すること HTML5では、主要なナビゲーションには nav要素を使用する ナビゲーションの基本形 li要素の横並びは、floatプロパティで配置する インライン要素は、displayプロパティでブロッ…

横ナビゲーション

CSS

リストをナビゲーションに(横) 番号なし箇条書きを利用する <html> <head> <meta charset="utf-8"> <title>横ナビゲーション</title> <style> html, body, ul, li, a { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { t</meta></head></html>…

ポラロイド風写真を作る

Photoshopで簡単ポラロイド風イメージ 写真から作るのではなく、土台から作ることがコツ (1)新規ファイルの「背景」に色を塗る (2)レイヤーパレットの「新規レイヤーを作成」をクリックして 「レイヤー1」を作成する (3)ポラロイド風画像の土台の選択…

一眼レフのようなピント

まわりをぼかす 一部分にだけピントが合っているように見せる (1)レイヤーを複製 (2)複製したレイヤーをフィルターで「ぼかす」 (3)複製したレイヤーに「レイヤーマスクを追加」する (4)マスクの中を塗りつぶして、元の画像を表示させる

顔の色を明るくしたい

色域指定 スキントーン (1)「選択範囲」→「色域指定」 「スキントーン」を選択 「顔を検出」にチェック (2)新規調整レイヤー 「レベル補正」を選択 例題 以下の写真を綺麗にみえるよう補正しなさい 自然な明るさにする 「色調補正」→「シャドウ・ハイラ…

シャドウ・ハイライト

シャドウ・ハイライト 「色調補正」→「シャドウ・ハイライト」 コントラストが強くなるのが「レベル補正」 自然光のようになるのが「シャドウ・ハイライト」 暗いシャドウを明るくする 明るいハイライトを暗くする シャドウ・ハイライト機能でHDR風な加工

色相・彩度

彩度を調整する 「新規調整レイヤー」→「色相・彩度」 派手な色の写真を落ち着かせる 「新規調整レイヤー」→「色相・彩度」 被写体の色を鮮やかにする 色を鮮やかにするには、色相・彩度 新規調整レイヤー「色相・彩度」 属性パネル「色調補正」の「レッド系…

色調補正の全体像を理解する

色調補正の基本手順 画像を観察する どのような仕上がりにするかを決める 「明るさ・コントラスト」「色合い」の修正方針を決める 「明るさ・コントラスト」を修正する 「色合い」を修正する 「鮮やかさ」を修正する 画像を観察し、微調整を行う 色調補正を…

色調補正

補正(写真をきれいに) デジタル処理できる範囲で、人間が見てきれいと感じる程度に変化させます。 正しい色に戻す 美しい色にする 色調補正の基本 色は「光」です 光を捉えている写真がきれいな写真ということになります カメラという機材を使って光を写し…

境界線を調整

境界線を調整(複雑な選択範囲) (1)選択しやすい色をクリックし選択範囲を作成 (2)選択範囲を反転し、必要な部分を選択している状態にする (3)選択範囲ツールのオプションバー「境界線を調整」をクリック (4)「エッジの抽出」を調整 (5)「エッジ…

選択範囲

メモリを管理する ROM:Read Only Memory RAM:Random Access Memory Photoshopは、開いているファイルサイズの数倍のメモリが必要となります。 開く(Open) 保存(Save) 複製(Copy) 戻る(Undo) 最低この動作を確保するメモリが必要となります。確保で…

目的とパレットの使い方

Photoshopとは Photoshopの目的 Webページ上に表示する画像を、効率よく最適化する(データ量が軽い、きれいな状態にする) 初心者がPhotoshopの勉強をする3つのポイント 選択範囲を決める。(どこをという最初の部分。または主語にあたります。) 補正する…

Dreamweaverの設定

Dreameaverとは マクロメディアによって開発された高機能なWebオーサリングツール 現在は、Adobe製品 何をするためのツールなのか 初心者にとっては、HTMLの入力を助けてくれるツール(ただし、勝手に何かをしてくれるわけではありません) 仕事の種類によっ…

オンラインレッスン

Progate prog-8.com 有料レッスンの範囲は進む必要はありません CODEPREP codeprep.jp

レイアウトの種類

レイアウト テキストP.122〜129 Webサイトのレイアウトは「カラム数」と「可変か固定」の組み合わせです 情報量や閲覧環境に応じて適切に選択する必要があります 固定レイアウト(Fixed Layouts) コンテンツを特定の横幅で固定したレイアウト 横幅は pxベー…

floatを使ったレイアウト

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

文法チェック

文法チェック テキスト、P.058-059 Markup Validation Service validator.w3.org URLでチェック ファイルをアップロード 直接データを入力 文法チェックをする理由 CSSを記述する前には正しい文法で記述されているかのチェックが必要です 文法ミスがあった場…

floatを解除する手法

CSS

floatを解除する手法 floatを解除する手法のclearfix と 次世代のレイアウト(外部リンク) 2013年6月20日 kojika17.com

CSSレイアウト - 解答例

文書構造の構築 レイアウトのための、id名・class名を付与する 画像挿入 例 テキストの記述とは別の場合 《index.html》 <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><span>★</span>うちのにゃんこ<span>★</span></h1> <p>我が家…</p></div></div></body></html>

CSSレイアウト - 実習

実習(テキスト) 素材 ★うちのにゃんこ★ 我が家のアイドル、にゃんこ達を紹介します! 我が家のにゃんこ紹介 飼い主紹介 猫写真募集 我が家のにゃんこ紹介 ●すばる(白キジトラ・オス) 目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼…

情報のグループ化

情報のグループ化 テキスト、P.032 情報のまとまりごとにソースをグループ化し、そこに名前をつけてソースの可読性を高める レイアウトやデザインの再現のために必要な枠を用意する ソースコード例 レイアウトブロックのid名は、汎用型(どのサイトであって…

文書をHTMLでマークアップ

文書をHTMLでマークアップする テキスト、P.020 すでにあるテキストに意味づけをしていきます テキストに書いてあるように、実際に手を動かしならマークアップの練習をしていきます 文書構造をマークアップする テキスト、-P.020〜033 以下のテキストを利用…

マークアップ - 実践

うちのにゃんこ 素材 ★うちのにゃんこ★ 我が家のアイドル、にゃんこ達を紹介します! 我が家のにゃんこ紹介 飼い主紹介 猫写真募集 我が家のにゃんこ紹介 ●すばる(白キジトラ・オス) 目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少…

floatを使った回り込み

CSS

floatを使った回り込み 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを…

ナビゲーションとfloatレイアウト

ナビゲーションとfloatレイアウト <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラムレイアウト基本</title> <style> html, body, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } body { background-color: #DDD; } #container { width: 760px;</meta></head></html>…

横ナビゲーション

CSS

リストをナビゲーションに(横) 番号なし箇条書きを利用する <html> <head> <meta charset="utf-8"> <title>横ナビゲーション</title> <style> html, body, ul, li, a { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { t</meta></head></html>…

ページ構築の手順

CSSによるページ構築の手順 この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブロック化 「コンテンツのブロック化」であるので、1行…

縦ナビゲーション

CSS

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

リストの表現

CSS

HTMLでリストの記述 箇条書きで表現する <body> <div id="container"> <h1>リストの装飾</h1> <ol> <li>枠線をつける</li> <li>縦の項目を線で区切る</li> <li>ボックスに影をつける</li> <li>文字に影をつける</li> <li>リストの行頭マークを消す/変更する</li> <li>角を丸くする</li> </ol> </div> </body> @Charset="UTF-8"; /* reset ---------------------------------- *…

文字の囲みと表の枠線

CSS

文字の囲み borderプロパティの値を指定する 上下左右の枠線を個別に指定する 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになります プロパティー 意味 border-top 要素の上の線 border-right 要素の右の線 border-bottom …

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

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

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

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

楕円形だけでロゴを描く

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

長方形だけでロゴを描く

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

CSSでレイアウト - 実践

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

CSS演習 - 1カラム 石垣島観光ガイド

1カラムレイアウト 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、…

書体指定とリセットCSS

CSS

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

HTML記述演習

HTML記述演習 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マング…

CSSでレイアウト - 演習

CSS

ボックスレイアウト実践 - 基礎演習 style要素をエンベッドして、以下の問いに答えなさい CSS01 h1要素「CSSの使い方」を記述し、赤色に表示されるよう設定しなさい CSS02 CSS01の記述を、背景色「青色」・文字色「白色」に変更しなさい CSS03 CSS02の余白を…

ボックスモデル

CSS

ボックスモデルとは 文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成します 記述の順序は「外側のエリアから」が一般的です hail2u.net テキスト P.75 ボックスを構成する要素 ボックス幅は、コンテントエリア幅 + パディング + ボーダーの…

初心者のためのCSS記述ルール

CSS

CSSとは Cascading Style Sheets ウェブページのスタイルを指定するための言語 1. CSSの記述場所 テキスト P.011 記述場所(head部内に記述する:embed) style要素 <html> <head> <title>HTMLの練習</title> <style> </style> </head> <body> <h1>はじめてのHTML</h1> <p>今日はじめてHTMLを書きました。</p> </body> </html> 2. 見出しの色を赤く…

マークアップ - 実習手順

実習 テキストP.020〜033 以下のテキストを利用し、正しいツリー構造になるようマークアップの練習を行います 最初からテキストを真似るのではなく、自分なりの考え方マークアップをし、検証(バリデート)しながら修正をしていきます 新規ドキュメント作成 …

復習 - 正しい文書構造とページ遷移

セマンティックなマークアップ セマンティック=意味をきちんと考えた(例: そのテキストは「見出し」なのか「通常のパラグラフ」なのか、見出しならばh1~h6要素のどれでマークアップすべきか) セマンティックなマークアップによって、そのページは自然と…

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

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

HTML - 箇条書きと表組みとリンク

箇条書き <ul> <ol> <dl> テキストP.30〜32 必然性のある箇条書きを利用する ul(unordered list)順序が置き換わっても意味が伝わる並列な内容に使う。 行頭マークは「黒丸」 <ul> <li>私が好きな真っ赤なりんご</li> <li>あなたが好きなのはバナナ</li> </ul> ol(ordered list)順序が置き換わっ</dl></ol></ul>…

Illustrator - 線のバリエーション

線のバリエーション 点線を描く (1)10pxの直線を描く (2)線の属性を「波線」→「線分:0」「間隔:線の太さの2倍以上」にする。 (3)線端の形状を「丸形線端」にする。 破線を描く(JR線路・私鉄線路) アビアランスを利用した描画も可能ですが、フロン…

Illustrator - 地図を描く

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

Illustrator - イラストを描く

線と塗りの準備 円の線幅は「3pt」、塗りをつけて「アウトライン」と「プレビュー」を切り替えて、描き進めます。 目の部分を描く 左目を描く (1)定規を表示する。 定規を表示しガイドを利用すると描きやすくなります。 [画面]メニューから「定規を表示…