CSSでテキストのスタイルを設定しました。文字を飛ばす為にem{visibility:hidden;}で設定したのですが斜体で表示されてしまいました。他は全部上手くいきました。 @charset_"Shift_JIS"; /*基本設定ここから*/ body{ color:#555555; text-decoration:none; }…
今日から応用コースに入りました。初めての授業に比べてマークアップがスラスラと入力できるようになったと思います。CSSも同じようになるともっと楽しくなるんだろうなと思います。次回のCSSの授業もとても楽しみです。今日勉強した事をまとめました。 XML…
「セブン＆アイ・ホールディングス」のサイトより利用させて頂きます。 <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>
以前働いていた会社で、テンプレートで作られたページのテンプレート部分を修正した事があるのですが、「修正」→「テンプレートから切り離す」もしくは「オリジナルから切り離す」で修正したような覚えがあります。元のテンプレートを残して、そのページだけ…
フォーム 文字化け対応の為、「enctype="text/plain"」を記述します。（企業では記述しない） <input name="email" id="email" type="text">」のname属性とid属性はセットで記述します。 CGIによってフォームを処理するワークフロー 1.HTMLファイルに「<form method="post" action="cgi-bin/formmail.cgi">」と指定します。 2.formmail.cgiをTeraPadで開く。</form>…
今日はフォームの作成、CGIプログラムの修正、ファイルのアップロード、Dreamweaverでのテンプレートの作成を勉強しました。インデックスやリンク、インターネットに早くページを公開する事や動的なページが意味がないなど内容がとても深かったです。とても…
ボタンを押すと円が上下左右に動くActionScript ボタンから他のムービークリップを動かす命令（パスは絶対パス） 上と右に動くように記述をしたのですが、上に動くボタンが上手くいきませんでした。 右へ移動するのと同じように記述したら成功しました。 上…
先生のブログより、Flashで消えながら次の写真へ変化させる練習をしました。インスタンスが同じタイミングで表示が変わるように設定してから時間軸をずらす事が良く分かりました。 1.写真をライブラリに読み込ませ、レイヤーごとに写真を配置してシンボルに…
Flash Flashは本を見ていると難しく感じましたが、実際に作業をしながらだったので分かり易かったです。 以前、Flashで「進む」と「戻る」のページを作成した事があったのですが、最後が上手くいかず「進む」ボタンを消していたのですが今回の授業でどうした…
昨日の画像を書きだしてテーブルレイアウトのコーディングをしました。テーブルで空きをあける場合はCSSで設定せず、HTMLに直接、幅や高さを指定する。 HTML <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </meta></head></html>
「銀座菓楽」のサイトを利用させて頂きます。スライスして画像のみを書き出します。 この場合３つのテーブルに分けて作ります。 １つ目のテーブル（ロゴとナビゲーション、メインイメージ） ２つ目のテーブル（トピックスとバナー） ３つ目のテーブル（著作…
今日は主にテーブルレイアウトについて勉強しました。アクセシビリティ、ユーザビリティ、Photoshop、Fireworksで作成するスライスの違いや、スペーサーGIFを入れる意味、パターンの作り方などとても充実した１日でした。特にテーブルについて分からなかった…
Photoshopデータにしてガイドを引きました。ビュー→スナップになっているのを確認して、レイヤーを選びCtrl＋クリックで選択してガイドを引く。
ワイヤーフレーム作りました。後程詳しい作業過程をのせます。
1.Illustratorでワイヤーフレームを作り、書き出し→ファイルの種類：psd→カラーモード：RGBを選ぶ→レイヤー保持にチェック→アンチエイリアスをオフにする。 2.Photoshopで開くとレイヤーが分かれているので、Ctrl＋クリックで選択してガイドを引くとスナップ…
ワイヤーフレームからカンプ作成 Illustrator 1.Firefoxのアドオン「Pearl Crescent Page Saver Basic 2.0」からページ全体のキャプチャーを取る。http://pearlcrescent.com/products/pagesaver/ 2.新規ファイルに配置し、リンクのチェックを外して、テンプ…
h1の意味 本文の中の重要なキーワードを含めた一文。本文のキーワドと見出しのキーワードが一致するように記述。この一致がとても大切。 kyewords <meta name="kyewords" content="○○,○○,○○,○○,○○" /> キーワードは5個記述する。 description <meta name="description" content="○○○○○○" /> キーワードを含めた文章で100文字程度作成。各ページに合わせた内</meta></meta>…
２つの画像をXHTML内に記述して画像を切り替えるやり方です。今日はノートを見ないで打てるようになるまでを目標に、もくもくとタグ打ちの練習をしました。次に何を打てば良いかが分かってくると早く打てました。 HTML <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
２つの画像を用意して、CSSで背景画像に記述して切り替えるやり方です。 名前をclassで指定して画像置換の練習をしました。「#case1」、「#case1 ul」に全体の横幅と高さを記述。「#case1 ul li a」には1つの画像の横幅と高さを指定。「display:block;」と「…
今日はCSSを使った画像置換、単純なJavascriptの画像置換、ナビボタンの作成、h1の意味、Daniel Nolan「rollover.js」ロールオーバーの置換、Dreamweaverの使い方を勉強しました。最後にロールオーバーの置換がうまくいかなかったので、忘れないうちに画像を…
今までちゃんと意味を理解していないまま、Dreamweaverを使ってマージンやパディングなどを設定していたので、プレビューだけを頼りに調整していました。いま、タグ打ちをしながらやっていると、paddingは背景も伸びるとか、padding同士は足し算ができ、marg…
CSSでレイアウトをすると、前のロールオーバーで設定した画像の下に空きができてしまいました。li{heigt: 28px;}と指定したら空きは詰まったのですが、widthも指定した方が良いのでしょうか？あと、画像を横並びにする場合はサイズを指定するので、li{displa…
授業で勉強したCSSについて見直していたら、頭で解っていても出てこない。 繰り返して復習しようと思います。 .lead{ line-heigt: 1.5em;・・・1.5emとは自動行送り、bodyに対して text-indent: 1em;・・・（1文字下がり) letter-spacing: 0.3em;・・・・文…
今日画像を２種類作って、ロールオーバーの練習をして画像置換には成功したのですが、画像と画像の間に空きができてしまいました。 ↓ 無事に空きが埋まりました。CSSも修正しました。 HTML <div id="nav"> <ul> <li><a href="#"><img src="images/nav_1.jpg" onmouseover="this.src='images/nav_1_on.jpg'" onmouseout="this.src='images/nav_1.jpg'" alt="ホーム"</a></li> <li><a href="#"></a></li></ul></div>
今日の授業では、marginとpaddingの違いやfloatを設定する意味、擬似クラス、ロールオーバーと内容が濃かったのでひとつずつ思い出しながら理解していきたいと思います。 DOCTYPE宣言の入力 <HTML>より上に宣言を置く。 <html lang="ja">・・・日本語で表示 CSSのルールを記述 1.</html></html>…
ボックスモデル （例）内容領域の幅500px、左右のボーダー5px、左右のマージン5pxの場合「background-colorで背景色を指定すると、色の適用される部分は 500px＋10px＋10px＝520px（ボーダは背景の上に描かれるため、510pxが背景色となる。※ボーダの色に「tr…
@charset "Shift_JIS"; /* 基本設定 ------------------------*/ h1,h2,h3,p,ul,li,a,img,address{ margin: 0; padding: 0; } /* 背景色とパディング ------------------------*/ body{ background: #ffffff; padding: 10px } /* 見出し -------------------…
<html> <head> <title>GINZA KARACU</title> </head> <body> <div id="container"> <div id="header"> <h1>GINZA KARACU</h1> </div> <div id="navi"> <ul> <li> GINZA KARACU</li> <li> 菓楽とは</li> <li> 菓楽ケーキショップ</li> <li> 菓楽カフェフード</li> <li> 菓楽カフェドリンク</li> <li> 菓楽スクール</li> <li> インフォメーション</li> <li> 求人</li> </ul> <…</div></div></body></html>
@charset "Shift_JIS";h1,h2,h3,p,ul,li,a,img,address{ margin: 0; padding: 0; } body{ background: #ffffff; padding: 10px } h1{ font-size: small; border-bottom: 2px solid #999999; padding: 5px; margin-top: 10px; } h2{ font-size: x-small; line…
<html> <head> <title>ハンバン HANBANGダナハン・ザイン・サンシン HOME-</title> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="navi"> <h1>HANBANG</h1> <p>HANBANGについて</p> <ul> <li>ブランドコンセプト</li> <li>会社概要</li> <li>高麗人参について</li> </ul> <p>商品</p> <ul> <li>ダナハン</li> <li>…</li></ul></div></div></body></html>
