田中先生
8 プログレスバー HTML <htmllang="ja"> <head> <title>Bootstrap 101 Template</title> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <linkhref="css/bootstrap.min.css"rel="stylesheet"> </linkhref="css/bootstrap.min.css"rel="stylesheet"></metaname="viewport"content="width=device-width,></metacharset="utf-8"></head></htmllang="ja">
株式会社 ZEAL.G·P 事業内容:トラック、バス、重機などの商用車専門の買取り及び輸出、販売 業務内容:コーディング PHPとWordPressができるとよし。
BootStrap Download Bootstrapからダウンロード Getting started→Basic templateのソースを新規HTMLファイルに貼り付け ドットインストール→Bootstrap 3.0入門 (全18回) Twitter Bootstrapとは Webデザインのテンプレートのようなもの。 具体的には、HTMLの…
ほくろ除去 パッチツールを使う。 やり方はこちら。 目の拡大 ゆがみフィルタを使う。 やり方はこちら。 眉毛 焼きこみツール 切り取り 被写体と周りがはっきり分かれていれば、自動選択ぼかし20でまわりクリック。細かい点が残ったらshift+長方形で囲う。 …
作例5 テキストP.100 トランジションの練習 <ahref="#">ボタン</a> a{ display:block; color:#fff; width:100px; padding:10px; text-align:center; background:blue; text-decoration:none; transition-property:background,width; transition-duration:1s; transition-tim…
.htaccessでの振り分け 「○○/index.html」にスマートフォンでアクセスした時に、スマートフォン用サイト「○○/sp/index.html」に移動させる。 .htaccessファイルの作成 Dreamweaverやメモ帳などなんでもいいのでテキストで作成。 <IfModule mod_rewrite.c> RewriteEngine On RewriteCo</ifmodule>…
ポートフォリオサイトはレスポンシブで作りましょう。 レスポンシブでないものは検索評価が落ちる傾向。 PC(win)でモバイルチェックするにはMobilizer。 子孫セレクタを使おう スマートフォン用のリセットCSS 作例1 テキストp53 HTML head viewportの設定…
先生がサイト制作関係のwebサイトを使って講義をしているのを聞きながら、各自制作を進める。 マンセルのカラーチャートのサイト:HUE/360 色ツールまとめサイト:creive スマートフォンサイト制作では、色を16進数ではなくCSS3から採用されたRGBAで記述する…
要件定義書の作成 cacoo登録。作成はcacooで行う。 作成例として過去の受講生の要件定義書を紹介。 内容は、 サイトの目的 ターゲット(ペルソナ) キーワード(検索用) 使用する色(3・4色。カラーチャートで) あれば参考サイト サイト構造設計(サイト…
Favicon作成 先生が配布したケーキのイラストをPhotoShopでFavicon生成用に加工する。 多角形選択ツールでケーキ以外の部分を選択してdelete。 イメージ→モード→RGBにしてpsd形式で保存しておく。 Faviconのサイズにしても何の絵かわかるように色を調整する…
サイト制作の実務手順書をスキャンしたものを先生から配布してもらう。 ペーパーテストの問題は、この中から出題するとのこと。 実際にサイト制作していくにあたって、要件定義書、ヒアリングシート、ワイアーフレーム、制作仕様書、ガントチャートをつくる…
クライアントからの改修依頼があったという設定。 ビルボード画像 先生が配布したPSD形式の背景画像で作業。 長方形を描くときはアンチエイリアスのチェックを外す。 画像に不透明度60の帯を重ね、キャッチコピーを乗せる。 文字ごとのカーニングはalt←・→で…
ビルボード画像の任意の範囲にリンク領域を設定する DreamWeaverのデザインビューを開き、プロパティのマップ項目にあるホットスポットツールを使う。プロパティの下半分が表示されない場合は、プロパティ内のスペースでダブルクリックすると表示される。 任…
ファビコン(雨粒) 丸を描いて、頂点のパスをアンカーポイント切り替えツールでクリックして尖らす。上に伸ばしたりして形を調整。 薄い色で縦長の楕円を描いて重ねる。 ファビコン(星) 星ツール。 ファビコン(吹き出し) 足 楕円を2つずらして重ね、パ…
ユミの部屋メイン画像 先生が配布する素材画像を組み合わせてつくる。 ガイドで範囲を決める。 背景のケーキ画像を読み込み、レイヤーでマスクを追加してグラデーションツールで白地になじませる。 ケーキ画像のクッキーをなげなわツールで選択、コピー。プ…
店舗紹介ページ (前回のつづき)CSSでtable部分を指示通り入力。 商品購入ページ template.htmlを別名保存。 HTMLでform部分を指示通り入力。 トップページ template.htmlを別名保存。 FireWorksでカンプから画像切り出し。 新着情報はdlではなくpで記述。 …
3枚重ねのシャツ ベースはグラデーションつきの角丸。コピーして3枚重ねたら選択、効果→パス→パスの変形 で台形に変形させて奥行きを出す。 襟もとは、内側を2つの楕円に濃淡差をつけて重ね、襟と影をペンツールでパスを設置して作る。 ボタンは、影を黒…
HTML <htmllang="ja"> <head> <metacharset="UTF-8"> <title>ECOLOGY</title> <linkrel="stylesheet"href="style.css"> </head> <body> <divid="container"> <divid="header"> <h1>ECOLOGY【エコロジー】</h1> <p>Computer Technology Groupsでは、<br> グループをあげてエコロジー/環境問題に取り組んでいます。<br> 成果や実績を地域に還元することもポリシーとしています…</p></divid="header"></divid="container"></body></htmllang="ja">
htmlデータは先生から配布。 商品紹介ページ(チーズスフレ、苺のバースデーケーキ、焼菓子詰め合わせ) FireWorksでカンプから画像の切り出し。 各ページの内容(div id="main")の画像(タイトル、商品画像、購入リンクボタン)を切り出し。 DreamWeaverで…
facebookのグループからデータをダウンロード。 中身は全ページのカンプ、baseのCSS、ナビゲーションのIMG。 カンプから画像切り出し FireWorks 各カンプをページごとに読込み プロパティで座標指定X:0 Y:0 webレイヤーに切り出す素材 ガイドを引く→スライス…
HTMLの変遷 HTML4 tableでレイアウト。 XHTML マークアップを見直し、HTML→文章構造、CSS→装飾に分業。 HTML5 表記統一。 現在、HTML5に完全対応でしているのは、Google Chrome、Android各ブラウザ、iPhone Safari。 HTML5のマークアップ HTMLタグのhr、br、…