カテゴリー : プログラミング

ちょっと変わったCSSメニューボタン

Cool Sprites – Free overlapped CSS menu using CSS Sprites
CSS3 メニューボタン sprite

このボタンの画像ファイルがHTML、CSS、PNGのファイルがセットでダウンロードできます。

Sample HTML Code

<div class="navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="#"></a></li>
  </ul>
</div>

Sample CSS Code

.navi1 {
    display:block;
    height:72px;
    margin:0 auto;
    position:relative;
    width:525px; }
.navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.navi1 ul li {
    background-image:url(tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.navi1 ul li:hover {
    z-index:1000; }
.navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
    background-position:-498px -75px; }

PSDファイルもダウンロードできます。

CSS3で作成するボタンテクニック

最近CSS3のボタンばかり紹介していますが、いろいろいじってて楽しくなってきてまして・・・
またまたCSS3のメニューボタンの作り方をご紹介させていただきます。

CSS3で作成するボタンテクニック

jQuery style menu with CSS3
css3 botton jQuery style

How To Create Depth And Nice 3D Ribbons Only Using CSS3
3D CSS Ribbon

CSS3アニメーションボタン「Radioactive Buttons」

Radioactive Buttons
css3-animation

CSS3でアニメーションを使ったボタン。
Webkitブラウザ(Safari、Google chromeなど)でみると、ぼわ~っと光ってきます。
FireFox3.6やIE8では、このボタンの効果は表現されません。

作り方は以下ZURBのPlaygroudの通り。

@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}
  a.green.button {
   -webkit-animation-name: greenPulse;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
  }

CSS3メニューボタン「CSS Menu Maker」

css3 ボタン

CSS3のメニューボタンを簡単に作成してくれるソフトウェア「CSS Menu Maker」
これがあれば、簡単にボタンを出力してくれます。
フリーウェアです。
CSS3のみでボタンが作られるので、SEO的にも良い。
サポートブラウザは、FireFox、Chrome、Safari、Opera、IE(IE6は除く)に対応。
対応OSは、WindowsとMac。

CSS3 Menu. Free CSS Menu Maker

便利です。

カワイイCSS3のボタン

CSS3 BonBon Sweet
BonBon Sweet CSS3 Buttons

カワイイCSS3のボタン。
CSS3のみを駆使してこのようなボタンを作っています。
ダウンロードして、いろいろ数値などを変更してみると立体感や形、光沢の具合が変わります。
CSS3のみでボタンが作られているのでSEOにも優しいです。
ブラウザごとに少し見た目が変わります。
ちょっと勉強で試してみるのもいいかもしてません。

私もHTML5やCSS3に全然ついていけていないので、勉強中です。
もっと早く勉強しておけばよかったぁ

HTML5・XHTML DOCTYPEと文字コード

HTML5とXHTMLのDOCTYPE・文字コード情報の違いについて。

http://www.w3.org/TR/html5-diff/
HTML5サンプル

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

このサンプルを見ると、

<!doctype html>

とDOCTYPE宣言されています。
HTML5では、頻繁に書く必要のあるものは簡単に書けるようにしよう!という考えがあり、簡単になっています。

XHTMLでは、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

でした。

文字コード情報も短くなりました。
HTML5
[hrml][/html]
となりました。

XHTML
[hrml][/html]
でした。

HTML5になると、いろいろ簡単になりますね。

WordPressとCSSデザインショーケース(リンク集)

参考になるサイトが数多く掲載されています。

CSSのデザインショーケース

CSS Mania
css mania

CSS REMIX
css remix


WordPressデザインショーケース

WPGlobe
WPGlobe

HTML5 サイトリンク集『HTML5 Gallery』

ギャラリーサイト『HTML5 Gallery』ではHTML5で作られたサイトをまとめて紹介しています。

html5gallery

html5 gallery


HTML5 Gallery

HTML5のサイト制作するのに、参考になるかも。
頻繁に更新してます。

サクラエディタでPHPの色分け設定など

サクラエディタでPHPの色分け設定

「設定」→「共通設定」の「強調キーワード」

C:\Program Files\sakura\keyword から PHP.KWDをインポートします。

「設定」→「タイプ別設定一覧」

スクリーンタブ
設定の名前:PHP
ファイル拡張子:php

カラータブ
強調キーワード1:PHP
コメントスタイル ブロック型:/* ~ */
コメントスタイル 行型://

支援タブ
入力補完機能にPHP.KWDを選択する。

キーワードヘルプタブ
辞書ファイルにphp.khpを選択する。
(C:\Program Files\sakura\keywordから)

PHPのテキストエディタ(Windows)

PHPのテキストエディタ。
PHPの勉強を始めるにあたって重要な気がします。
テキストエディタはいろいろあります。

個人的には
無料のPHPのテキストエディタは
EmEditor Freeサクラエディタが使いやすい。

サクラエディタは、PHPの色分けなどの設定が面倒・・・
EmEditorは、設定しなくても良いので、楽ちんです。
TeraPadはデフォルトでPHPに対応していない。(代用可能)
Eclipseは、PHPの勉強目的には重たすぎます。(テキストエディタじゃないか・・・)
後々Eclipseを使うことを視野に入れているなら、慣れるために使うのは良いかもしれません。

有料なら
秀丸エディタが使いやすい。
DreamWeaverは、便利だけど重たい。(これもテキストエディタじゃないか・・・)

秀丸エディタは、『フリー制度』というものがあり、学生で金銭的に難儀な方を対象に無料でライセンスを配布してくれます。
しかし、学校卒業後は対象外です。
学生のときに無料で使わせてもらったら、慣れるし、何より恩を感じて使い続けちゃいそうですね。

無料テキストエディタ

EmEditor Free
サクラエディタ
Eclipse

有料テキストエディタ

秀丸エディタ

他にもいろいろありますが、自分にあったテキストエディタを見つけるとストレスなく勉強が進めることができると思います。