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

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

無料レンタルサーバー

ウェブクロウ:無料・広告なし エックスドメイン 無料レンタルサーバー Hostinger:無料・広告なし 未来サーバー:無料・広告なし

指定した回数だけ処理を繰り返す - for文

for文 指定した回数だけ処理を繰り返す 変数「i」の初期値(「i」は、indexの意) 処理を1回実行するたびに、変数「i」の値をどのように変更するか for ( 変数の初期値; 繰り返し条件; 変数の変更 ) { 実行される処理 } 変数の値を1ずつ増やす演算子 「+…

条件分岐 - if文

スクリプトには3通りの進み方がある(実行する流れ) 順次 分岐 反復 if文 条件によって、ある処理を実行するかしないか選択して、処理の流れを分岐させたいときに使う構文 条件がtrueのときは処理を実行する 条件が成り立たないとき(falseのとき)は、処…

ブラウザに文字を表示(出力)

オブジェクトの階層構造 Webブラウザ上の主なオブジェクトには、windowオブジェクトを頂点とする階層構造があります ブラウザに文字を表示(出力) 「Hello World!!」とブラウザに表示させる <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello!</title> </head> <body> <script> window.document.write( 'Hellow World!!' ); </script> <noscript> Ja</noscript></body></html>…

出力(処理の結果を表示)

3種類の出力 console.log() で出力(検証ツールへ出力) alert() で出力(ダイアログボックスへ出力:手軽に使えますがWebサイトで使用する機会はあまりありません) document.write() で出力(ブラウザーの内容を書き換えて出力) コンソールに出力 「コン…

演算子

式(expression) 演算子(operator):演算するもの オペランド(operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算をしたり長い文字列をつなぎ…

変数

変数(variable)とは 変化するもの(値が変化する器) 値を直接書かずに抽象化して扱う 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉(文字列)や数字(数値)を一時的に保存する「箱」 繰り…

JavaScriptをHTMLに書く

書き方のルール 基本的に「半角英数字と記号のみ」を使う 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む 大文字と小文字は区別される 命令文の末尾には「セミコロン」をつける 複数行にわたるまとまりの命令文は「{}波括弧」で囲む(囲…

JavaScriptとは

プログラミング言語とは コンピューターへのお願いする言語 複雑なタスクを処理する「プログラム(アルゴリズム)」を考えるのは人間 JavaScriptとは クライアントサイドで動作するプログラミング言語 Javaとは別もの HTML&CSSを書き換えることができる イン…

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

定義 色彩計画・キービジュアル画像は適宜 全体は、#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の余白を…