作ってみた
フォーム ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと 目的は、利用者からの情報収集のため <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>…
ポラロイド写真風に加工 写真自体の画質をポラロイドやトイカメラ風にするのではなく、 ポラロイド風のフチ加工です。やり方がちゃんとわからなくて、強引に作ったので何か変です。 おまけに、枠に気をとられて写真のトリミングがひどい。 今度、画質もポラ…
アニメーション アニメーション」を効果的に見せるためには「動き」のある部分と無い部分の「差」を大きく見せることで、より動きを感じさせることができます。 物理法則を利用する 縦方向の動きは重力を意識した動きにする 落ちるときは加速する あがるとき…
Photoshopの目的 初心者がPhotoshopの勉強をするときのポイントは以下の３点です。 選択範囲を決める。（どこをという最初の部分。または主語にあたります。） 補正する。（写真をキレイにします。目的にあった画像にします。） 加工する。（マスクや合成を…
補正（写真をきれいに） すでに移っている質が変化するわけではありません。 デジタル処理できる範囲で、人間が見てきれいと感じる程度に変化させます。 レベル補正 コンパクト・デジタルカメラの特徴である「暗く写る」を、補正します。 元画像 補正後 シャ…
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>
【CSS14】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
【CSS12】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 上・左からの位置は適宜設定 アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
【CSS05】 空きはリセットをせず、個別に指定する アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
【CSS03】 空きはリセットをせず、個別に指定する リストマークは、作成すること アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
【HTML03】インテリアショップ 以前課題をやった時に、コンセプト以下を「定義型リスト」でマークアップしていましたが、この場合、<h2>が適切とのことです。しかし、私が迷っていたのは、「定義型リスト」と<h3>。 なぜ<h3>かというと、<h2>では文字が大きすぎるだろうな、</h2></h3></h3></h2>…
【CSS04】 空きはリセットをせず、個別に指定する アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
3段組レイアウト floatを利用する アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </meta></head></html>
floatの基本 floatは、浮き上がって（浮動）左や右に動くと考えましょう floatは「浮き上がる」という指定なので、幅（width）を指定しない限り「回り込み」にはなりません floatする領域は確保すること アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <…</html>
【CSS01】 アップロードしたページ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
テーブルで2段組 DTDは「HTML 4.01 Transitional」 アップロードしたページ <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>テーブルによる二段組レイアウト</title> </meta></meta></head></html>
floatを使ったレイアウト アップロードしたページ IE6では崩れる IE6では、Aの左のマージン50pxが2倍の100pxで計算されることがある <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
ボックスモデル DOCTYPEスイッチ 互換モード 古いブラウザに合わせた表示モード 標準準拠モード 標準に準じた表示を行うモード DOCTYPE宣言の位置 IE6はXHTML文書のDOCTYPE宣言が先頭にないと互換モードで表示するので、 XML宣言を記述しない （文字コードが…
【HTML02】 <html> <head> <title>【HTML02】文書構造の練習</title> </head> <body> <h1>デザインの話</h1> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p> <p>物にはいろいろな形があります。歴</p></body></html>…
【HTML04】 以下の内容をHTML文章にしてブログに載せなさい DTDは「XHTML 1.0 Strict」 DTDがわからない場合は、テキスト「上級レイアウト」を読むこと </html>
【Web画像03】CDジャケットのデザイン 好きなミュージシャンのオリジナルCDジャケットをデザインしなさい デザインのテーマは「ミニマム」 ムーンライダーズ「NOUVELLES VAGUES」1978年 Illustrator使用 ミニマムデザインの参考にしたサイト 「哲学」という…
【Web画像04】長方形と文字 見本 作成したもの ※タイトルの書体が合わせられませんでした。
CSS課題 </html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
しまWeb|Webデザインの課題ページ 懸案事項だった「課題アップ用サイト」を作りました。 （まだ、全部の課題は入っていません）今はこんなサイトですが、だんだん作り変えて、クォリティをあげていければと思います。 http://islandweb.client.jp
