applicott blog

スポンサーサイト

--年--月--日 --:--

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

カテゴリー: スポンサー広告

R言語をちょっと使ったのでメモ。
Rエディタ、カーソル行実行「Ctrl+R」

Rを使って複数のファイルを読み込み、
それぞれ２１６次元ベクトルから固有値、固有ベクトルを生成。

infile <- read.table("heikinlist.txt")
i <- 1
while(i <= length(infile[,])){
readfile <- read.table(paste(infile[i,1]))
x <- as.matrix(readfile)
ei <- eigen(x %*% t(x))
p <- strsplit(paste(infile[i,1]),"\\\\")
vector_f <- paste("C:/data/eigen/phi/",p[[1]][5],'.phi')
value_f <- paste("C:/data/eigen/lambda/",p[[1]][5],'.lambda')
write.table(ei$vectors,file=vector_f,append=F,quote=F,row.names=F,col.names=F)
write.table(ei$values,file=value_f,append=F,quote=F,row.names=F,col.names=F)
i<-i+1
}

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(1)
カテゴリー: 未分類

[PHP][API][Youtube]ワード検索とタグ検索と検索範囲の指定

2010年06月20日 02:48

YoutubeAPIを使って動画検索を出来る

PHPスクリプトを研究室の先輩に頼まれたので少しだけ書きました。

仕様としては「ワード検索」「タグ検索」への対応と日本国内での検索と世界中から検索出来るように。

という要望。
脆弱性とかセキュリティ的に問題がありそうですが、研究用途クローラーとして裏で少し使うだけなので

あまりセキュリティとか考慮されていないと思いますのであしからず。

実行サンプル

<br /><br /><pre><br /><html> <br /><head> <br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br /><style type="text/css"><br />    div.item {<br />      border-top: solid black 1px;      <br />      margin: 10px; <br />      padding: 2px; <br />      width: auto;<br />      padding-bottom: 20px;<br />    }<br />    span.thumbnail {<br />      float: left;<br />      margin-right: 20px;<br />      padding: 2px;<br />      border: solid silver 1px;  <br />      font-size: x-small; <br />      text-align: center<br />    }    <br />    span.attr {<br />      font-weight: bolder;  <br />    }<br />    span.title {<br />      font-weight: bolder;  <br />      font-size: x-large<br />    }<br />    img {<br />      border: 0px;  <br />    }    <br />    a {<br />      color: brown; <br />      text-decoration: none;  <br />    }<br />    </style><br /><br /><title>YotubeAPI</title> <br /><link href="http://static.fc2.com/css/common/headbar/110513style.css" rel="stylesheet" type="text/css" media="all" />
</head><br /><body><div id="sh_fc2blogheadbar">
	<div class="sh_fc2blogheadbar_body">
		<div id="sh_fc2blogheadbar_menu">
			<a href="http://blog.fc2.com/" title="FC2ブログ">
				<img src="http://static.fc2.com/image/headbar/sh_fc2blogheadbar_logo.png" alt="FC2ブログ" />
			</a>
		</div>
		<div id="sh_fc2blogheadbar_search">
			<form name="barForm" method="get" action="" target="blank" onsubmit="if(this.range.options[0].selected == false) {this.action='http://search.fc2.com/';target='blank';} else {this.action='./';target='';}">
				<input class="sh_fc2blogheadbar_searchform" type="text" name="q" value="" maxlength="30" onclick="this.style.color='#000000';" onfocus="this.select();" onblur="this.style.color='#999999'" />
				<select class="sh_fc2blogheadbar_searchselect" name="range">
					<option value="blog" >このブログ内</option>
					<option value="web" selected="selected">ウェブ全体</option>
				</select>
				<script>
				
				</script>
				<input type="hidden" name="is_adult" value="false" />
				<input type="hidden" name="s" value="y" />
				<input type="hidden" name="charset" value="eucjp-win" />
				<input class="sh_fc2blogheadbar_searchbtn" type="submit" value="検索" />
			</form>
		</div>
		<div class="sh_fc2blogheadbar_link">
		</div>
	</div>
</div>
<br /><?php <br /> $q = htmlspecialchars($_POST['q']);<br />//検索フォーム表示<br />echo <<<HEAD<br /><form action="{$_SERVER['PHP_SELF']}" method="post"> <br />検索文字列:<input type="text" name="q" value="{$q}"><br> <br />表示件数: <select name="i"><br />        <option value="10">10</option><br />        <option value="20" selected="selected">20</option><br />        <option value="50">50</option><br />        <option value="100">100</option><br />      </select><br />検索方法: <select name="smethod"><br />        <option value="tag" selected="selected">タグ検索</option><br />        <option value="word">ワード検索</option><br />      </select><br />検索対象: <select name="scountry"><br />        <option value="japan" selected="selected">日本</option><br />        <option value="">全体</option><br />      </select><br /><input type="submit" name="submit" value="送信"><br /></form><br />HEAD;<br />// set feed URL<br />if($_POST['submit']) {<br />	//ばりでーと<br />      if (!isset($_POST['q']) || empty($_POST['q'])) {<br />        die ('ERROR: Please enter one or more search keywords');<br />      } else {<br />        $q = htmlspecialchars($_POST['q']);<br />        $q = ereg_replace('[[:space:]]+', '/', trim($q));<br />      }<br />      <br />      // set max results<br />      if (!isset($_POST['i']) || empty($_POST['i'])) {<br />        $i = 25;<br />      } else {<br />        $i = $_POST['i'];<br />      }<br />	  <br />      if ($_POST['scountry']=="japan")   <br />	  	$country="&lr=ja";<br />       else <br />	   	$country="";<br />      <br /><br />	//検索方法の指定<br />    if($_POST['smethod']=="tag")  <br />		$feedURL = "http://gdata.<a href="http://blog.fc2.com/tag/youtube" class="tagword">youtube</a>.com/feeds/<a href="http://blog.fc2.com/tag/api" class="tagword">api</a>/videos/-/{$q}/?max-results={$i}{$country}";<br />	else <br />		$feedURL = "http://gdata.<a href="http://blog.fc2.com/tag/youtube" class="tagword">youtube</a>.com/feeds/<a href="http://blog.fc2.com/tag/api" class="tagword">api</a>/videos/-/{$q}?orderby=viewCount&max-results={$i}{$country}";<br /><br />    $sxml = simplexml_load_file($feedURL);<br /><br />    // iterate over entries in feed<br />    foreach ($sxml->entry as $entry) {<br />      // get nodes in media: namespace for media information<br />      $media = $entry->children("http://search.yahoo.com/mrss/");<br />      <br />      // get video player URL<br />      $attrs = $media->group->player->attributes();<br />      $watch = $attrs['url']; <br />      <br />      // get video thumbnail<br />      $attrs = $media->group->thumbnail[0]->attributes();<br />	  <br />	  //画像URL生成<br />      $thumbnail = $attrs['url']; <br />            <br />      // get <yt:duration> node for video length<br />      $yt = $media->children('http://gdata.<a href="http://blog.fc2.com/tag/youtube" class="tagword">youtube</a>.com/schemas/2007');<br />      $attrs = $yt->duration->attributes();<br />      $length = $attrs['seconds']; <br />      <br />      // get <yt:stats> node for viewer statistics<br />      $yt = $entry->children('http://gdata.<a href="http://blog.fc2.com/tag/youtube" class="tagword">youtube</a>.com/schemas/2007');<br />      $attrs = $yt->statistics->attributes();<br />      $viewCount = $attrs['viewCount']; <br />      <br />      // get <gd:rating> node for video ratings<br />      $gd = $entry->children('http://schemas.google.com/g/2005'); <br />      if ($gd->rating) {<br />        $attrs = $gd->rating->attributes();<br />        $rating = $attrs['average']; <br />      } else {<br />        $rating = 0; <br />      } <br />      ?><br />      <br />      <br />      <br />      <div class="item"><br />        <span class="title"><br />          <a href="<?php echo $watch; ?>"><?php echo $media->group->title; ?></a><br />        </span><br />        <p><?php echo $media->group->description; ?></p><br />        <p><br />          <span class="thumbnail"><br />            <a href="<?php echo $watch; ?>"><img src="<?php echo $thumbnail;?>" /></a><br />            <br/>click to view<br />          </span> <br />          <span class="attr">By:</span> <?php echo $entry->author->name; ?> <br/><br />          <span class="attr">Duration:</span> <?php printf('%0.2f', $length/60); ?> <br />          min. <br/><br />          <span class="attr">Views:</span> <?php echo $viewCount; ?> <br/><br />          <span class="attr">Rating:</span> <?php echo $rating; ?> <br />        </p><br />      </div>      <br />    <?php<br />    }	<br />}<br />?><br /></pre>

タグリスト: youtube; api; php

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(1)
カテゴリー: 未分類

[覚書リンク集2]windowsXPでデュアルディスプレイの壁紙を別々にする。

2010年05月11日 19:29

windowsXPでデュアルディスプレイの壁紙を別々にする。
解像度の違う二枚のディスプレイを使っていると、
壁紙が片方収まりきらなかったり、画像を拡大することになって汚くなったりで
残念な感じになる。

マルチディスプレイ環境でディスプレイごとに壁紙を個別設定するソフト
壁紙をデュアルディスプレイ用に結合してくれます。
ただそれだけ。なので使い方も簡単。
ただ設定が「拡大」だと上手くいかない場合、変更してみることをお勧め。

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

PHOTOSHOP CS5 拡大ショートカットキーがグリッドと被ってる

2010年05月07日 15:26

英語版のＣＳ５体験版使ってるからだろうけど、「Ctrl++」で拡大しようと思ったとき、
ショートカットキー(shortcutKey)の設定で上手くいかなかった。
日本語キーボードだから起こるんだろう。
＊英語キーボード使ってる人、もしくは日本語版（未発売）使ってる人にはおそらく関係ない話です。
超備忘録的なものです。

[ctrl+ +] 拡大Ｚｏｏｍ　Ｉｎ
[ctrl+ ;] グリッド grid
日本語キーボードだと　「+」「；」は同じキーに設定されています。

なので、「Edit->Keyboard Shortcuts」から変更。

それから、「Ｓｈｏｗ」のタブ開くと
「Guides」が「Ctrl+;」になってるから変更　

Shift+Ctrl+; は既に使われていたので
未使用のものをさがしていたら「Ctrl+/」があったので、とりあえずそれに変更しておいた。

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(1)
カテゴリー: 未分類

覚書リンク集no.1

2010年05月07日 00:54

久しぶりの更新になりました。
毎日続かないかもしれないけどまた更新していきます。

三階ラボ | 壁紙カレンダー 2010 ver.02
素敵な壁紙カレンダー。
デスクトップの壁紙変えたりしてなかったので使ってみる。

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

東京で就職活動と猫

2010年02月26日 01:53

東京にしばらく就活にいってきました。
また来週もずっと東京です。
なので、もうしばらくは更新できないだろうなぁ。
ということで久しぶりに更新。

5日間東京行っていて、
4日目、六本木で面接等がありました。
伝えられていた時間は3時間と聞いていたんですが2時間で終わり、
時間もあったので、前回着たときは時間が遅くて入ることが出来なかった
『国立新美術館』へいってきた。
美術館自体が面白い形をした建物でした。

ルノワール展というのがやってたけど、お金掛かるので無料で入れる
東京の５つの美大の合同卒業制作展みたいなものを見てきた。

・すごいと思うものたくさん
・意味が分からないものたくさん
・面白い！と思うものたくさん
・鳥肌がたったもの２つ

といった感じでした。
カメラで撮りたいな?って思ってたんですけど美術館だからだめだろうと思ったら
来場者の多くがカメラもっててとりまくってるのをみて驚きました。
なので自分も気に入った作品撮りました。アップはしませんが。
美術館かなり広いので無料で1時間半以上楽しみました。美大生すごい。

そして六本木うろちょろしていたら小さな公園に辿り着いた。

立派な門構えの公園だなと思いはいって見た。

猫がたくさんいてびっくりでした。
近所の世話をしている方と少し話した。
地域猫とかいわれていて近所の人が育てている野良猫（？）みたい。
公園に猫小屋つくったり餌あげに近所の人がきてるらしいです。
この公園には12匹の猫がいました。野良なのに毛並みが良い…ｗ

かわいい。。。

六本木ヒルズ近くから

地下鉄六本木駅近くから

おまけ

ぶらぶら歩いていたら最終的にルイーダの酒場？についた

ルイーダバー？
気づかず通り過ぎ掛けたんですけど、近くにスライムの肉まんが売られていて気づきました

目的なくぶらぶらするの好きです。
毎回迷うけど。

あれ、就職活動にあまり関係ない日記になった

スレッド: ジャンル：就職・お仕事; テーマ：就活　就職活動　新卒　就活ﾎﾟｰﾀﾙ

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: -

[HTML5]新しく追加されたタグメモ１

2009年12月14日 22:30

HTML5で追加されるタグについてのメモ。
まだ、HTML5はOpera10 beta や　safari Firefox3.5（一部）ぐらいでしかHTML5のタグの実装はされていない。

まずブログ的なレイアウトをする場合のマークアップに使えるタグ

・headerタグ　ヘッダー部をあらわす
・footerタグ　フッダー部をあらわす
・articleタグ記事をあらわす
・nav 　サイドメニューをあらわす
・section 節をあらわす

今まで書いていた<div id="header" > </div>といったちょっと冗長な書き方をしなくても
<header> </header> 内にヘッダー要素をかける。
いままでよりも直感的なマークアップが出来そう。
HTML5ブログレイアウトタグ表

実際の仕事とかで使うようになるのは何年後だろう…そう遠くないのかな。。

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

[CSS]お勧めの本。現場のプロから学ぶXHTML+CSS /Web標準の教科書

2009年11月18日 19:02

初めて勉強するのに適した本でした。
CSSnite ビギナーなどでは参考書・教科書として多用されてもいます。

友人に薦められたのと、縁があったので読みましたが、
かなり細かいところまで詳しく載っていて読み応えがあります。（６００ページ以上あります。）
もやもやしてて分からなかった部分も解決できたし、リファレンス的にも使える。
アクセシビリティ、レイアウトテクニック、クロスブラウザ対策まで網羅。
中?上級者にお勧めな本だと思います。　自分でも欲しくなりました。

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

CSSとかXHTMLとかその辺の覚書

2009年11月17日 22:02

WEB標準のメリット
　メンテナンス性の向上（ページ製作負担減）
　アクセシビリティの向上（様々なブラウジング環境に配慮）
　ＳＥＯ対策

ＷＥＢの仕組み
ＨＴＭＬ、ＨＴＴＰ、ＵＲＩ(URI（Identifier）=URL+URN的な感じ)

ロボットの制御
<meta name="ROBOTS" content="INDEX,FOLLOW" />
name="GOOGLEBOT" グーグル用
INDEX そのページ自体を収集対象
FOLLOW リンク先を含める

その他メタ
name
author 作者
copyright 著作表記
reply-to 連絡先・メール
date 日付/更新日

htmlの各要素

＜ブロック要素＞
p 　パラグラフ
　ブロック要素を含むことは出来ない。

　<br />(空要素)　視覚効果、デザインに使うべきではない。
　　　意味的な改行の明示に用いるのが適当かも。
　　　XHTML2.0では br要素廃止、<l>要素に変わる。
　　　<l>＿</l>　lineのこと。<br/>と違い、空要素じゃない。

hr 横罫線
　　XHTML2.0では廃止予定、　
    separator要素が変わりに登場予定。空要素。

blockquote　ブロックレベル引用
　　ブロックレベル要素だが、直接インライン要素やテキストを
　　含むことが出来ない。(p要素などを使う必要がある。)
　　cite属性に引用元URLを指定すべき。
    title属性に引用元タイトルを入れとくとベター。

q   インラインレベル引用
　　XHTML2.0で廃止、quote要素導入予定。

table
   cellspancing属性　セル間の間隔
　 cellpadding属性セル内の間隔
　 rowspan,colspan属性　グループ化する数

＜インライン要素＞　
em 強調
strong さらに強調
abbr 省略
acronym 頭文字
ins 追加文（デフォルトCSSだとアンダーラインが入ることが多い）
del 削除文（打ち消し線が入ることが多い）

<グループ化要素>
div(ブロックレベル) とspan（インラインレベル）
divの中にインライン要素やテキストを含めるべきでない。
　

色の指定法
rgb(赤,緑,青) 0-255 もしくは、0-100%で指定
> color: rgb(255,0,0); 赤の指定。

リンクの擬似クラス指定法
a:link , a:visited , a:hover , a:active
の順に書くべき。

＜display属性の値＞
block ブロックボックスとして生成
inline インラインボックスとして生成
list-item li要素のようにリスト項目として.
inline-block 内容はブロックとして配置、要素自体はインラインとして配置。

＜テキスト＞
text-decoration: line-through 打ち消し線を引く
word-spancing 単語間隔

<リスト>
list-style-type
値>
none なし
disc 黒丸
circle 白丸
squeare 四角
decimal １から１０進数でカウントアップ
loewer-roman ,upper-roman ローマ数字
lower-alpha,upper-alpha アルファベット
lower-greek　ギリシャ文字（css2）

<カーソル>
　cursor
値
　crosshair 十字線
pointer リンクを示す。(これ使うこと多いかも)
move 移動可能を示す。
text テキストを選択可能を示す。
wait ビジー状態。砂時計とか。
画像ファイルも指定できる。 .curファイル

コメントをする・見る: Comment(2)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

覚書ブックマーク

2009年11月06日 21:45

女子美術大学　公式ホームページ
　＞女子美術大学　"新しいワタシ、生まれる。"
とりあえず見てて学ぶところが多そう。
フラッシュびゅんびゅん動くし、配色、レイアウト、javascriptライブラリーをたくさん使っているし、progressionを使っているみたいだし、ＣＳＳ＋ＸＨＴＭＬのマークアップまで。暇があったらゆっくり見ておきたい。
美術系の大学のサイトってどこもこうなのかなぁ。すごい。

なかなか使うことのないHTMLタグの意味・使用方法まとめ
前に<q>タグと<blockquote>タグの違いを友達に聞かれて答えられなかったので、少し参考になりました。いろんなサイトのＣＳＳとかマークアップみてるとたまに分からないタグが出てくるので参考になる。

Wonderwall　
中村勇吾さんのデザインしたサイトを幾つかボーっと眺めてました。
ちょっと気持ち悪いって思ったけど、ぐりぐり動かすとそれが快感のような感覚に変わる
不思議なインターフェイスデザイン。すご。

コメントをする・見る: Comment(1)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

CSSnite Fukushima vol.3 に参加してきました。

2009年11月01日 00:14

初のＣＳＳnite参加でした。
すごく評判が良い勉強会みたいなので楽しみにしていきました。
勉強になったし、こういう話を聞いてるのは楽しいなぁと思いました。

内容としてはＣＳＳnite beginners でしたので、
ＣＳＳ・ＸＨＴＭＬのキホン、
ドリームウィーバーの使い方のデモ、
マークアップ・レイアウトのコツ、
ＣＳＳ分割、
ブラウザ間のＣＳＳ調整（ハック）、
Ｊａｖａｓｃｒｉｐｔライブラリーのキホンと導入
といった内容で全９セクション13時?18時50分の長丁場の勉強会でした。

思ったよりもインターン先や独学で既に学んでいた内容が多かったのですが、
インターン先以外で実際に実務でコーディングをしている人たちの
ＣＳＳ・ＸＨＴＭＬマークアップする際に注意していることや考え方まで聞けて
興味深かったし、知らなかった新たな考え方が新鮮でした。
（特にボックスレイアウトの覚え方の例）
あとはドリームウィーバーのデザインビューがあれほど使えるものだとは
思っていなかったので、あそこに一番くいついてしまいました。

大学の後輩向けにＣＳＳのかなり小さな勉強会を開いたことがあったので
「後輩に教える」という視点で見てるとプレゼンの仕方、作り方、構成、教え方も
かなり参考になりました。
インターン等苦労して覚えてきたからこそ、かなり良い復習になりましたし、
新たしく学べたことも多かったです。
機会があればまた参加したいです。

→ [CSSnite Fukushima vol.3 に参加してきました。]の続きを読む

タグリスト: CSSnite

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: -

リンク紹介、ブックマーク

2009年09月29日 15:33

CSSnite inFukushima Vol.3 開催日時：2009年10月31日（土）　13:00?19:00（予定）
ちょっと遠いですがCSS+XHTMLを学んでいるので参加しようかと思います。
参加申し込み定員まで今見たら２８名だったので検討中の方はお早めに。

MA5（マッシュアップアワード５）11月４日まで作品募集。
参加を検討中。
関係者の話では去年の福島からの参加者はゼロだったそうです。
今年はたくさん参加があるといいんですが…。　

ecoったー
twitterやミニブログ系のサービスのAPIを利用したサービス、自分のプチエコ行動を発言できる。
マッシュアップ系用にアイディアを練ったときに考えていたもののひとつと被っていたので参考になる。

天気予報API　コンテスト締め切り１１月４日まで
天気予報のAPIを提供するサイト。
天気予報のデータを使ったマッシュアップ作品を募集中。
マッシュアップアワード５と合わせて応募できるものを作るのも面白いかも。。。

Seven
フラッシュのゲーム。クオリティ高。星５つぐらいでやめてしまいました。

HTML5　canvas
HTML5のcanvasやvideoの機能がFLASHの脅威になるって言われているのが良く分かる。。

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

［ｃｓｓ］ＩＥでの表示テスト

2009年09月11日 23:33

IE　TESTER
http://www.my-debugbar.com/wiki/IETester/HomePage
Internet Explorer 5.5から8までの表示チェックするのに非常に便利なツールです。
５．５まではやらなくていいにしても、まだIE6のシェアはある程度あるようなのでIE6?８までの表示チェックは必須になってきます。
IE6は難しいやつです；　
フロートをかけらたらmarginが2倍に…とかーー；　

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

気になったサイト

2009年09月03日 01:14

Sketchpiston　チームラボ
http://www.team-lab.com/sketchpiston/index.html
すけっちぴすとん。

http://www.iduplus.jp/
スケッチピストンの作例サイト。
永久機関っぽいのをつくって遊べたりと結構面白い。
これで会社概要のサイトなんて面白すぎる。

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: -

[CSS]FireFoxでリンク選択時にでる枠線を消す方法

2009年08月30日 07:09

FireFoxのブラウザで閲覧していると
ボタンなどをクリックしたときにボタンの形に薄い点線が出てくる。

このような画像のリンクがあったとする。

クリックすると、下のような点線が出てくる。

この点線が出て問題なのは、
テキストを飛ばして画像を表示する場合、飛ばしたテキストのところまで点線が延びてしまうこと。

なのでこの点線を消す方法の例
a { /* FireFox リンク選択時の点線を消す　*/
overflow: hidden;
outline: none;
}
a タグに対してこの二つの値を入れるだけ。
これで点線は消えます。

タグリスト: CSS; スタイルシート

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

[CSS][リファクタリング１]IDとクラスの使い分け

2009年08月29日 07:46

CSS、HTMLのコーディングをしていて、こんな冗長な書き方をしていた。

CSS部

#news_img {
	display: block;
	height: 21px;
	width; 172px;
	background-image: url(../images/news.gif);
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
#update_img {
	display: block;
	height: 22px;
	width; 172px;
	background-image: url(../images/update.gif);
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: -9999px;
}

HTML部

<h5 id="update_img">更新履歴</h5>
<h5 id="news_img">最新ニュース</h5>

サンプル

この画像のようにテキストを飛ばして画像を表示するソースです。

似たようなことを何度も書いていてソースがどんどん長くなってしまうのでまとめます。

似たような部分はクラスでまとめちゃいます。
CSS改善版

.daitai {
	display: block;
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
#news_img {
	height: 21px;
	width; 172px;
	background-image: url(../images/news.gif);
}
#update_img {
	height: 22px;
	width; 172px;
	background-image: url(../images/update.gif);
}

HTML改善

<h5 id="update_img" class="daitai">更新履歴</h5>
<h5 id="news_img"  class="daitai">最新ニュース</h5>

これで　少しスマートな記述になりました。
IDはひとつのファイルに1回しか使えませんが
classは何度でも使えるのでこういう冗長な記述が
多い処理はクラスにすると便利です。再利用可能ですから。

タグリスト: CSS; スタイルシート

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: 未分類

富士山にて

2009年08月29日 06:47

25、26日富士登山してきました。
夜間の登山は流れ星やご来光を見れて素敵でした。

コメントをする・見る: Comment(0)
トラックバックする・見る: Trackback(0)
カテゴリー: -

スポンサーサイト

R言語で固有値固有ベクトルを求める

[PHP][API][Youtube]ワード検索とタグ検索と検索範囲の指定

[覚書リンク集2]windowsXPでデュアルディスプレイの壁紙を別々にする。

PHOTOSHOP CS5 拡大ショートカットキーがグリッドと被ってる

覚書リンク集no.1

東京で就職活動と猫

[HTML5]新しく追加されたタグメモ１

[CSS]お勧めの本。現場のプロから学ぶXHTML+CSS /Web標準の教科書

CSSとかXHTMLとかその辺の覚書

覚書ブックマーク

CSSnite Fukushima vol.3 に参加してきました。

リンク紹介、ブックマーク

［ｃｓｓ］ＩＥでの表示テスト

気になったサイト

[CSS]FireFoxでリンク選択時にでる枠線を消す方法

[CSS][リファクタリング１]IDとクラスの使い分け

富士山にて

my twitter

Twitter Updates

最新記事

カテゴリ

リンク

カレンダー

月別アーカイブ

プロフィール

いろいろ

最新コメント

04 | 2012/05 | 06
日	月	火	水	木	金	土
-	-	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	-	-