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

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

楕円形だけでロゴを描く

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 ) {…

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

フォームに入力されたメッセージをデータベースに追加する 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》

ゲストブック作成 - 設計

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

入力フォーム - 実践

PHP

入力フォーム - 実践 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>メールフォーム</title> <style> section { width: 500px; margin: auto; text-align: center; } table { text-align: left; } td { padding: 3px; } </style> </head> <body> <section> <h1>入力画面</h1> <p>必要事項を入力して「確認する」ボタンをクリ…</p></section></body></html>

セッション

PHP

セッション管理 クッキーは、クライアント固有の情報を保持するには良いですが、非常に小さいサイズのテキスト情報しか保存できません そのため、ショッピングサイトのカート情報など、より多くの情報を保持するのに「セッション」と呼ばれる機能を利用しま…

SQLを使う - SELECT文

SELECT文の基本機能 SELECT文は、データベースからデータを抽出するコマンドです 射影:特定のフィールド(列)だけ取り出すこと 選択:特定のレコード(行)だけを取り出すこと SELECT文の基本構文 テーブルに登録されている全てのレコードを取り出したり、…

SQLを使う - 基本

SQLは何のため? phpMyAdminのマウス操作だけで作ることができるSQLには限界がある PHP+MySQLを使ったWebシステムを構築するには、SQLの知識が必須あ phpMyAdminを利用する phpMyAdminにアクセスする データを取得して表示する localhostでデータベース一覧…

リレーショナルデータベース

リレーショナルデータベース テーブルと呼ばれる領域にデータを保存していきます リレーショナル型データベースは、RDB(アール・ディー・ビー)とも呼ばれます RDBの構造 RDBは、関連するデータを全てテーブルと呼ばれる2次元の表にデータを格納します テー…

データベースとは

データーベース(database, DB) 情報を管理するためのシステム(データベース管理システム DataBase Management System : DBMS) 特定のテーマに沿ったデータを集めて管理し、容易に検索・抽出などの再利用をできるようにしたもの 単位としての「データベー…

入力エラーチェック

PHP

入力エラーチェック ≪index.php≫

入力された値の変数と型

PHP

型 intval関数(文字列を整数に変換する)- 小数点以下は切り捨て ユーザーが入力したデータは「文字列型」です 「文字列型」のまま四則演算ができないため「整数型」に変換します 《sum.php》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>変数と型</title> </head> <body> <form action="result.php" method="post"> <p>数字1 <input type="text" name="val1"></p> <p>数字2 </p></form></body></html>

入力された値を送信→受信

PHP

送信するために必要なこと form要素でmethod属性を記述します method属性には、送信方法を記述します inputされた値を別のページに送信しますa 入力された値の器に名前をつけて送信します 送信するタイミングをinput要素のtype属性「submit」で、ボタンの表…

ユーザーとの対話

PHP

ユーザーとの対話 入力フォームに入力されたデータは、「$_GET[ 名称 ]」や「$_POST[ 名称 ]」取得できます 出力 ブラウザに表示 《例1》 変数を{ }で囲む Dreamweaverでは、変数の色にならないため判別しにくくなります 《例2》 文字列と変数を「. ドッ…

PHPを学ぶ

PHP

Progate prog-8.com CODEPREP codeprep.jp Progra! パイザ・ラーニング paiza.jp コーディング道場 http://www.coding-doujo.jp/books/1www.coding-doujo.jp

FlexSliderで横スライダー

FlexSlider <html> <head> <meta content="charset=utf-8"> <title>FlexSliderで横スライダー</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="css/flexslider.css"> <style> body { background-color: #42A2…</link></meta></meta></head></html>

bxSlider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> スライド画像の設定 …</link>

Slider

SLIDERJS SlidesJS 3.0 <html lang="ja"> <head> <meta charset="utf-8"> <title>SlidesJS Standard Code Example</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/example.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> body {…</link></link></meta></meta></head></html>

フィルタリング

フィルタリング 特定の要素のみまたは組み合わせで、該当するもののみを表示します MixItUp プラグインをダウンロード フィルタリング機能を実装 追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></link></meta></head></html>

Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…