Develo.org http://develo.org/ CSS、XHTML、Movable Type、デザイン、絵を描いたり...。 ja Copyright 2012 Sun, 23 Oct 2011 01:35:32 +0900 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification 実践 タグの書き方と文書構造
ページ内 目次
  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 Mon, 17 May 2010 00:43:39 +0900 HTMLをXHTMLに！
ページ内 目次
  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 Sun, 16 May 2010 23:19:27 +0900 きれいな(X)HTMLの自分的書き方
ページ内 目次
  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/ Sun, 16 May 2010 20:32:28 +0900 サイトについて

Develo.orgの由来

Develomentとは発展って意味で、そこからとりまして「Develo」になりました。

推奨ブラウザ

  • Firefox 3 以降
  • Safari 4 以降
  • GoogClome

カテゴリーについて

5つのカテゴリーで整理しています。

Fontについて

「あずきフォント」を使わせていただいてます。

]]> http://develo.org/about.html http://develo.org/about.html Wed, 12 May 2010 01:46:42 +0900 プロフィール

kamem

kamem

生年月日
7月4日
住所
東京
お仕事
ホームページを作るお仕事
メールアドレス
develo0＠gmail.com (@半角にしてね)
MSNメッセンジャー
izayoi＠funifuni.net (＠半角にしてね※メールアドレスとしては機能してません)
Skype
iza_develo
mixi
3573046
Twitter
kamem
Flickr
develo0
Pixiv
kame
Bloglines
iza
livedoor Reader
kamem
FriendFeed
kamem
ブクログ
kamem

アブブ

  • アブブ
  • アブブ
  • アブブ
  • アブブ

小学校のときに流行っていたキャラクター。

たまにエントリーに登場します。

関連エントリー

]]> http://develo.org/profires.html http://develo.org/profires.html Tue, 11 May 2010 01:12:23 +0900 もみじ市2011 去年もいったのですが、今年ももみじ市2011にいってきました。

一週間遅れの記事ですが、写真も何枚か取ったのでもったいないから記事に残しておこうと思います！

]]> http://develo.org/2011/10/23/0135.html http://develo.org/2011/10/23/0135.html 日記 写真 散歩 Sun, 23 Oct 2011 01:35:32 +0900 Evernoteでお気に入りデザイン・サイト・広告をまとめて 共有・公開 最近はやりのEvernoteなのですが、最近いろいろな用途で使わせていただいています。

知らない人もいると思うので、どういうものなのか少しだけ説明！

Evernoteをいろいろなパソコンや、スマートフォンなどに入れておき「自分のアカウント」でログインすると、そのアカウント内で「文書・写真・ファイル」を共有できるものです。
ネットに繋いでいれば自動的に同期をとってくれるので、どこでも最新のファイルが見られます。

ネットを繋いでいなくてもファイルは見られるのでそれがまた便利なのです！

いろんなサイトを見てる時や、散歩中に見つけたポスターや広告で、「綺麗だなぁー。」「かわいいなぁー。」「上手だなぁー。」というものがあったら、

  • Webサイトを保存するときは、 ページ全体をキャプチャできるFirefoxアドオンのPearl Crescent Page Saverを使ったり
  • 外でなにか見つけたときはiPhoneで写真とったり

なるべくEvernoteに保存しておくようにしています！

悩んだり、困ったときなどに 自分で分けたカテゴリーごとに探せるようにしておくと、そこからヒント得たりできるので便利です！

]]> http://develo.org/2011/10/07/0259.html http://develo.org/2011/10/07/0259.html デザイン サイトデザイン Fri, 07 Oct 2011 02:59:59 +0900 web制作・コーディング時に役立つブックマークレット HTMLを組むときに「もっと便利にならないかなー」と、いろいろ探したり、考えたりしていました。
少ないですけど、いくつか便利かなと思うものがあったので、書き残しておきます！

]]> http://develo.org/2011/10/01/0032.html http://develo.org/2011/10/01/0032.html Javascript XHTML,CSS Javascript jQuery Sat, 01 Oct 2011 00:32:18 +0900 もっと。 なんかふと、違う気がしました。
進む方向このままでいいのかなって。

やることはやっていて、安定はできてるし、楽しみもあるんだけれど。
このままこの状況がつづいたら楽しいなぁって思う部分もたくさんあるんだけれど。

それって単純に楽してるだけじゃないのかなーって。

]]> http://develo.org/2011/07/26/0304.html http://develo.org/2011/07/26/0304.html 日記 モチベーション Tue, 26 Jul 2011 03:04:28 +0900 いろいろな動きをするニュースティッカー(News Ticker) jQueryプラグイン ティッカーをいろいろ探していたのですが、思い通りのものがみつかりませんでした・・。

なので、いくつか動きを作ってみました！

ティッカーを使う機会はあまりないかもしれないけど、使う機会があったら使ってみよー！

]]> http://develo.org/2011/06/24/0352.html http://develo.org/2011/06/24/0352.html Javascript Javascript jQuery Fri, 24 Jun 2011 03:52:15 +0900 国立散歩。 書きたいことは沢山あるけど、いろいろ悩み中でストップ中です；

そんな感じなのですが、たまにはまったり日記でも書こうかなーと思います！

]]> http://develo.org/2011/03/07/2319.html http://develo.org/2011/03/07/2319.html 日記 カフェ 写真 散歩 Mon, 07 Mar 2011 23:19:29 +0900 jQueryでスムーズスクロールプラグイン スムーズにスルスルっとスクロールするJavascriptを使うときに「どれを使おう！？」っていつも迷うので、自分にあったものをjQueryのアニメーション機能を使って作ってみました！

]]> http://develo.org/2010/09/05/1301.html http://develo.org/2010/09/05/1301.html Javascript Javascript jQuery Sun, 05 Sep 2010 13:01:54 +0900 最近読んだ本の感想などなど 最近小説を読むのにまたはまりだしまして、少し読んだものがたまってきたので感想などサラッと書いてみたいと思います。小説の感想文書くのなんて、久しぶりー。

国語って苦手だったなぁー。

注意 : ネタバレを多少含んでいる場合がありますのでご了承ください。

]]> http://develo.org/2010/08/13/0351.html http://develo.org/2010/08/13/0351.html 日記 小説 本 Fri, 13 Aug 2010 03:51:33 +0900 サイト作るときに便利なPhotoShop JSX、ショートカット、アクション 前のエントリーで「サイト作るときに便利そうなPhotoShopのショートカットとかアクション」という記事をかいたのですが、さらに便利になりそうなものを考えてみました！

]]> http://develo.org/2010/06/10/0154.html http://develo.org/2010/06/10/0154.html デザイン Photoshop Thu, 10 Jun 2010 01:54:29 +0900 IE8リストマーク（list-style-type）の■と●がおかしいのを直す方法 IE8で、ul li、などを使った際に、●は小さく表示されたり、■は大きく表示されたりしてしまいます。

（IE7モードでは平気みたい！）

]]> http://develo.org/2010/06/02/0302.html http://develo.org/2010/06/02/0302.html XHTML,CSS CSS IE8 XHTML Wed, 02 Jun 2010 03:02:00 +0900 さくらだよ。 もう6月入ったのに、桜の話です、すみません。書くのが遅れましたが、せっかく写真をとったので！のせちゃいます！

]]> http://develo.org/2010/06/02/0148.html http://develo.org/2010/06/02/0148.html 日記 写真 Wed, 02 Jun 2010 01:48:46 +0900 Yahoo! UI Interface Library Font CSSを使うとIE8でFontが固定されるのを直す方法 IE6、IE7、IE8、CSSでfont-sizeをpx、ptで指定するとFontサイズが固定されてしまいます。

「Yahoo! UI Interface Library Font CSS」を使っている場合に、IE6、IE7ではハックを使って固定されないようになっています。

しかし！IE8では固定されてしまうようです・・。

]]> http://develo.org/2010/05/30/1301.html http://develo.org/2010/05/30/1301.html XHTML,CSS CSS Font Sun, 30 May 2010 13:01:06 +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