ホームページ

0．名無し - 14/03/17 12:25:40 - ID:Z1Y2pgfNxg

ホームページ

全部
最初の100件
次の100件
前の100件
最新50件
ソート

14． madada123 - 14/03/21 00:06:53

<!DOCTYPE html>　→この文書はHTMLですよという宣言　入れないといけないもの　入れないといつか何かが起こる
<html lang="ja">　→日本語使いますよ、という意味　書いておいたほうがいい
<head>
<title> 名前 </title>
</head>
<body>
ggggggg
</body>
</html>
15． madada123 - 14/03/21 00:07:24

<div>　</div>
<span>　</span>
<em></em>
<strong>　</strong>

2

<img src=" ">
width="　" height="　"
<img src="　" width="　px" height="　px">
<address>　</address>
<hr />
©SOFT CANPUS Ltd., All Rights Reserved.
©　., All Rights Reserved.

<a href="homemadefactory.html"></a>

<a name="飛び先">飛び先</a>
<a href="ファイル名#飛び先">飛び先へ</a>
<a href="mailto:b**@****.com">メールはこちら</a>

<td></td>　横　<tr></tr>　縦

border=""

<table>　</table>
cellpadding="5" cellspacing="10" border="2"
height="40"

<table cellpadding="" cellspacing="" border=""><tr><td></td></tr></table>

<table cellpadding="20" cellspacing="2" border="1">

<tr width="240">
<td width="40" height="40" valign="bottom">春</td>
<td valign="top">夏</td>
</tr>

<tr>
<td height="150" valign="top" align="left">秋</td>
<td valign="bottom" align="right">冬</td>
</tr>

<tr>
<td height="200">花</td>
<td><img src="images/flower.jpg"></td>
</tr>

</table>

<align="center left right">
<valign="bottom">
<valign="top middle bottom">

colspan="　"　
セルを横方向につなげる
http://www.newcredge.com/IT/www/html/tag/table/table-th-td-colspan.html
rowspan="　"
http://www.newcredge.com/IT/www/html/tag/table/table-th-td-rowspan.html
セルを縦方向につなげる
16． madada123 - 14/03/21 00:07:57

<html>
<head>
<title>タイトル</title>

</head>
<body>

<table border="1">

<tr>
<td colspan="3" width="600" height="50" align="center" valign="middle">猫アルバム</td>
</tr>

<tr>
<td width="100" height="100" align="center" valign="middle">ねこ1</td>
<td width="300" height="100" align="center" valign="middle"><img src="../images/cat1.jpg"></td>
<td rowspan="3" width="200" height="300" align="center" valign="middle">ご覧ください！</td>
</tr>

<tr>
<td width="100" height="100" align="center" valign="middle">ねこ2</td>
<td width="300" height="100" align="center" valign="middle"><img src="../images/cat2.jpg"></td>
</tr>

<tr>
<td width="100" height="100" align="center" valign="middle">ねこ3</td>
<td width="300" height="100" align="center" valign="middle"><img src="../images/cat3.jpg"></td>
</tr>

</table>

</body>
</html>

↑　2個目3個目の<td></td>は、2個のみになる
17． madada123 - 14/03/21 00:08:19

<form method="post" action=".cgi" enctype="text/plain">
<input type="" name="" id="" size="" />
<label for=""></label>
<textarea name="" cols="" rows="" id=""></textarea>
18． madada123 - 14/03/21 00:08:52

<form method="post" action="softcampus.cgi" enctype="text/plain">
<table width="582" height="271" border="1">

<tr>
<td width="78"><label for="name">お名前</label></td>
<td width="306">
<input type="text" name="name" id="name" size="40" />
</td>
</tr>

<tr>
<td><label for="address">住所</label></td>
<td><input type="text" name="tel" id="tel" size="40" /></td>
</tr>

<tr>
<td><label for="tel">TEL</label></td>
<td><input type="text" name="tel" id="tel" size="40" /></td>
</tr>

<tr>
<td><label for="age">年齢</label></td>
<td>
<select name="age" id="age">
<option value="10" selected>10代</option>
<option value="20">20代</option>
<option value="30">30代</option>
<option value="40">40代</option>
<option value="50">50代</option>
<option value="60">60代</option>
<option value="70">70代</option>
</select>
</td>
</tr>

<tr>
<td><label for "blood">血液型</label></td>
<td><select name="blood" multiple id="blood">
<option value="a">A</option><option value="b">B</option>
<option value="o">O</option>
<option value="ab">AB</option>
</select></td>
</tr>

<tr>
<td>好きな果物</td>
<td>
<input type="checkbox" name="fruit" value="appple" id="apple" />
<label for="apple">りんご</label>
<input type="checkbox" name="fruit" value="cherry" id="cherry" />
<label for="apple">さくらんぼ</label>
<input type="checkbox" name="fruit" value="orange" id="orange" />
<label for="apple">オレンジ</label>
<input type="checkbox" name="fruit" value="grape" id="grape" />
<label for="apple">グレープ</label>
</td>
</tr>

<tr>
<td><label for="impression">感想</label></td>
<td><textarea name="impression" cols="50" rows="5" id="impression"></textarea></td>
</tr>

<tr>
<td colspan="2">
<input type="submit" name="transmit" value="送信" />
<input type="reset" name="reset" value="リセット" /></td>
</tr>

</table>
</form>
19．名無し - 14/03/24 01:04:19 - ID:wYC0Azq7Pg

★HTMLタグリファレンス
http://www.htmq.com/html/h.shtml
20．名無し - 14/03/25 09:58:21 - ID:Z1Y2pgfNxg

フォーム

id　そのページで1個だけ　onlyOneを作るために存在しているタグ　限定させるために使う　
使わなくてもいいが、命令する時に必要になる　指示効果を限定できる
name　複数設定可　班のイメージ　その中の誰々、と指定可　いろんな所で使える
label　あっても無くてもいい　使わない場合あり　名前をクリックすると、記入欄にカーソルが合う　「labelは、idが参照」される
nameの中のnameと、idのnameは、別でもいい

フォーム幅高さは決められない　勝手に決まる

送信ボタン　<input type="button" value="">　submitでも可　submitは、送信のみの意味　buttonは、いろんな意味に使える
reset　も、役割固定

FFFTPでFTP通信するとき　ホスト　ユーザ　パスワード　が必要
ローカルの　ホストの　初期フォルダ　→ホストの初期フォルダは、あらかじめ決まっている場合あり
21．名無し - 14/03/25 09:59:13 - ID:Z1Y2pgfNxg

http://www.sakura.ne.jp/standard.html
無料サーバーだと、PHP　MySQL　使えない
PHP無いと　メールフォーム　使えない
MySQL無いと　ワードプレス　ショッピングサイト　使えない
CMS　WordPress　使える
共有SSL　使えるか

WordPress（ワードプレス）は、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している(後述のプラグインよりSQLiteでの使用も可能)。単なるブログではなくCMSとしてもしばしば利用されている。b2/cafelogというソフトウェアのフォーク(後継)として開発、2003年5月27日に初版がリリースされた[1]。GNU General Public License（GPL）の下で配布されている。

SSL使うには審査必要　SSL証明書

https://www.verisign.co.jp/ssl/reg_reg/index.html
20万以上かかるので、共有SSL使う　\500
http
https
<a href="https～"></a>　になる

しかし、別のサーバ使用しているサイトでSSLしたいなら、共有SSL使う
メールだと漏れる
22．名無し - 14/03/25 10:00:11 - ID:Z1Y2pgfNxg

<!DOCTYPE html>　HTMLのバージョンと形式
ver.4.01　5　か分からない

yahoo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Transitional　曖昧でもOK　Transitional　は、認めるという意味

4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5
<!DOCTYPE html>

4では、DOCTYPE 宣言必要
img　は単独で書かない

タグ
ブロック要素　改行される　面積概念　割り振り
<h1></h1>
<p></p>
<table></table>

インライン要素　改行されない　面積概念無し
<strong></strong>　
b
img

<style type="text/css"></style>
<style type="text/css">　p{}　</style>

ホームページはブロックの積み重ね

width:px;　height:px;

インライン要素は、必ずブロック要素で包む

alt="" 必ず画像に付ける　適切に検索されたい言葉
<a href="　"></a>
<iframe src=""></iframe>

必ず、<h1></h1>を<p></p>より先にする
<h1></h1>に画像を指定させることも可能だが、

<ul></ul>　箇条書き、リンク集と言われるが、まとまったコンテンツ

©2011 SOFT RAMPUS All Rights Reserved.
23．名無し - 14/03/25 10:05:26 - ID:Z1Y2pgfNxg

フォームとテーブルは別
フォーム　HTMLではメールとか送れず　PHPがやる　あくまでもHTMLでは体裁を整えるだけ

<!DOCTYPE html>　
<html lang="ja">　
<head>
<title>フォーム作成</title>
</head>

<body>
<form method="post" action="フォーム作成.cgi" enctype="text/plain">
<table width="600" height="300" border="1">

<tr>
<td width="30"><label for="name">NAMAE</label></td>
<td width="306">
<input type="text" name="name" id="name" size="40" />
</td>
</tr>

↑　表幅は、size　が優先される
テーブルのheightは優先されず　
table widthは優先

</body>
</html>
24．名無し - 14/03/26 17:30:21 - ID:Z1Y2pgfNxg

sans-serif
サンセリフ
http://www.sophia-it.com/content/%E3%82%B5%E3%83%B3%E3%82%BB%E3%83%AA%E3%83%95
装飾的要素を省いたフォントのこと

serif
サンセリフに対してひげやうろこなどの飾りがあるフォントの分類は、セリフ
25．名無し - 14/03/26 17:33:07 - ID:Z1Y2pgfNxg

Illustrator‎　ベクトル画像
Photoshop　ビットマップ画像

Illustrator‎
webならピクセル　印刷ならミリメートル

アートボード

Space＝手の平　画面移動
Ctrl＋Space　拡大
Ctrl＋Alt＋Space　縮小
手の平Wクリック　初期状態

Alt押下すると中心から

文字　Ctrl＋Shift＋B　文字囲い表示消える
26．名無し - 14/03/27 18:44:27 - ID:Z1Y2pgfNxg

※Illustrator‎
印刷するなら、CMYK　Webにするなら、RGB
編集＞環境設定＞一般＞Wクリックして編集モード　外す
表示＞スマートガイド　にチェックON

Ctrl＋S　上書き
Ctrl＋N　新規作成

※Alt押しながら　→　コピー
※Ctrl＋D　繰り返し
※Ctrl＋G　グループ

※選択解除は、SHIFT押しながら色面をクリック？　ロックすればその部分選択されなくなる
オブジェクト＞ロック
※Ctrl＋2　ロック　Ctrl＋Alt＋2　解除
選択解除
http://tamasan.com/lecture/ai_sho002.html

※ダイレクト選択ツール　→　白い矢　アンカーポイントを操作可

リフレクトツール
（軸がある場合）Alt押しながらアンカーをクリック　→反転

※Illustrator‎　履歴
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1243962192
Ctrl+z、Ctrl+shift+z
ウィンドウメニュー→「アピアランス機能」

※Illustrator‎　移動
http://irare.seesaa.net/article/44107075.html
黒いポインタ（黒い矢印マーク）をダブルクリックします。すると、移動距離を数値で入力できるウィンドウが

※Illustrator‎　繰り返し
http://illustrator-tips.info/category/illustrator-tutorials/transformation
変形の繰り返し　Ctrl＋D
27．名無し - 14/04/03 11:53:03 - ID:Z1Y2pgfNxg

レッスン４　1.2.　P9　から

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>

<meta http-equiv="content-type" content="text/html; charset="UTF_8">
<title>縦並びのナビゲーション</title>

<link rel="stylesheet" type="text/css" href="list_menu.css">
</head>

<body>

<ul>
<li><a href="A.Html">項目A</a></li>
<li><a href="B.Html">項目B</a></li>
<li><a href="C.Html">項目C</a></li>
<li><a href="D.Html">項目D</a></li>
<li><a href="E.Html">項目E</a></li>
</ul>

</body>
</html>

---

↓　ドット消す

ul{
list-style:none;
}

ul li{
border-top:1px solid black;
}

↑幅　種類　色　順は不動　liのそれぞれの上に　線を引く

※CSSに隙間無くす　勝手に隙間出るので、それを埋める

*{
margin:0;
padding:0;
}

*　←　すべてに対して、という意味
アスタリスクを好まない人もいる　邪魔になることもある

margin　間隔　padding　余白
たとえば、margin-top:20px;
marginだけだと、4方に、という意味

レッスン４　P5　余白設定順番

height:30px;　
CSSで、縦方向の真ん中に配置するプロパティは無い
ので、
padding:15px;　とする

margin:20px;　上下左右に20　→　padding:20px;　だと本体が広がる
padding　は、己が広がる　margin　は、周りが広がる

行の高さは、「分からない」　変化するので、paddingで設定する

ul li a{
width:300px;
}

↑を設定しても変わらない　インライン要素には幅高さ設定できない
ので、ブロック要素に変換することになる
↓

ul li a{
width:300px;
display:block;
}

※範囲を出すためには　display:block;
※ブロック要素なら縦に並ぶ　インライン要素は横に
※display:inline;　インライン要素にする　横に並ぶ
28．名無し - 14/04/04 14:00:10 - ID:Z1Y2pgfNxg

テーブル
<td></td>　横　<tr></tr>　縦
<tr><td></td></tr>

Th

thead
tbody
tfoot　などもあり

CSSはtrに対しては指定できない　ので、
<thead></thead>　で包み指定する

<table>たくさん使う場合は、<thead>多用して指定すべき

※　table1.html　見直し

テーブル　1個だけ指定すると全部　↓

.c1{
width:250px;
table-layout:fixed;
}

↑一気にc1全部　固定しますよ

※表　線を1本にする

table{
border-collapse:collapse;
}

table,td{
border:1px solid black;
}

※collapse　は表に必ず使う
※<thead></thead>　は、横行を管理　colは、列を管理

※<div></div>　<span></span>　htmlタグ　意味を持たないタグ　ただそこにあるだけ
意味を持たないことに意味がある
ただマークアップしたいだけの役割

↓　ただ範囲をきめただけのCSS

<style type="text/css">
#page{
width:600px;
height:400px;
background:red;
}
</style>

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
↑　付ける

上記だと四隅に隙間できるため、プロパティ入れる
*{margin:0;padding:0;}
アスタリスクは、全部に対して～という意味
これが無いと余計な隙間できるよ

真ん中にする　margin:0 auto;　→上下は0　左右はオート　真ん中に来る

※CSS　はじめに全体つくりあとから中身

ブロックごとに作るんだよ
29．名無し - 14/04/04 18:33:59 - ID:Z1Y2pgfNxg

Illustrator‎

回転ツールで　その場で回転の場合はWクリック　
alt押しながらどこかのアンカークリックすれば、そこを中心にして回転

全部集めて合体　ウィンド＞パスファインダ
合体　くり抜き

多角形＞効果＞パスの変形＞パンク・膨張　→　花

オブジェクト花　の　オブジェクト＞アピアランスを分割　すると、花の形になる

最新　CC　クリエイティブ　Illustrator CCはCreative Cloud
CS5　線にグラデーション付けられず　6以降　付けられる

アンカーポイント切り替えツール　シーソーにならないで動かせる　
方向線出す出さない　をできる

ハートを合体　パスファインダ使わず　オープンパスには使えず　クローズパスのみ可
アンカーポイント　合体ではなく結合する　→Ctrl＋j　ジョイント
オブジェクト＞パス＞連結
30．名無し - 14/04/07 17:14:19 - ID:Z1Y2pgfNxg

クライアントと、まずヒアリングシートが必要
仕様書をPhotoshopで作成　残しておく
作った後が勝負

文字を　アウトライン化する
書式＞アウトラインを作成

ウインドウ＞整列

東京カラー印刷
http://www.tcpc.co.jp/
オンライン入稿

入稿方法
http://www.tcpc.co.jp/note/uplord.htm

Illustrator‎　単位　mm
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1193509771
編集＞環境設定＞単位＞必要な項目欄で「ミリメートル」を選択して、ＯＫ。
Ｓｈｉｆｔ＋Ｃｔｒｌ（Ｃｏｍｍａｎｄ）＋Ｕキーでも開きます。

バウンディングボックス　Ctrl＋SHIFT＋B　表示から
31．名無し - 14/04/08 10:31:04 - ID:Z1Y2pgfNxg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>レイアウト4+</title>
<style type="text/css">

*{margin:0 auto;　
}

#box1{
width:600px;
height:600px;
background:red;

}

#box2{
width:190px;

background:yellow;
float:left;
margin-right: 15px;
}

#box3{
width:190px;

background:blue;
float:left;
}

#box4{
width:190px;

background:orange;
float:right;
}

#box5{
width:600px;
height:200px;
background:green;
margin-top:20px;
}

#box0{
width:600px;

background:pink;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix { display: block; }

</style>
</head>
<body>

<div id="box1">
<div id="box0" class="clearfix">
<div id="box2">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
</div>
<div id="box3">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
</div>
<div id="box4">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
</div>
</div>
<div id="box5">
</div>
</div>

</body>
</html>
32．名無し - 14/04/08 10:45:35 - ID:Z1Y2pgfNxg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>レイアウト4+</title>
<style type="text/css">

*{margin:0 auto;　
}

#box1{
width:600px;
height:600px;
background:red;

}

#box2{
width:190px;
height:100px;
background:yellow;
float:left;
margin-right: 15px;
}

#box3{
width:190px;

background:blue;
float:left;
}

#box4{
width:190px;

background:orange;
float:right;
}

#box5{
width:600px;

background:green;
margin-top:20px;
}

#box0{
width:600px;

background:pink;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix { display: block; }

</style>
</head>
<body>

<div id="box1">
<div id="box0" class="clearfix">
<div id="box2">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
</div>
<div id="box3">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
</div>
<div id="box4">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>

</div>
</div>
<div id="box5">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>

</div>
</div>

</body>
</html>
33．名無し - 14/04/08 11:50:27 - ID:Z1Y2pgfNxg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>レイアウト5</title>
<style type="text/css">

*{margin:0 auto;　
}

#box1{
width:700px;
height:700px;
background:red;

}

#box2{
width:700px;
height:100px;
background:yellow;

}

#box3{
width:700px;
height:500px;
background:pink;

}

#box4{
width:700px;
height:100px;
background:orange;

}

#box5{
width:200px;
height:500px;
background:blue;
float:left;
}

#box6{
width:500px;
height:500px;
background:green;
float:left;
}

#box7{
width:500px;
height:250px;
background:gray;

}

#box8{
width:500px;
height:250px;
background:darkred;

}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: block; }

</style>
</head>
<body>

<div id="box1">
<div id="box2">
</div>
<div id="box3" " class="clearfix">
<div id="box5">
</div>
<div id="box6">
<div id="box7">
</div>
<div id="box8">
</div>
</div>
</div>
<div id="box4">
</div>
</div>

</body>
</html>
34．名無し - 14/04/09 17:46:49 - ID:Z1Y2pgfNxg

Illustrator‎　コピー
http://helpx.adobe.com/jp/illustrator/kb/226918.html

Illustrator‎　フォント　オブジェクトに
http://www.wave-inc.co.jp/data/illustrator/outline.html#areaMethod

イラストレーター、Photoshopのチュートリアル｜DesignTips
http://designers-tips.com/
35．名無し - 14/04/09 18:32:56 - ID:Z1Y2pgfNxg

float　を使えば、要素は横に並ぶ
<div></div>　は、SEOに悪い
インライン要素使うと、面積の指定ができなくなる

font-size:20pt

CSSファイル　作成
*{margin:0;padding:0;}　いつも必要

---

※Pだけにしか効かないaaa　という意味　Pだけ赤になる
p.aaa{
color:red;
}{

---

↓　同じ意味で、

}
div#page{

divにしか効かない、という意味　↑

---
CSSコメント

/*　*/
/*ラッパーの中の記載*/

<div></div>
http://www.htmq.com/html/div.shtml
<DIV>タグはそれ自身は特に意味を持っていませんが、<DIV>～</DIV>で囲んだ範囲をひとかたまりとして、 align属性で位置を指定したり、スタイルシートを適用するのに用います。

同様な使い方をするタグに<SPAN>がありますが、 <DIV>はブロック要素であり、<SPAN>はインライン要素です。

ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で、一般的なブラウザでは前後に改行が入って表示されます。インライン要素とは主に文章の一部として利用される要素であり、その前後は改行されません。

<div align="center"></div>

text-align:center;
padding:15px 0;

目的に応じ　<h1></h1>　<p></p>　使い分け

<address>©SOFT CREAM Ltd., All Rights Reserved.</address>

margin:0 auto;　真ん中に配置
36．名無し - 14/04/09 18:33:30 - ID:Z1Y2pgfNxg

CMYK
シアン、マゼンタ、イエロー、ブラック

Illustrator‎　コピー
http://helpx.adobe.com/jp/illustrator/kb/226918.html

Illustrator‎　フォント　オブジェクトに
http://www.wave-inc.co.jp/data/illustrator/outline.html#areaMethod

イラストレーター、Photoshopのチュートリアル｜DesignTips
http://designers-tips.com/
37．css - 14/04/11 13:48:50 - ID:Z1Y2pgfNxg

file:///E:/Users/SCHOOL/Desktop/xhtml%E6%95%99%E6%9D%90/hp/CSS/layout7.html
ナビのところは
<ul><li></li></ul>で書いていく　箇条書きというより　まとまり
全体の中の1個1個
ピンクの中のそれぞれのボタンである～ということ


<div id="navi">
</div>

↑
<div></div>　使わなくていい　ulに変える
↓


<ul id="navi">
</ul>

CSSも、↓

ul#navi{
width:750px;
height:50px;
background:pink;
}

↓


<ul id="navi">
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
</ul>


この時点で、ドット付き　ホームは縦並び
38．名無し - 14/04/11 13:49:30 - ID:Z1Y2pgfNxg

list-style:none;

li　にフロート付ける

インライン　面積が表現できなくなるので、フロートで並べたほうが

↓


<ul id="navi" class="clearfix">
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
</ul>


ul#navi li{
width:20%;
float:left;
text-align:center;
padding:10px 0;
}

※リンクの設定

text-decoration:none;
これで下線消える

ul#navi li a{
text-decoration:none;
color:black;
}

ul#navi li a:hover{
text-decoration:none;
background:orange;
}

※ホームボタンは、リンクで、インライン要素なので、リンクの範囲だけ色が変わる
ブロック要素にしないとボタン全部が反応しないので、
display:block;　使用　※逆は、　display:inline;

div#footer{
width:750px;

background:green;
text-align:center;
padding:10px 0;

}

↓こう書いても同じ

address{
width:750px;

background:green;
text-align:center;
padding:10px 0;

}

※※すべて<div></div>で書いてしまう　複雑になってしまう


<div id="footer">
<address>©SOFT CREAM Ltd., All Rights Reserved.</address>
</div>


↓


<address>©SOFT CREAM Ltd., All Rights Reserved.</address>


でもいい
<div></div>が必要無いとき・・・

divとは、マーキングするだけ　範囲を作りたいだけ　divで囲んだだけでは駄目

※

<div id="page">

<div id="header">
<h1>練習サイト</h1>
</div>


↑　どちらもブロック要素なので　↓これでもいい

<div id="page">

<h1>練習サイト</h1>


<p></p>とか<ul><li></li></ul>とか<table></table>とか　に指定したい時
divで「まとめて指定」するため

たとえば、headerにnaviを入れ込んでもいい　それをまとめるために、div使う
39．レイアウト7+ - 14/04/11 13:54:29 - ID:Z1Y2pgfNxg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>レイアウト7+</title>
<link rel="stylesheet" type="text/css" href="layout2.css">

</head>
<body>

<div id="page">

<div id="header">
<h1>練習サイト</h1>
</div>



<ul id="navi" class="clearfix">
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
</ul>



<div id="wrapper" " class="clearfix">
<div id="side">
<p>あああああああああああああああああああ</p>
<p>あああああああああああああああああああ</p>
</div>
<div id="contents">
<h2>見出し2</h2>
<p>あああああああああああああああああああ</p>
<p>あああああああああああああああああああ</p>
<p>あああああああああああああああああああ</p>
<h2>見出し2</h2>
<p>あああああああああああああああああああ</p>
</div>
</div>



<div id="footer">
<address>©SOFT CREAM Ltd., All Rights Reserved.</address>
</div>


</div>

</body>
</html>
40．layout2.css - 14/04/11 13:55:29 - ID:Z1Y2pgfNxg

*{
margin:0;padding:0;
}

#contents h2{
width:530px;
padding:10px;
background:orange;
}

#contents p{
width:530px;
padding:10px;
background:aqua;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: block; }

div#page{
width:750px;

background:red;
margin:0 auto;
}

div#header{
width:750px;
text-align:center;
background:yellow;
padding:15px 0;
}

ul#navi{
width:750px;

list-style:none;
background:pink;
}

ul#navi li{
width:20%;
float:left;
text-align:center;

}

ul#navi li a{
text-decoration:none;
display:block;
color:black;
padding:10px 0;
}

ul#navi li a:hover{
background:orange;

}

/*ラッパーの中の記載*/
div#wrapper{
width:750px;

background:blue;
}

div#side{
width:200px;

background:lightgreen;
float:left;
}

div#contents{
width:550px;

background:skyblue;
float:right;
}

address{
width:750px;

background:green;
text-align:center;
padding:10px 0;

}
41．style.css - 14/04/11 13:56:20 - ID:Z1Y2pgfNxg

*{
margin:0;padding:0;
}

h1{
font-size:20px;
}

h2{
text-align:center;
font-size:20px;
padding:10px 0;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: block; }

/*----------ここから----------*/

div#page{
width:800px;

background:white;
margin:0 auto;
}

ul#navi{
width:800px;

list-style:none;
background:#D88277;
}

ul#navi li{
width:25%;
float:left;
text-align:center;
}

ul#navi li a{
text-decoration:none;
display:block;
color:black;
padding:10px 0;
}

ul#navi li a:hover{
background:orange;
}

div#contents{
width:600px;
margin:0 auto;
}

footer{
width:800px;
height="30"
}

/*----------ここまで----------*/
42．index.html - 14/04/11 13:57:22 - ID:Z1Y2pgfNxg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>HOMEMADEFACTORY</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="page">


<h1>お菓子教室「HOME MADE FACTORY」へようこそ</h1>
<p><img src="images/header.jpg"></p>



<ul id="navi" class="clearfix">
<li><a href="#">トップ</a></li>
<li><a href="#">レシピ</a></li>
<li><a href="#">教室の案内</a></li>
<li><a href="#">ご意見・ご感想</a></li>
</ul>



<div id="contents">



<h2><strong>手作りの楽しさを味わいませんか？</strong></h2>
<p>家で作るケーキは、まず手軽にできること、手作りケーキは作る時も、
食べる時もハッピーです。そんな楽しさを多くの方に味わっていただけるようにアイデアあふれるオリジナルのケーキレシピや、
お菓子のレシピをご紹介しています。ケーキ作りは初めてという方でも大丈夫です。</p>

<img src="images/top_image.png" alt="HOMEMADEFACTORY">

<p>〒340-0816 東京都文京区本郷1-1<br>
TEL：03（3333）7777<br>
営業時間：10:00 ～ 20:00 </p>
<address>http://homemadefactory.com</address>
<br>

<hr />





<br>
<p><iframe src="news.html" width="600" height="180"></iframe></p>
<br>



</div>




<br>
<footer>
<img src="images/footer.gif" alt="HOMEMADEFACTORY" width="800" height="30">
</footer>



</div>
</body>
</html>
43．名無し - 14/04/11 13:59:42 - ID:Z1Y2pgfNxg

画像1
44．名無し - 14/04/11 14:00:41 - ID:Z1Y2pgfNxg

画像2
45．名無し - 14/05/06 18:33:19 - ID:1kEs2YId6w

授業教材2\Webクリエイター上級\第2章\実施後\問題15
※何故か　ファイルが選択されていません　になる

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>問題15</title>
</head>
<body>
<h1>研修報告</h1>
<form>
<p>社員番号<br>
<input type="text" name="number" size="30" maxlength="8" value=""></p>
<p>氏名<br>
<input type="text" name="name" size="30" maxlength="30" value=""></p>
<p>アップロードするファイルを指定してください。<br>
<input type="file" name="data" size="30"></p>

<p><input type="submit" value="アップロード">
<input type="reset" value="キャンセル"></p>
</form>
</body>
</html>
46．名無し - 14/05/06 18:35:33 - ID:1kEs2YId6w

授業教材2\Webクリエイター上級\模擬試験\第1回\自由問題\stores\実施後
※　H2の上が可笑しい

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="css/allpage.css">
<link rel="stylesheet" type="text/css" href="css/photo.css">
<title>shop</title>
</head>

<body>

<p id="head"><img src="images/logo.gif" alt="喜多川商店街" width="300" height="56"></p>

<h1>お店紹介</h1>

<div id="contents">
<h2>ホテルニューキタガワ（シティホテル）</h2>
<p><img src="images/room.jpg" alt="部屋の写真" width="250" height="167" class="photo"></p>

<p>喜多川南駅前にオープンした近代的なホテルです。</p>
<p>住所：喜多川町喜多川南1-X-X<br>電話：043-452-XXXX</p>

<h2 class="photoend">シンタグマ（ギリシャ料理）</h2>
<p><img src="images/greece.jpg" alt="ギリシャ料理の写真" width="250" height="167" class="photo"></p>

<p>アテネで修行を積んだシェフが本場ギリシャの味をお届けします。</p>
<p>住所：喜多川町喜多川東2-X-X<br>電話：043-456-XXXX</p>

<h2 class="photoend">ショコラ（カフェ）</h2>
<p><img src="images/cafe.jpg" alt="カフェの写真" width="250" height="167" class="photo"></p>

<p>当店自慢のカフェショコラをぜひご賞味ください。</p>
<p>住所：喜多川町喜多川西3-X-X<br>電話：043-459-XXXX</p>

</div>

<div id="menu">
<ul>
<li><a href="index.html">トップ</a></li>
<li class="current">お店紹介</li>
<li><a href="schedule.html">イベントスケジュール</a></li>
<li><a href="contact.html">イベント申し込み</a></li>
</ul>
</div>

<p id="foot">2011年4月20日更新</p>

</body>
</html>
47．名無し - 14/05/06 19:28:48 - ID:1kEs2YId6w

@charset "Shift_JIS";
/* 全ページ共通のデザイン用 */
body{
color:#000000;
background-color:#ffffff;
margin:0;
}
h1{
color:#333333;
background-color:#ccff00;
font-size:140%;
padding:3px;
margin:0;
}
h2{
color:#009933;
background-color:#ffffff;
font-size:120%;
border-left:solid 12px #009933;
padding-left:3px;
}

ul{
font-weight:bold;
list-style:none inside;
margin:0;
}

li{
line-height:220%;
border-bottom:dotted 1px #009933;
}

p{
line-height:140%;
}

#head{
background-color:#009933;
margin:0;
}

#foot{
font-size:80%;
font-weight:bold;
text-align:right;
border-top:solid 5px #009933;
margin:0;
clear:both;
}

/* 本文部分のデザイン用 */

#contents{
border-right:solid 1px #009933;
padding:20px;
width:60%;
float:left;
}

/* メニュー部分のデザイン用 */

#menu{
padding:20px;
width:24%;
float:right;
}

.current{
background-color:#ccff00;
padding-left:20px;
}

/* リンク部分のデザイン用 */

a{
color:#000000;
text-decoration:none;
padding-left:20px;
display:block;
}

a:hover{
background-color:#99cc99;
}
48．名無し - 14/05/06 19:29:34 - ID:1kEs2YId6w

@charset "Shift_JIS";
/* 写真の配置デザイン用 */

.photo{
margin-right:10px;
margin-bottom;20px;
float:left;
}

.photoend{
clear:left;
}
49．名無し - 14/05/07 17:14:52 - ID:Z1Y2pgfNxg

Dreamweaver
<table border="1" cellpadding="5" cellspacing="8">

テーブルに対して　border-collapse:collapse;
1本にする
css　style　タブから
50．名無し - 14/05/26 23:31:57 - ID:cIwmN1X++A

業種と職種の違い
http://niitsu.info/~Muchen/test/gyosyoku.html
業種というのはどういった仕事なのかという方向付け(ジャンル)で，職種というのは，その業種で必要とする仕事の種類を指しています

業種

業種業種
・農業，水産業，鉱業・商社
・建設業，不動産業・製造業
・サービス業・流通業，小売業
・エネルギー業・交通，運輸業
・官公庁

職種職種
・営業・販売
・製造，製作・企画，デザイン
・接客，案内・技術開発
・システムエンジニア(SE)，プログラマー(PG) ・教育，保育
・営業企画・医療，福祉
・広報，宣伝・技師，技術職
・公務員・総務，人事へ
・経理，財務・調査，分析

WEB　種と職種
http://mtl.recruit.co.jp/blog/2010/09/mtlweb.html
・［Web プランナー］分類
→ Web サービス企画、ビジネスプランニングの職種です
・［Web エンジニア（クリエイティブ）］分類
→ Web サイト制作・開発の職種です（いわゆる Web クリエイター）
・［Web エンジニア（アーキテクト）］分類
→ アーキテクチャ設計・開発の職種です（いわゆる Web アーキテクト）

http://www.jec.ac.jp/smart/qanda/index.php?navi=4&genreid=5
ほぼ100%がWebデザイナーとしての採用。その他の職種としては、WebディレクターやWebプログラマ、コーダーなどがあります。
51．名無し - 14/05/28 16:49:54 - ID:Z1Y2pgfNxg

5/28

※　足成　無料の素材集
52．名無し - 14/07/15 16:47:23 - ID:Z1Y2pgfNxg

jQuery

簡単に設置出来るJQueryスライドショー「bxSlider」の使い方。
http://wp-and.me/bxslider/
53．名無し - 14/07/16 15:19:09 - ID:Z1Y2pgfNxg

jQuery　嵌め込み方

1.テキストエディタ開き、そこに、
たとえば　http://semooh.jp/jquery/api/effects/slideToggle/%5Bspeed%5D%2C+%5Bcallback%5D/src-1/　のソース
を貼る
2.　http://jquery.com/download/　からダウンロードした
Download the compressed, production jQuery 1.11.1
Download the uncompressed, development jQuery 1.11.1　あたりを、リンクさせる
例： <script src="./js/jquery-1.4.2.min.js"></script>　
3.文字化けしないように、<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />　など貼る
4.テキストエディタで、文字コード・改行コード　を揃える
54．名無し - 14/08/22 05:40:51 - ID:nfX2HQqYZA

HTML　文字を縦長に
http://www.htmq.com/style/font-stretch.shtml

HTML　ブロック要素を中央に
http://www.css-lecture.com/log/css-beginner/026.html
div要素のようなブロックレベル要素をセンタリングするには「text-align」は使いません。「text-align」プロパティはインライン要素の位置揃えを指定するためのものですよ。
センターリングしたい要素に「margin: 0 auto;」と指定するのが正しい方法
55．名無し - 14/08/22 17:26:26 - ID:Z1Y2pgfNxg

×　　　border:3px 0;
　　　　border:solid #000000;
↓

○　　　border-top:3px solid #000000;
　　　　border-bottom:3px solid #000000;
56．名無し - 14/08/25 08:47:22 - ID:d0zO8aLk5A

ブロックレベル要素とインライン要素
http://www.htmq.com/htmlkihon/005.shtml

font まとめ書き
http://webdirector.livedoor.biz/archives/52586274.html
font:bold italic small-caps 14px/1.5 "ＭＳＰゴシック","MS PGothic",Osaka,sans-serif;
font:14px "ＭＳＰゴシック",sans-serif;
57．名無し - 14/08/25 18:33:21 - ID:Z1Y2pgfNxg

positionプロパティ
http://www.css-lecture.com/log/css/037.html
static「absolute」「relative」「fixed」

#aaaa{
position:relative;
top:18px;
}

トップページ > CSS3 > E:nth-child(n)
http://www.htmq.com/selector/nth-child.shtml
58．名無し - 14/08/25 18:38:48 - ID:Z1Y2pgfNxg

あんだぁ亭｜一度食べたら忘れられない！ローストポークが美味しいお店。

http://under-t.hungry.jp/
59．名無し - 14/08/26 12:14:53 - ID:Z1Y2pgfNxg

8/26

Web Garden SENDAI
http://www.members.co.jp/company/base/sendai.html

レスポンシブルデザイン
スマホPC　同じくらい　スマホのほうが時間多い
マルチデバイス対応
→　コストも減るし

エビデンス　議事録
50億円　自動車と同じくらい

情報
手を動かす

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト
http://dotinstall.com/
C-team
https://c-team.jp/

グノシー
http://gunosy.com/
60．名無し - 14/08/26 18:11:06 - ID:Z1Y2pgfNxg

株式会社　ラネックス
仙台本社
河北新報社　アルプス電気
共同通信から記事購入
ネオヘッドラインシステム
PDFで

人と繋がる　スキル成長　仲間に分かち合う　オフも自分磨き
興味　素直に楽しむ　失敗を恐れない
61．名無し - 14/08/27 15:38:57 - ID:Z1Y2pgfNxg

8/27　

※　<img src="">　は、単独ではなく　<p></p>　<li></li>　など付ける

<img src="rogo1.png" alt="USSON" id="rogo1">
↓
<p id="rogo1"><img src="rogo1.png" alt="USSON"></p>

※　position:relative;　は、<div id="○○○"></div>　などで配置してから
※　position:relative;　すると　div　はそのままになるので、その下のdivを上げる必要あり
62．名無し - 15/03/20 19:42:32 - ID:YdcHcudFDg

iStonsoftソフトウェア：http://www.istonsoft.jp/
iPubsoftソフトウェア：http://www.ipubsoft.jp/
63．夜 - 15/08/18 17:35:21 - ID:h8A79PmeQA

Coolmuster Studioが、プロのPDF/ePub変換・作成、Android用ツールおよびiPad/iPhone/iPod用ツールを開発・販売します。
ホームページ：http://www.coolmuster.jp/

全部
最初の100件
次の100件
前の100件
最新50件

このスレッドに投稿する（※は入力必須）
名前	ユーザIDで書き込む
メール
本文※	全角1000文字以内
画像	※それぞれ5MB以下のJPG,PNG,GIF形式のファイルを3枚までアップロードできます。もっと追加もっと追加

利用規約をご確認のうえご記入下さい

PerfectCenter

掲示板・スレッド詳細

ホームページ

Menu

メニューサンプル1

メニューサンプル2

最近更新したページ

2014-06-16

2014-06-13

2014-05-26

2014-05-02

2013-07-14

2013-06-29

2013-05-25

2013-05-21

2013-05-15

2013-04-29

2013-03-09

2013-03-05

2013-03-02

2013-01-10

2012-12-15

2012-12-04

2012-11-02

2012-10-20

2012-10-19

最新コメント

2015-07-02

2014-01-23

2014-01-21

2013-12-21

2013-12-20

2013-12-19

2013-12-07

QRコード

アクセス解析中