最近何かと忙しく書きたい記事を書く時間ないです...
って事11月の人気記事ランキングでも書いておく事にします。
]]> 1. CSS : positionの「absolute」「relative」「fixed」のリファレンス
6つの異なったiPhoneインタフェースオプションに数個のボタンの要素がついて来るビクターセットです。
もちろんダウンロードもフリーですし、レイヤーもきちんと整理されていますよ。
]]> Smashing Magazine
metaタグ内に「キーワード(keywords)」「ページの説明（description）」は入れると思うんですが、それ以外のmetaタグは必要ないのか？実際どれらくいの効果があるのか？って思う人もいるかと思います。
Yahoo! Google 共にメタタグの利用方法やそれについての効果について書いている記事があるので紹介しておきます。
]]> Yahoo! Google を見比べて思った事共に共通して記述していた内容に author robotsってのがりましたよね。
なのでこの二つは入れておいた方が良いって事なのかな？
authorは作成者を記述する事なので、これはGoogleで明確な情報を説明に含める。と記述されている通り、Webページのより詳しい情報を記述しておいた方が良いって意味なのかな？って解釈です。
robotsは一言で検索ロボット制御です。これはGoogleのメタ タグ - ウェブマスター向けヘルプ センターで細かな記述の紹介がされているのでけっこう重要だと思いますよ。
これについての詳しい事は書いてないですね...
よく「metaタグのkeywordsはいくつくらい書けばいい？」「metaタグのdescriptionはどれらく書けばいい？」って聞くので自分なりの意見を書いてみました。
この事についての具体的な数字と言うものは、Yahoo! Google とも公開してないはず？です。
いろんな記事を見たり、話を聞いてる限りでは少なくとも大量のキーワードを入れるのは辞めておいた方がよいと思いますよ。
ちなみに自分はだいたい3～10個までが適度ではないかと思っています。
どんなキーワードでも良いので Yahoo! Google で検索してみて下さい。
そしたらそのキーワードに対する「タイトル」「ページの説明」が表示されますよね？その「ページの説明」が一番長い場所の文字数を数えてみたところ Yahoo! は大体125文字くらい。 Google は大体130文字くらい。って事が直ぐに分かると思いますので、その文字数を目安として「ページの説明」を考えるのが良いかと思いますよ。
head内はWebページ自身に関する情報であり、metaタグとはWebページの文字コードや内容の概要、検索エンジンに対する要求、著作者、作成者、などの情報を記述する為のものであり、二つの記事を読んだ感じ明確な情報記述しておいた方がよさそうなので、必要だと思ったのは記述してみて下さい。
実際「SEO対策」の効果として反映した場合は、その中に書く「キーワード選択」が一番重要だと思うので、効果があるキーワード選択して下さい。
それ以外にも被リンクとか凄く大切だと思いますしね。
自分の経験上titleタグ内に一番重要なキーワードを入れdescription内にそのサブ？的なキーワードを入れておくとけっこう効果があるような気がしてます。
]]>
以前紹介した画像をスクロールさせる jquery.scrollable.jsのjquery.scrollable.jsとJavaScriptを使って画像の切り替え&LightBox使用で使ったスプリクトを使って、並んでる画像はスクロール、それをクリックしたら画像を切り替える画像ギャラリーを作ってみました。
]]> 使い方や解説「jquery.scrollable.js」「jquery.mousewheel.js」をダウンロード。
詳しくは画像をスクロールさせる jquery.scrollable.jsをご覧下さい。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script src="js/jquery.scrollable.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/photo.js"></script>
<script>
$(function() {
$("#scrollable").scrollable({horizontal:true});
});
</script>
#imgMain {
width: 600px;
background: #F4F4F4;
padding: 10px;
margin: 0 auto;
border: 3px solid #D1D1D1;
margin-bottom: 30px;
}
#imgMain img { border: 1px solid #D1D1D1; }
#scrollable {
width: 835px;
background: #EFEFEF;
border:1px solid #DDD;
padding:10px 8px;
height: 120px;
margin: 0 auto 30px;
}
div.items {
width: 788px;
height: 120px;
float:left;
_margin-top: -12px;
}
/* 画像エリア */
div.items a {
display:block;
float:left;
margin-right:8px;
width: 150px;
height: 120px;
}
div.items img { border: 1px solid #D1D1D1; }
/* ボタンエリア */
a.prev, a.next {
display:block;
width: 30px;
height: 30px;
float: left;
margin: 45px 0 0 0;
_margin-top: 40px;
cursor:pointer;
}
a.prev {
margin-right: 8px;
}
a.prev, a.next {
background: url(../image/left.png) no-repeat 0 0;
width: 18px;
height: 18px;
}
a.next {
background-image:url(../image/right.png);
}
a.prev:hover {
background-position:0 -18px;
}
a.next:hover {
background-position:0 -18px;
}
/* .navi */
div.navi {
position:relative;
top: -490px;
left: 460px;
margin-left:-50px;
width:50px;
height:0;
}
div.navi span {
width: 8px;
height: 8px;
float: left;
margin: 3px;
background: url(../image/dots.png) 0 0 no-repeat;
cursor: pointer;
_font-size:7px;
}
div.navi span:hover {
background-position:0 -8px;
}
div.navi span.active {
background-position:0 -16px;
}
div.navi:after {
height:0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
この用になっているので、画像サイズを変えた場合は上記CSSの箇所の「width」「margin」「position」の調整を行って下さい。
※サイズ変更して使う場合はある程度知識がないと難しいかもしれないです＞＜
まー根気よく数字を調整してくれれば大丈夫なはずですけどね...
CSSで枠線を指定する場合にこのborderプロパティを使うわけなんですが、指定の記述方法はいろいろあるわけなんですよ...。
自分は「border」で一括指定か。「border-top」「border-right」「border-bottom」「border-left」の上下左右個別に一括指定する方法しか使いませんので、今回はこの方法で説明したいと思います。
（これが一番記述が短くて済みますし楽だと思いますよ）
div {
border: 1px solid #000000;
}
div {
border-top: 1px solid #000000;
}
div {
border-right: 1px solid #000000;
}
div {
border-bottom: 1px solid #000000;
}
div {
border-left: 1px solid #000000;
}
.sample1 {
border: none;
}
.sample2 {
border: 5px dotted #000000;
}
.sample3 {
border: 5px dashed #000000;
}
.sample4 {
border: 5px solid #000000;
}
.sample5 {
border: 5px double #000000;
}
.sample6 {
border: 5px groove #000000;
}
.sample7 {
border: 5px ridge #000000;
}
.sample8 {
border: 5px inset #000000;
}
.sample9 {
border: 5px outset #000000;
}
]]>
「Animated JavaScript Accordion V2」で配布。紹介されているスプリクトなんですが、容量も少なく、アコーディオンメニュー開閉の動作もスムーズのなので使い方や注意点などを紹介しておきたいと思います。
Animated JavaScript Accordion V2
]]> アコーディオンメニューのダウンロードAnimated JavaScript Accordion V2の Click here to download the source code. って所からファイルを一式ダウンロード出来ます。
このスプリクトを自分のサイトで使いたい場合、ダウンロードしてきたファイルの中にあるscript.jsを任意の場所にアップし、それをheadタグ内で読み込んで下さい。
(jsってフォルダにアップした場合はhead内に下記ソースを追加)
<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("dl要素につけるid名");
</script>
<dl id="menu"> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> </dl>
<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("menu");
</script>
<script type="text/javascript">
var slider2=new accordion.slider("slider2");
slider2.init("dl要素につけるid名",何番目を開いておくか記述,"open");
</script>
<dl id="list"> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> </dl>
<script type="text/javascript">
var slider2=new accordion.slider("slider2");
slider2.init("list",0,"open");
</script>
真ん中に入れる数字なんですが、一番上を0と、二番目を1って計算して数字を入力して下さい。
]]>
こういう風に思っている人っていませんか？
自分も勉強したての頃は分からずに、ググっていろいろ調べてみたんですが、書いてくれいるサイトを見つける事が出来なかった事を思い出したので html・xhtml のリンク先記述について思いつくものをまとめてみます。
]]> リンク先記述の仕方 1URLの最後にindex.htmlがついちゃう人って下記ソースのようにxhtmlを記述しているはずです。
<a href="../index.html">hoge</a> <a href="../../index.html">hoge</a>
それをindex.htmlという記述を消す事で最後につくindex.htmlを表示しなくなってくれるんですよ。
<a href="../">hoge</a> <a href="../../">hoge</a>
CSS Lectureのソースを見てもらうと分かると思うですが自分は殆どの場合リンク先の指定を｢/｣から初めています。
<a href="/">トップページ</a> <a href="/log/">全エントリー一覧</a>
これで言う｢/｣は分かりやすく言えば、そのサイトのURLになっちゃうわけなんですよ。
なので上記ソースはイメージとしたらこういう感じですね。
<a href="http://www.css-lecture.com/">トップページ</a> <a href="http://www.css-lecture.com/log/">全エントリー一覧</a>
自分が何故この記述でするかというとメリットが多いと思うからです。
まぁーこれも今までに説明した通りですねけどね＞＜
例えば「hoge」ファイルの「id="anchor"」部分にリンクを飛ばしたい時の例を挙げてみます。
（トップページに居ると仮定します）
<a href="hoge/index.html#anchor">hoge</a>
「 http://www.css-lecture.com/hoge/index.html#anchor 」
<a href="hoge/#anchor">hoge</a>
「 http://www.css-lecture.com/hoge/#anchor 」
<a href="/hoge/#anchor">hoge</a>
「 http://www.css-lecture.com/hoge/#anchor 」
まーこんな感じで知らなかった人は参考にでもして下さい。
]]>
beautiful-sin.netさんで紹介されている汚れた感じの不陰気雰囲気を出してくれるPhotoshopのブラシツールが良いと思ったので紹介しておきます。
JavaScript Table Sorterで配布。紹介されているスプリクトなんですが、容量も少なく、設置も簡単なのでテーブルをソートさせたいと思っている方は是非使ってみて下さい。
※jQueryやPrototypeなど他のスクリプトは必要ありません。
]]> 使い方JavaScript Table Sorterの｢Click here to download the source code.｣からダウンロード。
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var sorter=new table.sorter("sorter");
sorter.init("sorter",1);
</script>
使いたいtable要素に｢id="sorter"｣と記述すとtd内がソートします。
この時タイトルに使う要素はちゃんと｢th｣にしておきましょうね。
それで｢th｣でソートさせたくない部分には｢th class="nosort"｣と記述して下さい。
これだけでソートするテーブルが出来ちゃいます。
]]>
前回はXAMPPインストール方法を紹介しましたので、今回は最低限の設定方法。使い方を紹介したいと思います。
]]> XAMPPの設定方法初期設定のままだと外部からアクセスできてしまうので.htaccessでアクセス制限をかけておいた方がいいと思いますよ。.htaccessに記述するのは下記の通りです。
Order deny,allow Deny from All Allow from localhost 127.0.0.1
.htaccessが出来たら C:\xampp\htdocs\.htaccess に保存して下さい。
これで外部からのHTTPでのアクセスを防ぎます。
Apacheにある｢管理ツール｣を押すと管理画面にいきます。
ここで細かい設定とか行いますよー
ちなみにこの管理画面のは C:\xampp\htdocs\xampp に存在しております。
なのでテストを行いたい時は C:\xampp\htdocs 内に自分の好きなフォルダを作ります。
例として｢hoge｣ってフォルダを作り、その中にindex.phpってファイルをあげとするとURL上では http://localhost/hoge/index.php にアクセスするとPHPが動いてくれるってわけなんですよ。
XAMPPがあればPHP以外にも使い道はいろいろあるので何かと便利ですよ。
自分も使いこなしてるってわけではないので、詳しい事は全然分かってないですけどね...
もう少し細かな点を知りたければphpspotさんをご覧下さい。
XAMPPはApacheFriendsによって開発＆提供されたソフトです。
PHPは普通のローカル環境では動かないので、それをXAMPPを使う事でローカル環境でも実装する事が出来るようになるんです。
またPHP4,5の切り替えもでき、mbstringもつかえるので、phpdevなどを使っている方にもお勧めしますよ。
当然、MySQLもインストールされ、phpmyadminもデフォルトでインストールされますので管理も簡単です。
]]> XAMPPのインストール手順
インストールが完了しましたら｢マイコンピュター｣→｢ローカルディスク｣の中に｢xampp｣ってフォルダが出来ていますので、覚えておきましょう。
それでは次はXAMPP設定方法、使い方の紹介へ移りたいと思います。
]]>
今回ご紹介するTooltipsとはCreate simple tooltips with CSS and jQuery - Part 2: Smart Tooltipsでご紹介されています。
使い方が分からないよ＞＜って人の為に使い方や少しいじる程度の解説でもしておきます。
]]> Tooltips
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append(""+$(this).attr('title')+"
");
var my_tooltip = $("#"+name+i);
if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){
$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
var border_top = $(window).scrollTop();
var border_right = $(window).width();
var left_pos;
var top_pos;
var offset = 20;
if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
left_pos = kmouse.pageX+offset;
} else{
left_pos = border_right-my_tooltip.width()-offset;
}
if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){
top_pos = border_top +offset;
} else{
top_pos = kmouse.pageY-my_tooltip.height()-offset;
}
my_tooltip.css({left:left_pos, top:top_pos});
}).mouseout(function(){
my_tooltip.css({left:"-9999px"});
});
}
});
}
$(document).ready(function(){
simple_tooltip("a","tooltip");
});
Create simple tooltips with CSS and jQuery - Part 2: Smart Tooltipsで公開されてソースそのままなんですがこのままだと全てのaタグのtitleに反応してしまいます。
サイトの一部だけに使いたい場合は一番下に記述されているソースを変更して下さい。
例えば｢id="contents"｣内のaタグだけに効かせたい場合は下記ソースのようになります。
$(document).ready(function(){
simple_tooltip("#contents a","tooltip");
});
後触るとしたらポップアップ時の表示位置についてと思うですが、下記ソースの数値を変更したら表示位置が変わりますよ。
var offset = 20;
ちなみにポップアップに表示されているソースはこんな感じです。
<div class="tooltip"> <p>aタグのタイトル内のテキストがここに反映されます。</p> </div>
XHTMLが上記ソースなので、それをCSSでデザインしたらいいだけです。
div.tooltip {
width: 250px;
position: absolute;
left: -9999px;
background: #EEE;
padding: 5px;
border: 1px solid #AAA;
}
div.tooltip p{
color: #FFF;
background: #222;
padding: 5px 10px;
}
※｢position: absolute;｣、｢left: -9999px;｣で指定してあるのは、一度のプレビュー時に表示を消しておく為のものです。
参考程度にデモページでもご覧下さい。
]]>
立体的に作られた18種類のグラフアイコンが無料で配布されています。
アイコンの形式は透過PNGで祭事は｢32×32｣、｢64×64｣、｢128×128｣、｢256×256｣、｢512×512｣といろんなサイズをセットにしてで配布されていますので、サイズで困る事はないと思います。
]]> Smashing Magazine
今回はCSSでもけっこう使う頻度の高いbackgroundプロパティについて書いていきたいと思います。
CSSをまだ勉強中の人とかとくに｢background-color｣｢background-image｣｢background-repeat｣は使えると思うですけど、や｢background-position｣を案外使いこなしていなかったり、｢background-attachment｣については知らないって人ってけっこういるような気がします。｢background-attachment｣は実際にほとんど使わないですけどね；
まぁーそんな感じでbackgroundプロパティの解説に移りますねぇ～
]]> background-colorの使い方、意味名前の通り背景色を指定します。
何も指定しなければ透明（transparentを指定した時と同じ）になります。
body {
background-color: #000000;
}
名前の通り背景に画像を指定します。
何も指定しなければ画像が存在しないこと（noneを指定した時と同じ）になります。
画像へのパスは相対パスか絶対パスどちらでも大丈夫です。
またbackground-colorを先に使っていた場合、その上に指定した画像がのるって感じですね。
body {
background-image: url(image/hoge.gif);
}
名前の通り背景画像の繰り返し方法を指定します。
何も指定しなければ縦横方向に繰り返される repeat がかかっている状態です。
body {
background-image: url(image/hoge.gif);
background-repeat: repeat-x;
}
repeat-xは横方向だけに指定された背景画像を繰り返します。
body {
background-image: url(image/hoge.gif);
background-repeat: repeat-y;
}
repeat-yは縦方向だけに指定された背景画像を繰り返します。
body {
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
}
no-repeatは背景画像を繰り返さないです。
body {
background-color: #000000;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
}
背景画像の位置の初期値を指定します。
何も指定しなければ左上端（top leftまたは0 0）の状態です。
それ以外にもpxやem,%でも細かい位置の調整が出来ます。
body {
background-color: #000000;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
background-position: top right;
}
body {
background-color: #000000;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
background-position: top center;
}
body {
background-color: #000000;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
background-position: 50px 100px;
}
背景画像のスクロール方法を指定します。
何も指定しなければ文書のスクロールと一緒にスクロールする（scroll）の状態です。
#contents {
height: 200px;
padding-left: 280px;
overflow-y: scroll;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20px 10px;
}
このままの記述ではIE6 には対応していないのでよね...IE6 に対応させる記述は
IE6でbackground: fixedを実現する:CSSを参考にさせて貰いました。
今回の場合は下記ソースをつけ加えて下さい。
* html #contents {
background-position: expression('10px '+this.parentNode.scrollTop + 'px');
}
背景指定の省略化です。
ちなみに自分はこの省略したbackgroundがしか使わないです。（理由としては記述が短くなるからです。）
body {
background: #000 url(image/hoge.gif) no-repeat fixed right bottom;
}
自分は｢background-color｣｢background-image｣｢background-repeat｣｢background-attachment｣｢background-position｣って順番に記述しています。
そんな感じで長くはなりましたが、backgroundの知らない使い方があった！って言う人も中には居ると思いますので、今後の参考にして下さい。
]]>
今回は基礎中の基礎の事なんですが、CSSを勉強し始めるていざサイトを作っている時にブラウザー事にフォントサイズが違ったり、marginの具合が違った現象を経験した事ってありませんか？
ブラウザー事の表示の違いのうんぬんがまったく分かっていないと相当困っちゃいますよね＞＜
なので今回はブラウザー事に表示が違うフォントサイズやmarginやpaddingを統一する為の記述を解説していきたいと思います。
]]>まず一番最初にCSSを何も設定しない状態でhtmlタグの表示の違いを見てみましょう。
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0; padding: 0;
}
使うであろうhtmlタグのmargin,paddingを0 に指定。
するとこんな感じに表示が変わります。
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
先にフォントサイズが明らかに違うh タグを統一しておきます。
body {
font-size: 75%;
}
html>/**/body {
font-size: 12px;
}
ここで基準フォントサイズをどのブラウザーでも12px相当に統一。
ちなみに今の状態はこんな感じですね。
body {
font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height: 150%;
}
* + html body {
font-family: "メイリオ","Meiryo";
}
はっきり言ってここは個人差が出ると思うのですが、自分はこのように指定していますね。
html {
overflow-y: scroll;
}
table {
border-collapse: collapse; border-spacing: 0;
}
img {
border: 0;
}
li {
list-style-type: none;
}
最低限を記述するとこんな感じですね。
ざっとこんな感じで初期状態のブラウザの違いに悩まされる事はないと思いますよ。
後自分は上記説明した意外にも少し項目を追加しているのをdefault.cssとして最初に読ませているのでダウンロード出来るようにしておきますね。
まー昔にブラウザスタイルの初期化する為のデフォルトCSSという記事を書いたのですが、この時のを少し修正してますので下記からダウンロードして使って下さい。
]]>