CSS課題18

CSS課題

以下の画像と同じように表示させるCSSを記述しなさい記述場所は外部スタイルシート <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題18</title> <link rel="stylesheet" href="css/css18style.css" media="screen,print"> </head> <body> <div class="nav"> <ul> <li><a href="#">メニューのリンク1</a></li> <li class="current"></li></ul></div></body></html>

2012-11-30

CSS課題17

CSS課題

以下の画像と同じように表示させるCSSを記述しなさい記述場所は外部スタイルシート <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題17</title> <link rel="stylesheet" href="css/css17style.css" media="screen,print"> </head> <body> <div class="nav"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li></ul></div></body></html>

2012-11-30

CSS課題16

CSS課題

以下の画像と同じように表示させるCSSを記述しなさい記述場所は外部スタイルシート <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題16</title> <link rel="stylesheet" href="css/css16style.css" media="screen,print"> </head> <body> <div class="nav"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li></ul></div></body></html>

2012-11-30

CSS課題15

CSS課題

以下の画像と同じように表示させるCSSを記述しなさい記述場所は外部スタイルシート <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題15</title> <link rel="stylesheet" href="css/css15style.css" media="screen,print"> </head> <body> <div class="nav"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li></ul></div></body></html>

2012-11-30

11/30 入力データの検証とCSSの基礎

授業

Webデザインの方法 10日目内容外部CSS記述入力データの検証 CSSの基礎 illustratorの基礎外部CSS記述基本形 meta属性 title link の順番記述方法 <link rel="stylesheet" href="css/style.css" media="screen,print"> でcssフォルダ内にあるstyle.cssという名前のスタイルシートを読み込む入力データの検証入力データに</link>…

2012-11-30

CSS課題14

CSS課題

以下の画像と同じように表示させるCSSを記述しなさい記述場所は外部スタイルシート <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題14</title> <link rel="stylesheet" href="css/css14style.css" media="screen,print"> </head> <body> <div class="box"> <h1>構造主義の四銃士</h1> <p>言語学に限られていた「構造主義」の理説ををそれぞれの分野で展開し、後の世代に多大な影響を与えた…</p></div></body></html>

2012-11-30

CSS課題13

CSS課題

CSS課題13 以下の画像と同じように表示させるCSSを記述しなさい記述場所は外部スタイルシート <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題13</title> <link rel="stylesheet" href="css/css13style.css" media="screen,print"> </head> <body> <div id="container"> <div class="box"> <h1>デザインの話</h1> <p>物にはいろいろな形があります。歴史ととも…</p></div></div></body></html>

2012-11-29

11/29 CSSの基礎

授業

Webデザインの方法 9日目内容 CSSの基礎 border 擬似クラス font-family background-image CSSの基礎 marginの相殺垂直方向に隣接するボックスのmarginは相殺され、margin値が大きいブロックレベル要素のmargin値が採用される高さの調整 paddingとheight両…

2012-11-29

前回受講生ブログ

雑記

前回受講生ブログ前回のWeb制作(午後)科の方々のブログです受講が終了した今でも更新している方もいますので参考にどうぞスタートは違いますがこの訓練を活かすも殺すも自分次第 Web学のすすめ更新○ ミニマリズムの美学更新× はれあめはれ更新△ Web…

2012-11-28

11/28 illustratorの復習とCSSの基礎

授業

Webデザインの方法 8日目内容 illustratorの復習 CSSの基礎 illustratorの復習三角形の書き方長方形を書くダイレクト選択ツールで尖らせたい辺のアンカ−２点を選択オブジェクト→パス→平均(Alt+Ctrl+j)で２点ともでOK ロゴの描き方対象の規則性を捕らえ…

2012-11-27

CSS課題12

CSS課題

以下の画像と同じように表示させるCSSを記述しなさい記述場所はエンベッド <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-11-27

CSS課題11

CSS課題

以下の画像と同じように表示させるCSSを記述しなさい記述場所はエンベッド <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-11-27

CSS課題10

CSS課題

背景画像（繰り返さない） <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題10</title> <style> body { background-image: url("background.gif"); background-repeat: no-repeat; } h1 { margin: 20px 0 30px 120px; padding: 0 0 10px 0; font-size: 1.5em; } p { margin: 0 0 0 120px; } </style> </meta></head></html>

2012-11-27

CSS課題09

CSS課題

背景画像と枠線 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題09</title> <style> body { background-image: url("background.jpg"); background-repeat: repeat-y; } h1 { margin: 10px 0 10px 62px; padding: 0 0 10px 0; font-size: 1.5em; text-indent: 1em; color: #8B0C00; border-bottom: …</meta></head></html>

2012-11-27

CSS課題08

CSS課題

背景画像を設定（垂直に繰り返し） <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題08</title> <style> body { background-image: url("background.jpg"); background-repeat: repeat-y; } h1 { font-size: 1.5em; color: #fff; } </style> </head> <body> <h1>Page Design</h1> </body> </html> 実際に表示させると↓

2012-11-27

CSS課題07

CSS課題

背景画像を設定（水平方向に繰り返し） <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題07</title> <style> body { background-image: url("background.jpg"); background-repeat: repeat-x; } h1 { font-size: 1.5em; color: #1C647A; } </style> </head> <body> <h1>Page Design</h1> </body> </html> 実際に表示さ…

2012-11-27

CSS課題06

CSS課題

背景画像を設定 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題06</title> <style> body { background-image: url("background.gif"); } </style> </head> <body> </body> </html> 実際に表示させると↓

2012-11-27

CSS課題05

CSS課題

背景色と余白 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題05</title> <style> body { width: 450px; } h2 { margin: 0; padding: 1em; background-color: #006AB8; color: #fff; font-size: 1.2em; font-weight: bold; } p { margin: 0; padding: 1em; background-color: #BAD4EB; } </style> …</meta></head></html>

2012-11-27

CSS課題04

CSS課題

リンクの背景色（擬似クラス） <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題04</title> <style> body { width: 250px; } ul { list-style-type: none; } li a:link, li a:visited, li a:active { margin: 0 0 2px 0; color: #FFF; font-weight: bold; text-indent: 5px; text-decoration: none; backgro…</meta></head></html>

2012-11-27

CSS課題03

CSS課題

リンクの文字色（擬似クラス） <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題03</title> <style> ul { list-style-type: none; } li a:link, li a:visited, li a:hover { color: #FE816D; } li a:active { color: #6CFD00; } </style> </head> <body> <ul> <li><a href="#">LINK-link-coral</a></li> </ul></body></html>

2012-11-27

CSS課題02

CSS課題

文字色と背景色 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題02</title> <style> body { background-color: #91BC86; } h1 { color: #fff; } h2 { height: 25px; color: #fff; background-color: #BC908F; } p { background-color: #F5F5DB; line-height: 40px; } </style> </head> <body> <h1>A…</h1></body></html>

2012-11-27

CSS課題01

CSS課題

文字色と背景色 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS課題01</title> <style> h1 { color: #169093; } h3 { background-color: #355584; color: #fff; } p { color: #02008D; } </style> </head> <body> <h1>style要素</h1> <h3>style element</h3> <p>HTML文書内にまとめて設定します。</p> </body> </html> …

2012-11-27

11/27 CSSの基礎

授業

Webデザインの方法 7日目内容 CSSの基礎 marginとpadding要素 Dreamweaver初期設定 illustratorの練習 CSSの基礎レイヤー構造を意識することが大切記述の順序ボックスの「外から」か「重なり順の上側」から例） margin(top→right→bottom→left) padding(t…

2012-11-26

はてなダイアリー最新タイトル

雑記

最新タイトル表示件数はてなダイアリーの最新タイトルの表示件数を変更するページ上部の「管理」をクリックページ左の「デザイン」をクリック「詳細」をクリック「ページのフッタ」に書かれている内容を <hatena name="section" template="hatena-module"> から <hatena name="section" template="hatena-module" listlimit="10"> に書き換える。listlimit=""の中の数字</hatena></hatena>…

2012-11-26

11/26 Webの基礎知識とHTMLの記述

授業

Webデザインの方法 6日目内容 Webの基礎知識 HTMLの記述絶対パスと相対パス Firefox拡張機能 illustrator Webの基礎知識 Webの基礎 WWW(World Wide Web) URL(Uniform Resource Locator) HTML(HyperTextMarkup Language) Webページの構造を記述する言語 img…

2012-11-25

11月の４週目

目標

11月の４週目の目標

2012-11-24

筆記試験

雑記

【第１回】インターネット多分あってると思いますが鵜呑みにしないで下さい（1）URLとは URLとは［Uniform Resource Locator］の略で［インターネットにおける情報の「住所」］を示す場所です。 URLには、［絶対パス］と［相対パス］の２通りの指定方法があ…

2012-11-23

はてなダイアリーカスタマイズ

雑記

hatena2-whiteテーマ構造 background-imageファイルは、自分のサーバーに置く例）http://○○.com/hatena/××.gif これで通常通りcssにbackground-image: "http://○○.com/hatena/××/gif";で指定でOK h1 { color: #8c929c; margin: 0px auto; padding: 65px 0 65…

2012-11-22

11/22 Firefox拡張機能とCSS基礎とillustratorペンツール

授業

Webデザインの方法 5日目内容 Firefox 拡張機能導入 CSS基礎 CSSの記述色設定文字サイズ illustratorのペンツール Firefox 拡張機能導入Web Developer 1.1.9のインストールダウンロードサイト [http://releases.mozilla.org/pub/mozilla.org/addons/60/we…

2012-11-21

【実践課題_A03】

HTML課題

【実践課題_A03】以下のテキストを読み、内容を適切にHTMLで構造化（意味付け）しなさい。回答 <html lang="ja"> <head> <meta charset="UTF-8"> <title>【実践課題_A03】</title> </head> <body> <h1>石垣島観光ガイド</h1> <p>石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に</p></body></html>…

Webデザインの方法 | Webデザインメソッド

2012-11-01から1ヶ月間の記事一覧

CSS課題18

CSS課題17

CSS課題16

CSS課題15

11/30 入力データの検証とCSSの基礎

CSS課題14

CSS課題13

11/29 CSSの基礎

前回受講生ブログ

11/28 illustratorの復習とCSSの基礎

CSS課題12

CSS課題11

CSS課題10

CSS課題09

CSS課題08

CSS課題07

CSS課題06

CSS課題05

CSS課題04

CSS課題03

CSS課題02

CSS課題01

11/27 CSSの基礎

はてなダイアリー最新タイトル

11/26 Webの基礎知識とHTMLの記述

11月の４週目

筆記試験

はてなダイアリーカスタマイズ

11/22 Firefox拡張機能とCSS基礎とillustratorペンツール

【実践課題_A03】