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

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

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

オブジェクトの階層構造 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を書き換えることができる イン…

CSS3のプロパティ

CSS3のプロパティ テキストP.276 まず、CSS3で表現してみる CSS3で角丸を設定する <section> <h3>border-radius</h3> <ul class="sample bdr"> <li class="bdr01">全て同じ</li> <li class="bdr02">左上 | 右上 | 右下 | 左下</li> <li class="bdr03">左上 | 右上と左下 | 右下</li> <li class="bdr04">左上と右下 | 右上と左下</li> <li class="bdr05">正円</li> </ul> </section> /* bor…

CSS3の基本

CSS3を使うメリット(テキスト P.258) classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるようになる CSS3は下位互換 CSS3は、CSS2.1を含み…

ページ構築のワークフロー

素材の準備 ビルボード(キービジュアル) 見出し画像の加工 テーマカラーの変更により色彩を変更する場合は「色相・彩度」を利用します h1 h3 h3 h4 h4 h3の幅を変更する 「カンバスサイズ」で幅を変更します を左の模様を右にコピーして重ねていきます。 …

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

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

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 以下のテキストを利用…

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

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

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

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

floatを使った回り込み

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

2カラムレイアウト基本

2カラムレイアウト基本 画像は適宜選択する 素材例 Homepage Title サブタイトルサブタイトルサブタイトル コンテンツのタイトル コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述しま…

floatを使ったレイアウト基礎

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

コピースタンプツールとドロップシャドウ

コピースタンプツールを使い補正する Webの仕事の中では、画像中の傷や汚れを消す作業として一般的です。 (1)「練習_2/スタンプ」→「お茶.jpg」を開く。 (2)「コピースタンプツール」 を選択する。 (3)「コピースタンプツール」のブラシオプションを「…

レイヤーマスクを追加

レイヤーマスク Photoshop」のマスクは、選択範囲 マスクは、選択範囲の記憶 レイヤーマスク内が白ならば100%不透明、黒ならば100%透明になり、下のレイヤーが透けて見えるということです。 つまり2枚以上のレイヤーが必要。 レイヤーマスクを使った画像…

補正で写真をキレイに

補正(写真をきれいに) すでに移っている質が変化するわけではありません。 デジタル処理できる範囲で、人間が見てきれいと感じる程度に変化させます。 新規調整レイヤー 何度もやり直しができる色調補正のレイヤー レベル補正 おもに画像の「階調幅」を調…

楕円形だけでロゴを描く

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

長方形だけでロゴを描く

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

Illustrator - トレースとは

トレースとは 下絵をなぞって描くこと 真似て描く練習(繰り返す度にうまくなること請け合い!) 下絵を設定する 下絵にする画像データ(手描きのイラストをスキャンしたりしたもの)を準備する(PNG、JPG,GIF,TIFFのいずれかの形式) 新規ドキュメント作…

形の変形

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

リストをナビゲーション - 縦

CSS

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

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

CSS

CSSとは Cascading Style Sheets HTMLの要素をどのように修飾(表示)するかを指示する つまり、どう表示したいかというイメージに向かって値を記述していきます。 CSSのコーディング規約(Google) 「Google HTML/CSS Style Guide」を適当に和訳してみた Go…

選択範囲

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

Photoshopを使う

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

HTMLの概要

HTMLの役割 HTML(Hyper Text Markup Language) Webページを表示するためのマークアップ言語のひとつ マークアップとは、コンテンツの始めと終わりにタグと呼ばれるしるしを付けて、その部分になんらかの「意味付け」をすることを指します HTMLの基本構文 …

HTMLの概要

HTMLの役割 HTML(Hyper Text Markup Language) Webページを表示するためのマークアップ言語のひとつ マークアップとは、コンテンツの始めと終わりにタグと呼ばれるしるしを付けて、その部分になんらかの「意味付け」をすることを指します HTMLの基本構文 …

HTMLの入力

HTMLの入力 1. 新規HTMLファイルを作成します Bracketsで新規ファイルを作成し、「index.html」というファイル名で所定のフォルダーに保存します 2. 最低限必要なHTMLの骨組みを書きます HTMLは、「タグ」というしるしを使って書いていきます 「タグ」は、原…

HTMLを入力する準備

文字を入力するツール テキストエディター Adobe Brakets Bracketsは、HTML/CSS/JavaScriptで開発されている、HTML/CSS/JavaScript用の新しいオープンソースコードエディターです Webページ作成時点でDreamweaverに入ります Webに特化した機能群 高度な…

HTML - レッスンを始める前に

パソコンでの文字入力に慣れる 授業開始、5〜10分程度入力の練習をします コードドリル アカウント登録後、ログインをすると、以下のようになります。 通常は、アカウントなしでも入力練習はできます。 HTML&CSS|タイピング|mr100 Webクリエイター能力認定…

Gmailアカウントの作成

Gmailアカウントを作成する 個人のアドレスとは別にしたい場合には、授業用のアドレスを作成します (1)Gmailと検索します (2)アカウント作成 (3)新しい Google アカウントを作成 設定後、Gmailを使うと以下のようになっています。 続いて個人情報を設…

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

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

パソコンの操作

パソコンを使う パソコンの電源を入れる これは、2進数の「0(OFF)」と「1(ON)」を組み合わせて作られた記号です すべてのパソコンの電源記号は、統一されています。(ユニバーサルデザイン) マウスの操作 クリック マウスボタンを押して離す ダブルクリ…

パソコン内部の処理

処理の流れ パソコン内部では「マイクロプロセッサー」を中心としてデータのやり取りが行われています マイクロプロセッサーは、外部記憶装置のデーターをRAMに読み込み処理を行います 処理した結果は、RAMに記憶させ必要に応じて外部記憶装置に書き込みます…

コンピューターとは

ITパスポート ★ITパスポート試験★ITパスポート試験ドットコム★ITパスポート試験過去問題演習サイト★ITパスポート過去問道場★過去問題(問題冊子・解答例) コンピューターとは computer は、広義には計算機、狭義には計算開始後は人手を介さずに計算終了まで…

いま始めるべきこと

よく見る 誰かが作ったWebサイトをよく見る 見て気になったポイントを、記録しておく 見たことも無い「アート」を作る仕事ではありません。 ですから、先人の良い例をいっぱい見ることで、必ず得るものがあります。 記録する それを記録しておく 記憶にとど…

形を捉えるには

ゲシュタルトの法則 人間は近いものや似ているものをグループ化したり、閉じた図形を見出そうとする性向がある、という法則。 「要素が組み合わさることで全体が体制化される」という法則。 視知覚(目から得られる情報をもとに状態を把握するはたらき)に関…

ものを作るということ

『読む美術館』 山内宏泰(リアス・アーク美術館 主任学芸員)氏の資料]を転載させていただいております。 形而下と形而上 「具象・抽象」と似た言葉で「形而下・形而上」という言葉があります。 ケイジカ・ケイジジョウと読みます。形而下とは「かたちのあ…

点と点を繋げる

点と点を繋げるには 自分を大切にする 自分を大事にする姿は、他人に伝わる 愛車をていねいに扱うように、自分自身にも心を配る。ピカピカなクルマなら他人も大切に扱ってくれるように、自分を大切にしている人には、ていねいに接してくれるもの。周囲の人間…

受講の準備

心構え 6ヶ月の時間を有効に使うためのスケジュールを立てる ちょっと無理そうでも「こうなりたい」というイメージを持つ そうなるためには、何が必要か調べてみる やるべきことを書きだしてみる そして1日の時間の中でいつ実践するかを計画する 訓練受講…

Webデザインの勉強 03月14日開講クラス - 初心者のための取り組み

Webデザインの勉強 03月14日開講クラス 2017年03月14日開講クラスの解説ブログ 日々の復習と自宅学習の支援ツール 未経験者が理解を深めるための取り組み インターネット上(2017年時点で最新)の無料サービスを利用して、授業内で聞き漏らしたりしても、他…

予約システム

WordPressで予約システムを設置できるプラグイン MTS Simple Booking Booking System WordPress Appointment Booking and Online Scheduling Plugin CP Appointment Calendar Salon Booking Online Lesson Booking Events Manager 時間単位で予約できる予約…

ゲストブック

ゲストブック 《index.php》

サンキューメッセージを送信

サンキューメッセージを送信

ゲストブック - データ表示機能

データ表示機能 データの一覧表示 query( 'SET NAMES UTF8' ); $sql = 'SELECT * FROM message WHERE 1'; $stmt = $dbh -> prepare( $sql ); $stmt -> execute(); } catch(Exception $e ) {…