develo.org http://develo.org/ CSS,XHTML,Movable Type,デザイン,お絵かき、などなど...適当に書いていきます。 ja Copyright 2010 Sat, 02 Jan 2010 17:46:27 +0900 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification LINK集
絵
]]> http://develo.org/links.html http://develo.org/links.html Fri, 03 Apr 2009 00:33:28 +0900 「mtDevelo」説明とカスタマイズ

「ウェブページ」のパンくずリスト

ウェブページのパンくずリストだけ少し変わった仕様になっています。

サンプル

フォルダ名に、何も記入しなければ、階層にならないパンくずリストになります。

]]> http://develo.org/mtdevelo/info/custom.html http://develo.org/mtdevelo/info/custom.html Sun, 16 Nov 2008 00:42:43 +0900 「mtDevelo」スキン

ECO (デフォルトスキン)

日付
2008/7/4
製作者
kame
特徴
画像を一切使ってないのでとても表示がスムーズです。
]]> http://develo.org/mtdevelo/info/skin.html http://develo.org/mtdevelo/info/skin.html Sun, 16 Nov 2008 00:27:35 +0900 Movable Type テンプレート 「mtDevelo」 Six Apartで配布されているブログツールMovable Type4.2用のテンプレートを作ってみました。

お試し版なので、不具合があるかもしれないですので、何かありましたらお知らせ下さい。

mtDeveloβ

テンプレートのダウンロード

ライセンスについて

ライセンスはMIT Licenseですm(_ _)m。

テンプレート設定

  1. ダウンロードしたファイルの中のpluginsフォルダの中身をMovable Type内のpluginsフォルダの中にアップロードしてください。
  2. 上のメニュー部分から、デザインを選びテンプレートをクリックします。

    テンプレートをクリック

  3. 右側メニューのブログのテンプレートを初期化をクリックします。

    ブログのテンプレートを初期化をクリック

  4. 新しいテンプレートセットを適用で、「mtDevelo」を選び「次へ」を選らんでください。

    「mtDevelo」を選び「次へ」

  5. テンプレートのアップロードは完了です。ダウンロードしたファイルの中のCSSフォルダを、ブログの公開で指定したサイトパスのフォルダ直下にアップロードしてください。IMGフォルダがある場合は一緒にアップロードしてください。
  6. 再構築すれば、完了です！お疲れ様でした！

詳しい説明とカスタマイズはこちらをご覧ください。

説明とカスタマイズ

スキン

ECO (デフォルトスキン)

日付
2008/7/4
製作者
kame
特徴
画像を一切使ってないのでとても表示がスムーズです。
]]> http://develo.org/mtdevelo/ http://develo.org/mtdevelo/ Sat, 15 Nov 2008 16:06:46 +0900 HTMLをXHTMLに！ $(function() { $('.pageNav1').click( function() { $('#doc').ScrollTo(600, 'easeout'); return false; }); $('.pageNav2').click( function() { $('#tag').ScrollTo(600, 'easeout'); return false; }); });
ページ内 目次
  1. きれいな(X)HTMLの自分的書き方
  2. 実践 タグの書き方と文書構造
  3. 積水ハウスHTML + CSS
  4. HTMLをXHTMLに！

今つくったHTMLをXHTMLにしたいと思います。

!DOCTYPE変更

HTML用の!DOCTYPEをつかっているので、これをXHTML形式にします。

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

これを

<?xml version="1.0" encoding="UTF-8"?>
			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

に変更。

タグを閉じよう！

XHTMLでは単体の要素でも、タグをしっかり閉じてやらないといけません。<meta> <img>などの要素もしっかり閉じてあげましょう。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="">
<meta name="description" content="XHTML,HTML strict勉強用">
<meta name="keywords" content="XHTML,CSS">
<title>HTML,XHTML strict 勉強用</title>
<link rel="stylesheet" href="css/import.css" type="text/css">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="author" content="" />
<meta name="description" content="XHTML,HTML strict勉強用" />
<meta name="keywords" content="XHTML,CSS" />
<title>HTML,XHTML strict 勉強用</title>
<link rel="stylesheet" href="css/import.css" type="text/css"  />
<ul id="links">
    <li><a href=""><img src="../img/banner3.gif" alt="住まいづくりの教室" width="178" height="60"></a></li>
    <li><a href=""><img src="../img/banner4.gif" alt="Web納得工房 Netで家づくりを楽しく学びませんか" width="178" height="60"></a></li>
    <li><a href=""><img src="../img/banner5.gif" alt="SUSTAINABLE DISIGN LABORATORY ひとと地球の未来に届ける住まいづくりを目指して" width="178" height="60"></a></li>
    <li><a href=""><img src="../img/banner6.gif" alt="サステナビリティレポート2007 接続可能報告書 環境・CSRに関する取り組み" width="178" height="60"></a></li>
    <li><a href=""><img src="../img/banner7.gif" alt="住宅の消費税 ご意見を募集しています 住宅生産団体連合会" width="178" height="46"></a></li>
</ul>

<ul id="links">
    <li><a href=""><img src="../img/banner3.gif" alt="住まいづくりの教室" width="178" height="60" /></a></li>
    <li><a href=""><img src="../img/banner4.gif" alt="Web納得工房 Netで家づくりを楽しく学びませんか" width="178" height="60" /></a></li>
    <li><a href=""><img src="../img/banner5.gif" alt="SUSTAINABLE DISIGN LABORATORY ひとと地球の未来に届ける住まいづくりを目指して" width="178" height="60" /></a></li>
    <li><a href=""><img src="../img/banner6.gif" alt="サステナビリティレポート2007 接続可能報告書 環境・CSRに関する取り組み" width="178" height="60" /></a></li>
    <li><a href=""><img src="../img/banner7.gif" alt="住宅の消費税 ご意見を募集しています 住宅生産団体連合会" width="178" height="46" /></a></li>
</ul>

これだけで終わりです！簡単ですね＾＾

積水ハウス XHTML

  1. きれいな(X)HTMLの自分的書き方
  2. 実践 タグの書き方と文書構造
  3. 積水ハウスHTML + CSS
  4. HTMLをXHTMLに！

このページの先頭へ戻る

]]> http://develo.org/cssxhtmllesson/xhtml.html http://develo.org/cssxhtmllesson/xhtml.html Sat, 25 Oct 2008 21:25:00 +0900 実践 タグの書き方と文書構造 $(function() { $('.pageNav1').click( function() { $('#zissenn').ScrollTo(600, 'easeout'); return false; }); $('.pageNav2').click( function() { $('#point1').ScrollTo(600, 'easeout'); return false; }); $('.pageNav3').click( function() { $('#point2').ScrollTo(600, 'easeout'); return false; }); $('.pageNav4').click( function() { $('#header1').ScrollTo(600, 'easeout'); return false; }); $('.pageNav5').click( function() { $('#content1').ScrollTo(600, 'easeout'); return false; }); $('.pageNav6').click( function() { $('#footer1').ScrollTo(600, 'easeout'); return false; }); });
ページ内 目次
  1. きれいな(X)HTMLの自分的書き方
  2. 実践 タグの書き方と文書構造
  3. 積水ハウスHTML + CSS
  4. HTMLをXHTMLに！

ポイント

ただしく、きれいなHTMLを書くポイントは二つです。

  • 文書構造を理解したHTML記述。
  • divでの構造化。

実践

ここからは、実際にくみながら説明していきたいと思います。

普段よく見慣れている、積水ハウスサイトですが、テーブルでくまれているので、これをhtml strctにしていきたいと思います。

(画像の中の文字、FLASHの中の文字は、画像にせずText扱いにします。)

まず始めに

header、content、footerに分けて考える。

積水ハウス

<!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=UTF-8" />
<meta name="author" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>積水ハウス（セキスイハウス）｜住宅メーカー（ハウスメーカー）</title>
<link rel="stylesheet" href="css/import.css" type="text/css"  />
</head>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>

目次へ戻る

中身を考える

header

ヘッダー

<div id="header">
	<h1><a href="index.html"><img src="img/rogo.gif" alt="SEKISUI HOUSE" width="71" height="32"></a></h1>
		<h2><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="104" height="13"></h2>
		<ul id="guide">※
			<li><a href="">investor Relations(English)</a></li>
			<li><a href="">企業・IR情報</a></li>
			<li><a href="">検索・サイトマップ</a></li>
			<li><a href="">カタログ請求</a></li>
			<li><a href="">お問い合わせ</a></li>
		</ul>
</div>

※ cssで個別指定が出来るように、IDを指定してあげましょう。

h2の前は<div class="section">で囲わないとだめですね。

<div id="header">
	<h1><a href="index.html"><img src="img/rogo.gif" alt="SEKISUI HOUSE" width="71" height="32"></a></h1>
		<div class="section">
			<h2><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="104" height="13"></h2>
			<ul id="guide">※
				<li><a href="">investor Relations(English)</a></li>
				<li><a href="">企業・IR情報</a></li>
				<li><a href="">検索・サイトマップ</a></li>
				<li><a href="">カタログ請求</a></li>
				<li><a href="">お問い合わせ</a></li>
			</ul>
		</div>
</div>

ん、でもこれってあまりよくない。

積水ハウスはページのタイトルなのに、かこってるのはguideの部分だけになってしまっています。

全体をかこってやれば・・と思うけど、<div id="header">をつきだしてのマークアップはできないので。

もしやるなら。

<div id="header">
	<h1><a href="index.html"><img src="img/rogo.gif" alt="SEKISUI HOUSE" width="71" height="32"></a></h1>
	<ul id="guide">
		<li><a href="">investor Relations(English)</a></li>
		<li><a href="">企業・IR情報</a></li>
		<li><a href="">検索・サイトマップ</a></li>
		<li><a href="">カタログ請求</a></li>
		<li><a href="">お問い合わせ</a></li>
	</ul>
</div>
<div id="content">
	<div class="section">
		<h2><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="104" height="13"></h2>
	</div>
</div>
<div id="footer">
</div>

contentの中に入れてやるとか。

<div id="header">
	<h1><a href="index.html"><img src="img/rogo.gif" alt="SEKISUI HOUSE" width="71" height="32"></a></h1>
	<p id="sitename"><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="104" height="13"></p>
	<ul id="guide">
		<li><a href="">investor Relations(English)</a></li>
		<li><a href="">企業・IR情報</a></li>
		<li><a href="">検索・サイトマップ</a></li>
		<li><a href="">カタログ請求</a></li>
		<li><a href="">お問い合わせ</a></li>
	</ul>
</div>

h2をやめてpにしてidをつけるとか。

個人的に<p id="sitename">がしっくりきたので、これで行きたいと思います。

目次へ戻る

content

FLASH部分

flash部分

<div id="content">
	<ul id="menu">※
		<li><a href="">戸建住宅</a>
			<ul>
				<li><a href="">鉄骨2階建て</a></li>
				<li><a href="">鉄骨3階建て</a></li>
				<li><a href="">木造住宅</a></li>
			</ul>
		</li>
		<li><a href="">分譲住宅・宅地</a></li>
		<li><a href="">分譲マンション</a></li>
		<li><a href="">賃貸住宅経営</a></li>
		<li><a href="">shamaison.com</a></li>
		<li><a href="">医療・看護</a></li>
	</ul>
	<p id="topimage"><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="574" height="287"></p>※
</div>

※特別なやつにはIDを忘れずに。

目次へ戻る

企業情報、関連情報 部分

企業情報、関連情報

<dl id="infonav">
	<dt>企業情報</dt>
	<dd>
		<ul>
			<li><a href="">企業・IR情報</a></li>
			<li><a href="">ニュースリリース</a></li>
			<li><a href="">サステナビリティレポート</a></li>
			<li><a href="">採用情報</a></li>
			<li><a href="">CMギャラリー</a></li>
		</ul>
	</dd>
	<dt>関連情報</dt>
	<dd>
		<ul>
			<li><a href="">住宅金融支援機構</a></li>
			<li><a href="">住団連</a></li>
			<li><a href="">日本住宅ローン</a></li>
		</ul>
	</dd>
</dl>

ddの中にulを入れています。前のパターン(ナビの部分)と同じようにしようか迷いましたが、次のお知らせ部分と合わせるため、dl dt ddにしました。

目次へ戻る

お知らせ 部分

お知らせ

<dl id="news">
	<dt>お知らせ</dt>
	<dd id="assist">
		<ul>
			<li><img src="../img/list.gif" alt="過去記事一覧" width="69" height="20"></li>
			<li><img src="../img/rss.gif" alt="RSS" width="69" height="20"></li>
		</ul>
	</dd>
	<dd><a href=""><span class="date">2007.05.11</span> 北陸３県の地域情報をリニューアルしました。</a></dd>
	<dd><a href=""><span class="date">2007.05.01</span> 木造戸建て商品「縁の家（ゆかりのいえ）」のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.27</span> 「持続可能性報告書(環境・CSRに関する取組み)2007」のページを追加しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.11</span> 賃貸住宅新商品「ヴィラーチェ Villace」のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.05</span> 戸建住宅商品「イズオーダー」「ビーエコルド 」のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.05</span> 地震動エネルギー吸収システム＜SHEQAS（シーカス）＞のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.05</span> ハイブリッド光触媒塗装外壁「ECORDEC ウォール」のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.03.29</span> 「サステナブル デザイン ラボラトリー」のサイトを追加しました。</a></dd>
	<dd><a href=""><span class="date">2007.03.23</span> お客様情報の事故について</a></dd>
	<dd><a href=""><span class="date">2006.12.20</span> 「ステキな暮らしがみつかる『シャーメゾン』のお部屋探し」サイトをリニューアルしました。</a></dd>
</dl>

過去記事一覧とRSSボタンもなかに入れてあります。

<dl id="news">
	<dt>お知らせ</dt>
	<ul>
		<li><img src="../img/list.gif" alt="過去記事一覧" width="69" height="20"></li>
		<li><img src="../img/rss.gif" alt="RSS" width="69" height="20"></li>
	</ul>
	<dd><a href=""><span class="date">2007.05.11</span> 北陸３県の地域情報をリニューアルしました。</a></dd>
	<dd><a href=""><span class="date">2007.05.01</span> 木造戸建て商品「縁の家（ゆかりのいえ）」のページを公開しました。</a></dd>
</dl>

このように書くことができないので注意です。dlのなかにはdtとddしかいれることができません。

footer

footer

<div id="footer">
	<ul>
		<li id="privacy"><a href="">お客さま情報保護方針</a></li>
		<li id="copyright"><a href="">COPYRIGHT &copy; SEKISUI HOUSE, LTD. ALL RIGHTS RESERVED.</a></li>
		<li id="attention"><a href="">弊社ウェブサイト利用上のご留意事項</a></li>
	</ul>
</div>
]]> http://develo.org/cssxhtmllesson/zissen.html http://develo.org/cssxhtmllesson/zissen.html Sat, 25 Oct 2008 21:19:41 +0900 きれいな(X)HTMLの自分的書き方 $(function() { $('.pageNav1').click( function() { $('#about').ScrollTo(600, 'easeout'); return false; }); $('.pageNav2').click( function() { $('#doctype').ScrollTo(600, 'easeout'); return false; }); $('.pageNav3').click( function() { $('#midasi').ScrollTo(600, 'easeout'); return false; }); $('.pageNav4').click( function() { $('#danraku').ScrollTo(600, 'easeout'); return false; }); $('.pageNav5').click( function() { $('#list').ScrollTo(600, 'easeout'); return false; }); $('.pageNav6').click( function() { $('#tlist').ScrollTo(600, 'easeout'); return false; }); $('.pageNav7').click( function() { $('#kyoutyou').ScrollTo(600, 'easeout'); return false; }); $('.pageNav8').click( function() { $('#address').ScrollTo(600, 'easeout'); return false; }); $('.pageNav9').click( function() { $('#kouzou').ScrollTo(600, 'easeout'); return false; }); $('.pageNav10').click( function() { $('#table').ScrollTo(600, 'easeout'); return false; }); $('.pageNav11').click( function() { $('#zokusei').ScrollTo(600, 'easeout'); return false; }); $('.pageNav12').click( function() { $('#youso').ScrollTo(600, 'easeout'); return false; }); $('.pageNav13').click( function() { $('#claid').ScrollTo(600, 'easeout'); return false; }); });
ページ内 目次
  1. きれいな(X)HTMLの自分的書き方
  2. 実践 タグの書き方と文書構造
  3. 積水ハウスHTML + CSS
  4. HTMLをXHTMLに！

HTMLstrict,XHTMLstrictについて

人は見た目でここはタイトル、ここは、メニューと理解できますが、パソコンは理解してくれません。HTMLは本来、パソコンに意味を理解させてあげるための物です。デザイン部分はCSSに任せ、HTML,XHTMLは意味を理解させてあげるタグを書いてあげるように心がけましょう。

(SEO対策にもなります!!)

!DOCTYPE(ドキュメントタイプ)について

今書いてあるHTMLはどのような規定に従って書いているかという宣言です。かならずHTMLを書く際には記述しなければいけないものです。

厳密な2パタ−ンのドキュメントタイプ (HTMLとXHTML)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTMLstrictのドキュメントタイプです。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTMLstrictのドキュメントタイプです。IE6で互換モードになるバグが有ります。

strictに当てはまらない場合のドキュメントタイプ (HTMLとXHTML)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTMLでstrictに当てはまらなかった場合のドキュメントタイプです。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTMLでstrictに当てはまらなかった場合のドキュメントタイプです。IE6で互換モードになるバグが有ります。

とりあえず、HTMLstrictで記述していくのがいいかと思います。

(ドキュメントタイプによって見え方が変わる場合が有ります。XHTMLのドキュメントタイプほうでは、IEが互換モードと判断してしまうため、IE6なのにIE5なみのレンダリングしかしてくれなくなってしまうバグがあります。)

見出しタグ

<h1> 〜 <h6>

文章の見出しを表すタグ。

1〜6の数字は見出しのレベルを表します。h1が一番上にくるタイトル、その次が h2という具合です。

h1からいきなりh6にとんだりはできません。

例

<h1>今日の出来事</h1>
	<h2>朝</h2>
		<h3>朝飯</h3>
			<h3>みそ汁</h3>
		<h2>シャワー</h2>
	<h2>昼</h2>
		<h3>昼飯</h3>
	<h2>夜</h2>
		<h3>夜飯</h3>

目次へ戻る

段落タグ

<p>

文章の段落を表すタグ

例

<h1>今日の出来事</h1>
	<h2>朝</h2>
		<h3>朝飯</h3>
		<p>今日の朝ご飯は。ご飯、焼き魚、みそ汁でした。</p>
			<h4>シャワー</h4>
			<p>朝シャンはいいですね。</p>
	<h2>昼</h2>
		<h3>昼飯</h3>
		<p>昼は、牛丼をたべました。</p>
	<h2>夜</h2>
		<h3>夜飯</h3>
		<p>夜はうどんでした。うどんは案外飽きないです。</p>

目次へ戻る

リストタグ

<ul> <ol> <li>

メニュー、項目などにつかうタグ。

順番があるリストの場合には、olを使いましょう。

ul,olのなかには、liしか置くことができないので、覚えておきましょう！

(liの中には、全ての要素を置くことが可能です。)

例

<h1>今日の出来事</h1>
	<h2>朝</h2>
	<p>今日の朝ご飯は。</p>
	<ul>
		<li>ご飯</li>
		<li>焼き魚</li>
		<li>みそ汁</li>
	</ul>
	<p>とても、おいしくいただけました。</p>
	<h2>昼</h2>
	<ul>
		<li>牛丼</li>
		<li>卵</li>
	</ul>
	<h2>夜</h2>
	<ol>
		<li>うどん</li>
		<li>肉</li>
	</ol>

目次へ戻る

定義リストタグ

<dl> <dt> <dd>

定義(タイトル)のあるリスト。

dtが次にくるddに対してのタイトルです。一つのdtに対して、いくつでもddを書くことが出来ます。

dlもdt,ddしか中に置くことができません。

(dt,ddの中には、全ての要素を置くことが可能です。)

例

<h1>今日の出来事</h1>
	<h2>朝</h2>
	<dl>
		<dt>朝ご飯</dt>
		<dd>ご飯</dd>
		<dd>焼き魚</dd>
		<dd>みそ汁</dd>
	</dl>
	<h2>昼</h2>
	<dl>
		<dt>昼ご飯</dt>
		<dd>牛丼</dd>
		<dd>卵</dd>
	</dl>
	<h2>夜</h2>
	<dl>
		<dt>夕ご飯</dt>
		<dd>サラダ</dd>
		<dd>チャーハン</dd>
		<dt>夜食</dt>
		<dd>やきそば</dd>
	</dl>

目次へ戻る

文字強調タグ

<em> <strong>

文字の強調、emが強く表示、strongはそれよりさらに強く表示するタグ。

例

<p>昨日は<em>ハンバーグ< /em>、そして今日は<strong>カレーライス</strong>だ！ </p>

目次へ戻る

アドレスタグ

<address>

住所とか、電話番号とか、copyrightなどに使うタグ。

例

<p>下記のアドレスにご連絡ください。</p>
<address>090-1234-5678</address>

目次へ戻る

構造タグ

<div> <span>

構造を補正するタグ。

項目をまとめたりします。

(divはブロック要素、spanはインライン要素。)

spanは使う機会が少ないですが、どうしても、どのタグにも当てはまらない場合に使うことがあります。(強調と逆に弱めたいときなど)

例

<h1>今日の出来事</h1>
	<div class="section">
		<h2>朝</h2>
		<p>今日の朝ご飯は。</p>
		<ul>
			<li>ご飯</li>
			<li>焼き魚</li>
			<li>みそ汁</li>
		</ul>
		<p>とても、おいしくいただけました。</p>
	</div>
	<div class="section">
		<h2>昼</h2>
		<ul>
			<li>牛丼</li>
			<li>卵</li>
		</ul>
	</div>
	<div class="section">
		<h2>夜</h2>
		<ol>
			<li>うどん</li>
			<li>肉</li>
		</ol>
	</div>

目次へ戻る

Tableについて

summary属性

テーブルの説明や構造を示すものです。非視覚系ブラウザを使ってる人の為に、入れるようにしましょう。

<table cellspacing="0" summary="tableの説明">

<caption>

テーブルの見出しです。

ブラウザによって見え方に違いが出てくる場合があるため、cssで消してしまうことも多いのですが、表を作る際には、指定しましょう。

<table cellspacing="0" summary="tableの説明;>
	<caption>テーブル見出し</caption>

目次へ戻る

属性について

<img>要素には必ず、横幅(width)、立て幅(height)、代行テキスト(alt)を書くようにしましょう。

<img src="" alt="" width="" height="">

<table>ではHTMLで幅指定をせず、cssで指定しましょう。

<table cellspacing="0" summary="">

ブロック要素とインライン要素

ブロック要素とは、自分単体で改行してくれる要素。

インライン要素とは、自分単体では改行してくれない要素。

と覚えておけばいいかと思います。

インライン要素はbodyの直下には置くことが出来ません。何かに囲まれていて初めて役に立つことが出来ます。

ブロック要素

  • <h1> 〜 <h6>
  • <p>
  • <ul> <ol> <li>
  • <dl> <dt> <dd>
  • <address>
  • <div>

インライン要素

  • <em> <strong>
  • <span>
  • <a>
  • <img>

目次へ戻る

classとidについて

classは複数指定できるグループのような物、idは個別の特徴を表す物です。

個別に指定する必要がある場合、ページ内に一つしか出てこない場合などには、idをつけましょう。

例

(idが赤でclassが青。)

classとidについて

  1. きれいな(X)HTMLの自分的書き方
  2. 実践 タグの書き方と文書構造
  3. 積水ハウスHTML + CSS
  4. HTMLをXHTMLに！

目次へ戻る

]]> http://develo.org/cssxhtmllesson/ http://develo.org/cssxhtmllesson/ Sat, 25 Oct 2008 21:15:07 +0900 サイトについて 自分のやりたいことややってみたいことなどを、試したり、つくってみたり、毎日のアホなこと書いたりするブログです！まだ自分のやりたいこと、方向性が完全に定まってない未熟なものですが、毎日少しづつ迷いながらも、でも少しづつ前へ、進んでいければいいと思っています。そんな感じで、だらだらやってきます。よろしくお願いします。

develo.orgの由来

最初はDevelopmentっていうドメインがとりたくて探していたのですが、もう誰かにとられていて、考えた結果略してdeveloになりました。Developmentってのは発展とか、なんかそういう意味があるみたいなので、そういう願いを込めてーとか、そんな感じだった気がします。

製作ツール

  • Movable Type 4.2
  • Doreamweaver
  • Fireworks
]]> http://develo.org/about.html http://develo.org/about.html Sat, 25 Oct 2008 21:11:29 +0900 プロフィール

kame

アブブ

生年月日
7月4日
住所
東京
お仕事
WEBデザイナー
メールアドレス
develo0＠gmail.com (@半角にしてね)
MSNメッセンジャー
izayoi＠funifuni.net (＠半角にしてね※メールアドレスとしては機能してません)
Skype
iza_develo
mixi
3573046
Twitter
kamem
Flickr
develo0
Pixiv
kame
Bloglines
iza
FriendFeed
kamem
]]> http://develo.org/profires.html http://develo.org/profires.html Sat, 25 Oct 2008 21:07:31 +0900 あけましておめでとうございます あけましておめでとうございます！

2010年ですね！そういえば来年地デジなのですねっ。

]]> http://develo.org/2010/01/02/1746.html http://develo.org/2010/01/02/1746.html 日記 写真 新年 Sat, 02 Jan 2010 17:46:27 +0900 角丸 dl,dt,ddの擬似テーブル CSS3.0などを使って角丸の擬似テーブルを作ってみました。

画像とか使わなくても、できちゃう！

]]> http://develo.org/2009/12/28/0152.html http://develo.org/2009/12/28/0152.html XHTML,CSS CSS3.0 Mon, 28 Dec 2009 01:52:42 +0900 カメラ買っちゃいました！「Panasonic DMC-GF1C」 迷いに迷って・・、ついに・・。ついに、買っちゃいました！

DMC-GF1｜Gシリーズ｜デジタルカメラ LUMIX（ルミックス）｜Panasonic

天気があまりよくなかったので、外での写真はあまりとれなかったので、うちで飼っている、うさぎをとってみました。

写真と、動画を置いているので、少し重たいかもしれないです。

]]> http://develo.org/2009/11/23/0343.html http://develo.org/2009/11/23/0343.html 日記 写真 Mon, 23 Nov 2009 03:43:34 +0900 XHTMLで電卓
12345
1
2
3
4
5
6
7
8
9
0

XHTMLで電卓 サンプル

[XHTML+CSS]30分でトライするコーディング実技試験サンプル

この記事で、XHTMLで電卓をつくるというのがあったんで試しに作ってみました！

]]> http://develo.org/2009/11/23/0220.html http://develo.org/2009/11/23/0220.html XHTML,CSS CSS XHTML Mon, 23 Nov 2009 02:20:48 +0900 月島散歩 お休みの日に、月島を散歩してきました。

]]> http://develo.org/2009/10/14/0113.html http://develo.org/2009/10/14/0113.html 日記 写真 散歩 Wed, 14 Oct 2009 01:13:26 +0900 サイト作るときに便利そうなPhotoShopのショートカットとかアクション Fireworksだと直感的な操作でできるなと思ってたんだけど、Photoshopだとショートカットとか、アクション使わないと作業が少しめんどう・・。

ということで、作業効率があがりそうな、ショートカットとか、アクションをということで！

]]> http://develo.org/2009/10/04/1416.html http://develo.org/2009/10/04/1416.html デザイン Photoshop Sun, 04 Oct 2009 14:16:31 +0900 夏のこととかWebのこと もうすっかり涼しくなって気ました！久しぶりのエントリーです。
ちょっと最近やったこと、ちょっといろいろ考えなきゃな、と思ってることなどだらだらと書いていこうかな、と思います。

]]> http://develo.org/2009/09/12/0415.html http://develo.org/2009/09/12/0415.html 日記 夏 Sat, 12 Sep 2009 04:15:45 +0900 なんか、目が悪くなりそうな気がした。 最近目がつかれてるのかなぁ・・。
なんか遠くを見るときに、視点がうまく定まらないときがある感じがします。

職業的に、近くのパソコンをずっとみながら、作業するのが、多いせいかもしれないですが、このままではまずいなぁ・・。体が丈夫で、目とかやたらいいってのが自慢のひとつだったのに！

とりあえず、遠くのもの、遠くの緑のものを見るといいってきくので、その辺は意識して、やるようにしようと思います！

]]> http://develo.org/2009/07/01/2333.html http://develo.org/2009/07/01/2333.html 日記 本 Wed, 01 Jul 2009 23:33:21 +0900 Shadowbox(3.0b) 最近、Lightboxで、Shadowboxがいいよーってことで、使ってみようかなぁ、と思ったのですが、設置するのに少し手間取ったので、手間取った部分をかいておこうかなぁ！と思います！今度設置するときに忘れないように！

]]> http://develo.org/2009/06/28/0301.html http://develo.org/2009/06/28/0301.html Javascript Javascript Sun, 28 Jun 2009 03:01:43 +0900 タグの領域のクリックすると「高さ」と「幅」をはかってくれるjavascript な～んてものがあったら、CSSとかでサイト組むときなどに便利なんじゃないかなー、と前々から思っていたので、ちょっと作ってみました。

widthとpaddingとborderなどをつかったときに、IEとFirefoxで、幅がちがってきたりするので、なんか崩れてるけどなんでだろうーってときなんかに、ポチッとクリックしてみて、幅がブラウザによって、数ピクセル違った場合など、すぐに原因がわかるので便利かなーと思いました。

]]> http://develo.org/2009/05/24/0135.html http://develo.org/2009/05/24/0135.html Javascript XHTML,CSS Javascript Jquery Sun, 24 May 2009 01:35:22 +0900 サイトを作る手順 [友達のサイト編] お友達に、サイト作りを頼まれていまして、作っていました。

その際に、こうやって、こういう手順で、こんなもの使って作りました。ってのを書いてみようと思いました。

]]> http://develo.org/2009/03/31/2304.html http://develo.org/2009/03/31/2304.html アートワークス デザイン 友達 Tue, 31 Mar 2009 23:04:31 +0900 東のエデン 「東のエデン」というアニメのキャラクター原案を「ハチミツとクローバー」や「３月のライオン」などを書かれている、羽海野チカさんが、担当されているのです。

]]> http://develo.org/2009/03/29/1401.html http://develo.org/2009/03/29/1401.html 日記 アニメ 紹介 Sun, 29 Mar 2009 14:01:44 +0900 ブログなどに音楽ファイルを載せる（貼り付ける）タグ 最近は、youtubeや、ニコニコ動画などにアップロードして音楽などを載せるなどという方法もありますが、自分のサーバーにアップロードして、音楽を流す方法(貼り付ける方法)です。たまに使うときなどに、自分が忘れてしまうため、メモです・・。

]]> http://develo.org/2009/03/25/1945.html http://develo.org/2009/03/25/1945.html XHTML,CSS XHTML タグ 音楽 Wed, 25 Mar 2009 19:45:20 +0900 ハチミツとクローバー台湾版 羽海野チカ先生の原作、ハチミツとクローバーが、台湾版ドラマになって、ＤＶＤが発売してるそうです。でも、日本語吹き替えはないらしいです＾＾；少し残念・・。

]]> http://develo.org/2009/03/25/1128.html http://develo.org/2009/03/25/1128.html 日記 ドラマ 紹介 Wed, 25 Mar 2009 11:28:07 +0900 カラーシャーペン（芯）

カラーシャーペンで書いた絵アブブ！

カラーのシャーペンがないかなぁーと思って、探していました。赤、青、緑、水色、オレンジ、ピンクの6色なのですが、発売されているようで、さっそく購入してみました！

]]> http://develo.org/2009/03/22/0153.html http://develo.org/2009/03/22/0153.html 日記 文房具 色 Sun, 22 Mar 2009 01:53:11 +0900