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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

GIFアニメーション

アニメーションとは 「アニメーション」は、目の錯覚を利用して残像を連続しているように感じさせることで「動き」を作っています。 たとえば、先日の「GIFアニメ:swingbird」の場合、軸の基準点に対し「回転」があることにより動いているように見えていま…

境界線を調整を使って切り抜き写真

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

選択範囲

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

Photoshopを使う

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

CSSによるページデザイン

CSS

初学者のCSS CSSを理解しようとして、いまネット上にあるプロの解釈を読むと、頭が混乱すると思います。 日本語ですら、まともに作文を書くことができるようになるまで何年もかかりました。まだ勉強を初めて1周間です 原理原則、現在の傾向といろいろあるWe…

Webページのテキスト

CSS

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

リセットCSSと書体指定

CSS

初学者のCSS CSSを理解しようとして、いまネット上にあるプロの解釈を読むと、頭が混乱すると思います。 日本語ですら、まともに作文を書くことができるようになるまで何年もかかりました。まだ勉強を初めて1週間です 原理原則、現在の傾向といろいろあるWe…

文字の囲みと表の枠線

CSS

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

長方形だけでロゴを描く

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

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

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

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

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

CSSで装飾 - 演習

CSS

CSSで装飾 - 基礎演習 style要素をエンベッドして、以下の問いに答えなさい CSS01 h1要素「CSSの使い方」を記述し、赤色に表示されるよう設定しなさい CSS02 CSS01の記述を、背景色「青色」・文字色「白色」に変更しなさい CSS03 CSS02の余白を10pxに変更し…

ボックスモデル

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. 見出しの色を赤く…

CSSからWebデザインを習得

CSS

CSSとは テキストP.64〜 CSS(Cascading Style Sheets)HTML文書に装飾・レイアウトをほどこすための言語 タグまたはタグに付与した名前をもとに、そこに適切な値を設定しブラウザーがその値をもとに表示できるようにする言語 勉強のステップ Webサイトを見…

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

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

マークアップのルール

覚えておきたいマークアップのルール テキスト、P.035 要素の入れ子(ネスト)と親子関係 POINT テキスト、P.037 アークアップの肝は、コンテンツの内容を理解して「文書構造」を見つけること HTMLの文書構造の基本は「見出し」「段落」「箇条書き」 要素の…

形の変形

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

描画

描画(描く) 基本的に、すべてを「ペンツール」で描きます。 いわゆる「鉛筆」などのメタファーではなく、力学の理論構造で線が描画されます。 ドラッグをして描く 長方形も楕円形も手の軌跡は同じです。 クリックして描く ドラッグしたときと同様、基準点…

目的と使い方

Illustratorの役割 コンピュータを扱う仕事の中では、コンピュータの特徴である「複製」を利用することが鍵です 「デザイン」的な視点でいえば、「対称(シンメトリー)」を利用して「画面上の安定」をつくります 周りにあるモノの中にある「シンメトリー」…

Illustratorとは

Illustratorを起動 ベクター(Vector)データを作るアプリケーション 新規書類作成 必ず新規書類を作成することが必要です。(机の上に紙をおいて準備する。) [ファイル]ニュー → [新規] 練習用のファイルサイズは、各自のモニタにあわせます。 初心者は「…

Adobe Brakets

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

HTMLの入力

記述の練習の準備 管理フォルダーを作成 Cドライブ直下に「自分の名前を英字」フォルダーを作り管理しなさい その中に「0422」を作り、データを管理します ※このとき、フォルダー名・ファイル名に日本語を使用しないこと! ブラウザに情報を表示するためには…

ブラウザ

ブラウザ 実際にはここに至る過程の中で、どのサイトを利用すればよいかなど、検索結果に対して何らかの判断をしています まず、知りたいことがあり 次に、検索をして その結果得られた情報が自分にとって必要か不必要かを判断する そもそも検索には、どのブ…

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

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

インターネットとは

インターネットの基本 コンピュータとコンピュータで情報の共有をしたり、データをやりとりしたりするために、コンピュータ同士を接続したものをネットワークと呼びます インターネットは、このLAN(Local Area Network)やISP(Internet Service Provider:…

インターネットへの道程

インターネットへの道程 ハイパーテキスト(hypertext) 複数の文書(テキスト)を相互に関連付け、結び付ける仕組み ハイパーリンク:テキスト間を結びつける参照のこと 「インターネット = WWW」ではない WWWは、インターネット上の一機能でしかない WWW以前…

コンピューターとは

コンピューターとは computer は、広義には計算機、狭義には計算開始後は人手を介さずに計算終了まで動作する電子式汎用計算機 現代ではパーソナルコンピューターからスーパーコンピューターなどを含めたデジタルコンピューターを指す つまり計算をしてくれ…

パソコン病(VDT症候群)の予防・対策法

VDT作業における労働衛生管理のためのガイドライン 新しい「VDT作業における労働衛生管理のためのガイドライン」の策定について VDT症候群とは Visual Display Terminals

パソコンを使ってみる

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

Webデザインの勉強 04月20日開講クラス - 初心者の勉強を継続するための準備

初心者の勉強 入力練習をするためのオンライン学習ツール「Code Drill」の使い方に慣れましょう 次に心がけておくことは「検索」の精度を上げるようにすることです Code Drill とにかく、文字入力の練習をしましょう はじめて見る英単語が多いと思うので、複…

レスポンシブWebデザイン - 応用

レスポンシブWebデザイン - 応用 テキスト P.337 <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Cafe Leaf</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="format-detection" content="telephone=no"> </meta></meta></meta></meta></head></html>

レスポンシブWebデザイン - 実践

レスポンシブWebデザイン - 実践 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CASA BLANCA</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </link></meta></meta></head></html>

初めてのメディアクエリ

初めてのメディアクエリ 1月開講クラス(2カラムまとめ) <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS Layout</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> /* reset ----------------------------------------------------------*/ html, body, p { margin: 0; padding: …</meta></meta></head></html>

フルードレイアウト

レイアウトの設計 「article」を「main」に変更します 画像は、適宜作成すること main「1000 x 300」 01「620 x 300」 02「300 x 120」 03「300 x 120」 Responsive Web Design HOME ABOUT SAMPLE TIPS ウェブは柔軟な媒体である テキスト文書だったWebをデ…

予約システム

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

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

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

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

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

ゲストブック - データベースに値を挿入

フォームに入力されたメッセージをデータベースに追加する INSERT文を組み立てて実行する 追加画面→追加確認画面→追加完了画面 追加完了画面でINSERT文を実行するには、入力フォームに入力されたメッセージを$_POSTや$_SESSIOを経由して受け渡し、その値をも…

ゲストブック - 確認画面作成

確認画面作成 SESSIONデータを使ったエラーチェック 未入力のエリアがあった場合に、入力画面に戻す 《confirm.php》

ゲストブック作成 - データ追加機能

データ追加機能を作る 追加画面(index.php) 追加確認画面(confirm.php) 追加完了画面(submit.php) 追加画面の基本構造 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ゲストブック</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>ゲストブック</h1> <form method="post" action="confirm.php"> <table> <tr> <th>名前</th></tr></table></form></body></html>

ゲストブック作成 - 設計

ゲストブック ホームページを訪れたゲストにメッセージを投稿してもらう データベースの処理 「何を」「何処に」「どのように」記述するかを決める ゲストブックの構成 何を記述するか 追加(CREATE) 読み取り/表示(READ) 変更(UPDATE) 削除(DELETE) …

お問い合わせフォームの自動返信機能を追加

PHP

入力された内容を自動返信 《index.php》

スクロール後ナビゲーションをトップに固定

スクロール後ナビゲーションをトップに固定 PCサイズのみの場合 すぐ使えるダミーテキスト - 日本語 Lorem ipsum <html lang="ja"> <head> <meta charset="UTF-8"> <title>スクロール後、ナビゲーションをトップに固定</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> </link></meta></head></html>

ページトップへスムーズスクロール

ページトップへ(基本) この例はPNG画像ですが、CSS3やFont Awesomeなどの指定も試してみましょう 【例1】フェードインして表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページトップへ移動</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <style> #content { height: 2000px; } /*top btn ----…</meta></head></html>

InVison(インビジョン)

InVison(インビジョン) InVisionはアプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービスです

プロトタイプ以前

ダミー画像配信サイト Dynamic Dummy Image Generator PLACEHOLD.IT ダミーテキスト生成サイト Dummy Text Generator すぐ使えるダミーテキスト - 日本語 Lorem ipsum

Style Tiles

Style Tiles プロトタイプのテンプレート styletil.es

関数

PHP

連想配列

PHP