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

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

HTML・CSSの操作

HTMLの操作 要素内のテキストの設定・変更やHTML要素の設定・変更など テキストの設定 要素内のテキストを設定する場合は、text( )メソッドを使用します $(function(){ $( '#txt' ).text( 'テキストが変更されました' ); }); 《テキスト内容を取得する場合》…

関数とメソッド

jQueryの関数 jQueryは、関数オブジェクトです JavaScriptは、プリミティブ型とオブジェクト型で構成される プリミティブ型は、変数として使う型 それ以外はオブジェクト型です <script> $(function() { alert( typeof( jQuery ) ); }); </script> typeof 演算子を使って、引…

セレクタの使い方

最低限、使うものだけ覚える すべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前でも、script内で…

セレクタ

セレクタとは 名前、属性、状態などによりドキュメント内の要素を選択する役割 セレクタの書き方 先頭に「$」を記述 「$」は、jQueryオブジェクトのインスタンス $( '要素' ) セレクタを使用するときの注意点 セレクタを使用する場合は、jQueryへのアクセス…

jQueryの基本

よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート(ブラウザ依存を気にしなくてよい) 記…

Responsive Web Design(レスポンシブWebデザイン)

Web閲覧環境の多様化 Android端末の多様化 スマートフォンで表示されるWebページはより柔軟性のある実装を求められる状況にあります モバイルファースト モバイルファーストの実践とは、モバイルインターネットの爆発的な成長にただ備えるだけではない。ユー…

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

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

2カラム演習 - モンサンミシェル

2カラム - モンサンミシェル Mont-Saint-Michel | Voyage en FRANCE フランスの旅 フランス国旗 モンサンミシェル フランスで最も人気のある観光地の一つで、「フランスの驚異」と呼ばれる絶景です。堤防からラヴァンセ門をくぐると、おみやげ店やレストラ…

DOMの記述演習

DOMの記述のアセットを作る 閲覧者が実行ボタンを押したときに、はじめて実行される その実行命令が、セレクタ(id名)に対して行われる <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMの操作</title> </head> <body> <p><button onClick="action()">ボタンを押すと実行</button></p> <div id="ans">ここに表示する</div> <script> function action(){ } </script> </body> </html>

DOM まとめ

ダイナミックHTML JavaScript のようなクライアント側のプログラムを使って HTML の内容を動的に変化させる概念を、「ダイナミックHTML」 といいます 「JavaScript」 から HTML の内容を制御する事ができるので、HTML が動的に変化するインタラクティブなコ…

for文 演習課題

演習課題 変数を入れてconsoleに表示 入力された値を取得して、ブラウザに表示 和暦(平成)と西暦の変換表 平成1年は、西暦1989年 <html lang="ja"> <head> <meta charset="utf-8"> <title>和暦・西暦の変換表</title> <style> table { width: 200px; margin: 50px auto; border: 1px solid #AAA; border-collapse: collapse;</meta></head></html>…

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

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

条件分岐 - switch文

switchとは if文と同様に分岐処理を行います if文を簡略化してよりすっきり記述するための構文です ある変数の中身が一致するかという判断を行います switch(変数) { case 値1: 変数の中身が値1に一致した場合の処理 case 値2: 変数の中身が値2に一致した…

if文 演習課題

消費税計算のプログラム <html lang="ja"> <head> <meta charset="utf-8"> <title>消費税計算のプログラム</title> <script> function taxPrice() { //閲覧者の入力の値を取得 var price = prompt( '価格を半角数字で入力して下さい', '' ); //prompt()で習得した値は、文字列になります //文字列は、数値に変換しないと演算には</meta></head></html>…

条件分岐 - 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を書き換えることができる イン…

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