develo.org http://develo.org/ HTML、CSS、Javascript、デザイン、絵を描いたり。 ja Copyright 2015 Wed, 04 Feb 2015 01:13:41 +0900 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification きれいな(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をつけましょう。

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

目次へ戻る

]]> http://develo.org/cssxhtmllesson/ http://develo.org/cssxhtmllesson/ Sun, 20 Apr 2014 10:39:51 +0900 実践 タグの書き方と文書構造
目次
  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部分
<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

<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 Sun, 20 Apr 2014 10:31:00 +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, 20 Apr 2014 10:02:46 +0900 プロフィール Kamem

フリーでWebを制作する仕事をしています。学校で講師も少ししています。

HTML,CSS,Javascriptを使ったフロントエンド的な仕事が多いです。
デザインも少しやります。

プロジェクトの参加してサイトを作ったりしてます。
まったり自分でひらめいたことを作ったりするのが好きです。

読書、絵、カラオケ、カメラ、お酒とか好きです。
カラオケとかお酒とか誘っていただければだいたいいきますーｗ

名前
kame or kamem
生年月日
7月4日
住所
東京
お仕事
ホームページを作る仕事
メールアドレス
mail＠develo.com (@半角にしてね)
Skype
iza_develo
mixi
3573046
Twitter
kamem
Flickr
develo0
ブクログ
kamem
Qiita
kamem
GitHub
kamem
]]> http://develo.org/profiles.html http://develo.org/profiles.html Mon, 07 Apr 2014 01:05:16 +0900 サイトについて サイトの内容

技術的なこと（HTML,CSS,Javascipt）や、日常の出来事などを書いています。

Develoはdevelopmentを省略した感じです。「発達，発育,進展，発展 ,開発」的な意味です。色々作っていきたいなぁと思いドメインを取ろうとしていたときに悩んでつけました。

使ってるツール

  • Photoshop
  • Coda

使ってる技術

  • HTML5
  • CSS3
  • Javascript,jQuery
  • Movable Type
  • Sass,Compass

このサイトの構成

]]> http://develo.org/about.html http://develo.org/about.html Mon, 07 Apr 2014 00:44:38 +0900 新しくサイトを作りました。 このサイトはMovable Typeで作ってるんですが、最近は技術系の記事はQiitaに投稿したり、写真はFlickrに投稿したり、日記の記事はTumblrに投稿しようかなぁーとか思ったりと・・。 他のサービスで記事を書いたりすることが増えてきたので、APIで記事を取得してそれをまとめたサイトを作ってみようかなぁー！ と思いまして。時間をみつけてはちょくちょく作っていたのが、ようやく見れるぐらいになってきたのでご紹介です！ http://develo.org/cloverblue http://develo.org/cloverblue 日記 サイトデザイン Wed, 04 Feb 2015 01:13:41 +0900 領域からはみ出てる文字列をCSSだけで「・・・」にする サイトを作っていると、デザイン的に一行におさめたい・・。という時があります。 そういう時はJavascriptで文字制限したり。予めサーバー側で文字制限した文字列を渡してもらうなどして対処していたのですが CSSでできないのかなぁ・・。といろいろ試したところ少しつかいどころに制限はありますができるようです！ http://develo.org/text-overflow-ellipsis http://develo.org/text-overflow-ellipsis HTML,CSS CSSテクニック Thu, 28 Aug 2014 12:13:41 +0900 ショートカットに入れておくと便利なSublime Text スニペット `console.log();`と`(function(){})();`（即時関数）ってわざわざ毎回打つの大変だなぁと思ったので、Coda2のクリップの代わりにSublime Textで設定してみました。 http://develo.org/sublime-snippet-clog-immediatefunction http://develo.org/sublime-snippet-clog-immediatefunction HTML,CSS Sublime Text Wed, 30 Jul 2014 11:13:41 +0900 Sublime Text 3でその場で翻訳してくれるプラグイン 「Google Translate」 ※ そもそも英語を勉強しろっていう話もありますが・・；；]]> http://develo.org/sublimetext-google-translate http://develo.org/sublimetext-google-translate HTML,CSS Sublime Text Sun, 27 Jul 2014 22:13:41 +0900 Movable Typeで特定の記事だけ出力形式を変える方法 このブログを始めた時からアドレスをずっと日付で記事を管理してきたのだけど。よくよく考えたら日付って投稿するときによって変わっちゃうしなんかあんまりよろしくないんじゃない・・？と思いはじめました・・。なので今後はファイル名を指定してアップできないかなぁと考えてました・・。 ただ昔の記事とか皆さんブックマークして下さっていたりするので、変えづらい・・。ので選択式にできないかなぁ・・。と悩んでいたのですが、どうにか無理やりとりあえず記事によって使い分けるようにできました。 なんかめっちゃ無理矢理な気がしますが、まぁまぁ・・。とりあえず。 http://develo.org/movabletype-f http://develo.org/movabletype-f 日記 Movable Type Fri, 25 Jul 2014 21:13:41 +0900 スムーズにスクロールするjQueryプラグイン スムーズスクロールを実装したいときに、「この機能はないのかなぁ・・。」とか探したりするのが大変だったので、自分のなかで必要な機能を切り替えて使えるスムーズスクロールをjQueryのanimateのscrollTop,scrollLeftをつかってjQueryプラグインを作ってみました！ 前々から作ってはいたのですが、昔の拙いコードが残っていたので少し整理しました。 * [jQueryでスムーズスクロールプラグイン](http://develo.org/2010/09/05/1301.html) http://develo.org/jquery.smoothAnchor http://develo.org/jquery.smoothAnchor Javascript jQueryプラグイン Fri, 25 Jul 2014 09:13:41 +0900 border-imageをbefore,after擬似要素で使うとRetina対応もできて便利 ボックスの周りに装飾として画像を置きたい場合に背景画像で対応するのもいいのですが 3つに切って・・。真ん中を繰り返しして・・。 さらに透過だった場合どこのタグに背景をいれるか工夫したりするのが大変だなぁと思っていました。 そういう場合はborder-imageを使ったりしていたのですが border-imageを使うとborder-width分コンテンツが内側によっちゃいますよね・・。 まぁborderなので当たり前ですが・・。 しかも普通にやると画像だけ1/2にすることができないので、Retina対応とかできないんです。 でもこれafterとかbeforeに指定したらborder-widthとか気にせずに使えるんじゃない！？ と思って試してみたらめちゃめちゃ便利！しかもRetina対応もできちゃうし！ みなさんも是非使ってみてくださいｗ]]> http://develo.org/border-image-after http://develo.org/border-image-after HTML,CSS CSSテクニック Thu, 24 Jul 2014 17:13:41 +0900 Sublime Text 3 初期設定 「Doreamweaver重すぎるんだよ！」ってなり、Codaを使い始め、最近はSublime Textを使い始めてみました。 色々調べていて自分なりの設定をメモっておこうと思います！ 基本的にはMacでの設定方法です！ http://develo.org/sublimetext3-initialization http://develo.org/sublimetext3-initialization HTML,CSS Sublime Text Thu, 24 Jul 2014 11:13:41 +0900 紙吹雪を降らせるjQueryプラグイン 生徒の作品に使えそうかなぁと思ったのと、 紙吹雪ってキャンバス意外で綺麗に見えてるのがあまりなかったので作ってみました！

ただやっぱりcanvasじゃないので、たくさんのタグを生成すると重くなっちゃいますね。

]]> http://develo.org/jquery.confetti http://develo.org/jquery.confetti Javascript jQueryプラグイン Sat, 28 Jun 2014 15:13:41 +0900 jQuery Plugin パラメーターの代わりにdata属性で代用できるプラグイン プラグインを複数のページなどで違う動作をしたい場合に
わざわざjsを用意して指定し直さないければいけないのが煩わしいと思っていたので
かわりにdata-*で指定したパラメーターを使うことができるjQuery プラグインを作りました！

]]> http://develo.org/jquery.dataExtend http://develo.org/jquery.dataExtend Javascript jQueryプラグイン Sat, 21 Jun 2014 14:13:41 +0900 タグをランダム配置＆サイズにしてなるべく重ならないように配置するjQueryプラグイン ランダム配置を作った時に上手く行くときはきれいな形になるのだけど 失敗するとすごい重なっちゃってあんまり綺麗に見えないことがあります・・。

なので極力重ならないようにしてくれる仕組みを作ってみました。

]]> http://develo.org/jquery.random http://develo.org/jquery.random Javascript jQueryプラグイン Sat, 07 Jun 2014 10:13:41 +0900 阿佐ヶ谷さんぽ

阿佐ヶ谷散歩しました！まったりしてて面白かったです。

行った所
ぱんだ珈琲店
阿佐ヶ谷アニメストリート
]]> http://develo.org/2014/05/25/2202.html http://develo.org/2014/05/25/2202.html 日記 カフェ 写真 散歩 Sun, 25 May 2014 22:02:42 +0900 Gruntでコピーライトつきの.minファイルを作る javascriptのファイルを圧縮するときにコピーライトと日付とかを手動でいれたりするのめんどくさいなぁ・・。と思っていたので

jsフォルダに入っているjsと同ファイル名.txtをコピーライトとして追加した.minファイルを作るgruntを作りました。

]]> http://develo.org/grunt.jsmin http://develo.org/grunt.jsmin Javascript Grunt Fri, 23 May 2014 13:13:41 +0900 楽しくコーディング！Sass,Compassのデフォルトmixinとカスタム関数 前回SassとCompassの記事（SassとCompassを使って楽しくCSSコーディング！）をかいてから、だいぶ時間もたっていろいろ使いやすいようにmixinを作ったりしたので新しくまとめたいと思います！

]]> http://develo.org/2014/05/19/0935.html http://develo.org/2014/05/19/0935.html HTML,CSS Sass Compass Mon, 19 May 2014 09:35:00 +0900 Macを買ったら最初に入れとくソフト これからMacを買うっていう方とか、自分用にもメモとして残しておきますー。

]]> http://develo.org/2014/05/16/0237.html http://develo.org/2014/05/16/0237.html 日記 Mac Fri, 16 May 2014 02:37:00 +0900