2012-05-01から1ヶ月間の記事一覧
小規模宿泊施設のサイト プレゼンに出したいのが民宿のホームページなので、参考サイトのワイヤーフレームの練習です。 既存サイトの研究 お手本になる既存サイトを探そうと、「沖縄 民宿」で検索しましたが、トップから3P目までいってもふさわしいサイトが…
以下の指示通りに表示するよう記述しなさい。講師日和 DTD・セレクタ名・背景色は、自由選択 ナビゲーションは、擬似クラスを設定すること 各ブロック同士の空きは、「10px」 幅「800px」を前提に、他の数値の変化は適宜おこなうこと 可変しないものとする …
レイアウトの配置は、まずcontainer内側にpaddingで余白を確保する 訂正したもの アップロードしたページ @charset "UTF-8"; * { margin: 0; padding: 0; } body { background-color: #CCC; } #container { width: 780px; margin: 0 auto; background-color:…
以下の指示通りに表示するよう記述しなさい。講師日和 DTD・セレクタ名・背景色は、自由選択 ナビゲーションは、擬似クラスを設定すること 各ブロック同士の空きは、「0」 可変しないものとする 作成したもの アップロードしたページ
写真は色の宝庫 写真を開く １列選択ツールで、写真を縦に上から下まで選択する 「イメージ」→「切り抜き」 「画像解像度」で縦横の比率のチェックをはずし、横幅の値を大きくする 一部をボタンや見出しの背景画像として使う 伊江島のお花畑 飛行機から見た…
雲の浮かんだ空の作り方 新規ファイルを作成する カラーパレットの「描画色：青」「背景色：白」にする 「フィルター」→「描画」→「雲模様１」 [Ctrl]キー+Fを押すと雲の形が変わるので、気に入った雲の形の空にする
Flashムービー PhotoshopのレイヤーをFlashのレイヤーにコンバート 各写真を「シンボルに変換」 時間を設計しながら「キーフレームの挿入」 モーションを設定 各レイヤーをクロス状態にずらしていく 必要があれば、ActionScriptを記述する 作成中 Flashは全…
F2層とは性別や年齢層を表わす言葉で、35歳〜49歳の女性を指します。 階層の分け方 C層：4歳〜12歳の男女（Child） T層：13歳〜19歳の男女（Teen-age） F1層：20歳〜34歳の女性（Female-1） F2層：35歳〜49歳の女性（Female-2） F3層：50歳以上の女性（Femal…
ワイヤーフレームでレイアウトパターンを作成 カンプにするパターンの面に色塗り、レイヤーに分ける Photoshop形式で書き出す ワイヤーフレームの練習 最初の段階では、既存のページをもとにブロックをつくる練習をします 慣れてきたら、自分のアイデアにそ…
floatの場合 アップロードしたページ <html lang="ja"> <head> <meta charset="UTF-8"> <title>header（1）</title> <style type="text/css"> html, body, div, h1, h2 { margin: 0; padding: 0; font-size: 1.0em; } body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック"…</meta></head></html>
「Web画像の勉強」で解説していただきました。ありがとうございます。 写真から作るのではなく、土台から作ることがコツ 新規ファイルを作成（550px×450px）して、背景色を塗る 新規レイヤー（レイヤー1）を作成し、画像の土台部分を選択して白く塗る 土台の…
基本形（1） アップロードしたページ <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの練習（1）</title> <style type="text/css"> <!-- #myform label { font-size: 0.875em; margin-bottom: 3px; display: block; } --> </style> </head> <body> <form action="#" method="post" id="myform"> <p> </p></form></body></html>
tableでのレイアウト 表示の崩れがなくなる 色が付けやすくなる アップロードしたページ <html lang="ja"> <head> <meta charset="UTF-8"> <title>テーブルで組むフォーム</title> <style type="text/css"> </meta></head></html>
Googleドライブとは？ 「Google ドライブ」は文書などのファイル作成・保存、既存ファイルの取り込みができる「Google ドキュメント」が大きく進化したサービスです。 単にファイルをオンラインで保存できるだけでなく、PC内のデータをオンラインや複数のPC…
縦並びのナビゲーション paddingは問題なし marginは相殺される display: blockの利用はボタンとして反応させる為に「アンカー」に対して、マウスの動きに反応する「面積」を設定する ※設定していないとリンクの文字しか反応しない autoは0と同じで、中に文…
フォーム ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと 目的は、利用者からの情報収集のため <form> <p><input type="種類"></p> </form> お問い合せフォーム Mozilla Firefox Google Chrome FirefoxとChromeでは、表示がかなり違うんですね。 アップロードしたページ <html lang="ja"> <head> <meta charset="UTF-8"> <title></title></meta></head></html>…
ポラロイド写真風に加工 写真自体の画質をポラロイドやトイカメラ風にするのではなく、 ポラロイド風のフチ加工です。やり方がちゃんとわからなくて、強引に作ったので何か変です。 おまけに、枠に気をとられて写真のトリミングがひどい。 今度、画質もポラ…
アニメーション アニメーション」を効果的に見せるためには「動き」のある部分と無い部分の「差」を大きく見せることで、より動きを感じさせることができます。 物理法則を利用する 縦方向の動きは重力を意識した動きにする 落ちるときは加速する あがるとき…
Flashの役割 初心者がつくる「動的コンテンツ」のパッケージ プレゼンテーションツール ビデオコンテンツなどのインターネット配信 ActionScriptを利用した「UI」 データベースと連動させたリッチコンテンツ AIRアプリの作成 ActionScript ActionScript3.0：…
ポストカードデザインあれこれ Showcase Of Inspirational Postcards Designs このポストカードのデザインを見ていたら、知っているロゴがひとつありました。どんな商品のロゴかわかりますか？これ、「キルメス」っていう、アルゼンチンで一番ポピュラーなビ…
Photoshopの目的 初心者がPhotoshopの勉強をするときのポイントは以下の３点です。 選択範囲を決める。（どこをという最初の部分。または主語にあたります。） 補正する。（写真をキレイにします。目的にあった画像にします。） 加工する。（マスクや合成を…
補正（写真をきれいに） すでに移っている質が変化するわけではありません。 デジタル処理できる範囲で、人間が見てきれいと感じる程度に変化させます。 レベル補正 コンパクト・デジタルカメラの特徴である「暗く写る」を、補正します。 元画像 補正後 シャ…
positionとは positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法（基準位置）のみ static（静的） 特に配置方法を指定しません。 この値のときには、top、bottom、left…
floatを使ったレイアウト 制作したもの アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
【CSS18】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <…</head></html>
【CSS19】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <…</head></html>
【CSS20】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <…</head></html>
【CSS15】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 以下のソースだと、1か所クリックすると、すべて訪問済みになってしまいます。 要修正！ リンク1〜5を分けて指定しなくてはいけないはず。 アップロードしたページ
【CSS16】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
【CSS13】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
