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

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

ボックスモデル

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)定規を表示する。 定規を表示しガイドを利用すると描きやすくなります。 [画面]メニューから「定規を表示…

Illustrator - トレースとは

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

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クリエイター能力認定…

Illustrator - 曲線の練習

曲線を描く S字曲線を描く 連続した曲線を描く 連続した直線・曲線を描く

Illustrator - 直線の練習

直線の修正 右クリック(コンテクストメニュー)で画像を保存 新規ドキュメントに「テンプレート」のみにチェックをして配置 トレース(描き終わる) 点線の位置までアンカーポイントを移動修正 クローズドパス 水平・垂直・45°の直線

Illustrator - 描画

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

Illustrator - 形の変形

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

Illustrator - 目的と使い方

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

Illustrator - Illustratorとは

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

初心者の入力とマウス

初心者の勉強:入力の練習 初めてWebの勉強をする人にとって、キーボードで見たことのない英語の語句を入力することは、なれるまでに時間が必要です 以下の、ネットサービスを利用してみましょう コードドリル HTML&CSS|タイピング|mr100 Mac版Chromeには…

Gmailアカウントの作成

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

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

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

いろいろな文字を入力してみる

カタカナ表記の悩ましさ 「音引き」または「長音符号」(ー) 日本工業規格の「Z8301:2005 附属書G(規定)文章の書き方、用字、用語、記述符号及び数字」 G6「用語及び外来語の表記」 G.6.2.2 英語の語尾に対応する長音符号の扱い英語の語尾に対応する長音…

パソコンの操作

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

Windows 10デスクトップ使い方ガイド

Windows 10デスクトップ使い方ガイド(PDF) 以下、PDF内容の抜粋(リンクではありません)

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

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

レスポンシブWebデザイン - 演習(2)実践

レスポンシブWebデザイン - 演習(2)実践 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーン画像の設定</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="style4.css"> </head> <body> <h1><img src="img/logo.svg" alt=""></h1> </body></html>

レスポンシブWebデザイン - 演習(2)

レスポンシブWebデザイン - 演習(2) ブラウザの高さを取得する単位「vh(viewport height)」 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> html, body { margin:0; padding:0; } .box { box-sizing: border-box; } .box…</meta></meta></head></html>

レスポンシブWebデザイン - 演習(1)解答例

レスポンシブWebデザイン - 演習(1)解答例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン 演習(1)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">…</link></meta></meta></head></html>

レスポンシブWebデザイン - 演習(1)

レスポンシブWebデザイン - 演習(1) 設計図の作成 物作りは設計図の用意から始まります。機能や構造、配置などを明確にしていくことで、必要な部品、材料、工数、工程、時間など、さまざまな情報が出てきます。 画像「768 x 512」 また、設計図を用意する…

CSS3で作るホバーアニメーション(2)

キャプションを表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>transitonによるアニメーション</title> <style> /* reset ------------------------------------*/ html, body, h1, h3, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { b…</meta></head></html>

CSS3で作るホバーアニメーション(1)

CSS3で作るマウスオーバーアニメーション 背景色が変化するアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色が変化するアニメーション</title> <style> html,body, h1, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul {</meta></head></html>…

グリッドレイアウト

グリッドレイアウト <html lang="ja"> <head> <meta charset="UTF-8"> <title>グリッドレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div class="block"> <header> <h1></h1></header></div></div></body></html>

CSS3メディアクエリ

メディアクエリ メディアクエリは、ウィンドウのサイズやモニターの物理サイズ、画面密度やデバイス向きなど、閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能で、CSS2.1の時代から使われている media属性の拡張として定義されてい…

アニメーション - transition(トランジションアニメーション)

transition(トランジションアニメーション) transition は、「:hover」などの動作をきっかけとして、アニメーションでプロパティの値を変化させることができるプロパティです

変形 - transform-origin(変形の原点)

transform-origin(変形の原点) ローカル座標の原点は、transform-origin の値を変更することでいつでも変更できます 変形の原点を変更する

変形 - transform(変形)

transform(変形) transformプロパティは、二次元座標での変形を行うプロパティです 値に translate( ) / scale( ) / rotate( ) / skew( ) の4種類のトランスフォーム関数を取り、それぞれ移動・拡大縮小・回転・傾斜させることができます 移動の書式 tran…

背景画像とグラデーション

CSS3セレクタ

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を含み…

メディアクエリ実践

メディアクエリ実践 <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブWebデザイン</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>メディアクエリ</h1> <p>メディアクエリを使うと、ブラウザのウィンドウ幅に応じて各要素…</p></div></body></html>

レスポンシブWebデザインの基本構造

レスポンシブWebデザインの基本構造を作る 768px以上をPC用とする モバイル向けメディアクエリのwidthの決め方 タブレット(iPad) 768px スマートフォン横 480px・568pxなど スマートフォン縦 320px・360pxなど /* メディアクエリの設定 */ @media (orienta…

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

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

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

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

超簡単デプロイ

WordPressのデプロイ ロカールのデータをリモートに移して正しく表示させる ローカルからのバックアップ 「ツール」→「全てをエクスポート」(例:wordpress.xml) 「wp-content」→「uploads」フォルダー 「wp-content」→「themes」→「mytheme」 リモートサ…