CSS3 ちょっといじってみる。 Vol.2

2011.04.30 Sat

またCSS3をちょっといじってみました。テキストに影を付けることができるtext-shadowです。

text-shadow <ドロップシャドウ>

dakkie.com

.text_shadow {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: 1px 1px 1px #222222;
  font-size: 124%;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadow <へこみ>

dakkie.com

.text_shadow_2 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: -1px -1px 1px #222222;
  font-size: 124%;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadowは下記のような指定の方法です。

text-shadow: 右方向へのズレ, 下方向へのズレ, ぼかし具合, 影の色;

右方向へのズレ、下方向へのズレはマイナスの値を指定すれば、左方向へのズレ、上方向へのズレになります。
また、ぼかし具合は0から値を指定することができます。値を0に指定した場合は、線のようになります。マイナスの値は指定できません。

このtext-shadowは、「,(コンマ)」で区切ることによって複数の値を指定することもできます。

text-shadow <縁取り>

dakkie.com

.text_shadow_3 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: 0 -1px 0 #ffffff, 1px 0 0 #ffffff, 0 1px 0 #ffffff, -1px 0 0 #ffffff;
  font-size: 124%;
  color: #222222;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadow <立体的>

dakkie.com

.text_shadow_4 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: 1px 1px 0 #cccccc, 2px 2px 0 #cccccc, 3px 3px 0 #333333;
  font-size: 124%;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadow <エンボス>

dakkie.com

.text_shadow_5 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: -1px -1px 0 #ffffff, 1px 1px 0 #222222;
  font-size: 124%;
  color: #0066cc;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadowは、かなり使えそうですね。CSSだけである程度テキストの装飾ができてしまいます。


Google 404. That’s an error.

2011.04.29 Fri

Googleで初めて404ページを見たので、思わずスクリーンショットを撮ってしまいました。壊れたロボットのイラストが描かれています。


HTMLやCSSの文法をチェックする。

2011.04.28 Thu

HTMLの文法が正しいかどうか、何か間違いはないか。
Webサイトのページ数が多かったり、多くのHTMLやCSSを書いていたりする場合、全てをチェックするのはとっても大変です。

そんな時に便利なのが下記のようなチェックツールです。

The W3C Markup Validation Service

W3Cが提供しているHTMLの文法をチェックするサイトです。URLを入力するか、ファイルを参照するか、またはHTMLを貼り付けるかして「Check」ボタンを押すと、HTML/XHTMLの仕様で正しく記述されているかがチェックできます。

Another HTML-lint gateway

これもHTMLの文法をチェックするサイトです。URLを入力するか、HTMLを貼り付けるか、またはファイルを参照するかして「チェック」ボタンを押すと、100点満点で採点してくれます。チェック項目を細かく指定することができます。

W3C CSS 検証サービス

W3Cが提供しているCSSをチェックするサイトです。URLを入力するか、ファイルを参照するか、またはCSSを貼り付けるかして「検証する」ボタンを押すと、CSSが正しく記述されているかがチェックできます。


WordPressの投稿画面にクイックタグを追加する。

2011.04.21 Thu

投稿画面にはデフォルトで「<strong>」や「<a>」などのクイックタグが用意されているけど、独自にタグを追加したい時に手打ちするというのは面倒です。

そこでWordPressの投稿画面にクイックタグを追加できるプラグイン『AddQuicktag』があります。

このプラグインをインストールして、WordPressの管理画面にある「設定」から「AddQuicktag」をクリックすると、上の画像のような設定画面があらわれます。

ラベル名
クイックタグに表示する名前

Title Attribute(タイトル属性)※
クイックタグをマウスオーバーした時に表示するテキスト

開始タグ
HTMLタグの開始タグ

終了タグ
HTMLタグの終了タグ

※Title Attribute(タイトル属性)は空でも良いので今回は省略します。ただ空にするとマウスオーバーした時に数字が表示されます。

1.HTMLタグを追加する。

例えば「h3」をクイックタグに追加したい時は、ラベル名に「h3」、開始タグに「<h3>」、終了タグに「</h3>」と入力します。すると「タグを閉じる」の隣に「h3」というクイックタグが追加されるのです。

2.id属性やclass属性を付ける。

id属性やclass属性を付けるようなクイックタグを追加することもできます。
例えば、下記のコードのようなclass属性を開始タグに入力するだけです。

class="blue"

id属性やclass属性の前に半角スペースを入れて登録しておくと、いちいち半角スペースを入れる手間が省けるので使う時に便利です。

また、下記のコードのようなtarget属性に加え、alt属性やtitle属性といったものも開始タグに入力して登録することができます。

target="_blank"

さらには、下記のコードのような定型文を開始タグに入力して登録することもできます。

<h3>見出し</h3>
<p>テキスト</p>

このプラグインはとっても便利なので、ぜひ使ってみてください。記事を書くのが楽になると思います。

AddQuicktag
http://wordpress.org/extend/plugins/addquicktag/


最近の気になるWebサイト Vol.1

2011.04.18 Mon

Webクリエイターを目指してるわけだし、気になったWebサイトの紹介でもしようということで紹介します。

スッキリ!JAPAN

「5月16日になにかが起こる。」とだけ発表されている謎のサイトです。数秒で変わるメッセージと少し不気味なBGMが流れています。

またソースコードには上の画像のように謎の人物が描かれていて、何か文字も書かれています。一体なんなのでしょうか。

The World’s Biggest Pac-Man

あの「パックマン」が遊べるサイトです。HTML5で作られています。ステージを一つ一つクリアしていく従来のパックマンとは違って、このパックマンは上下左右に別のステージがつながっていて、そこでまたゲームを進めていきます。終わりの見えないゲームとなっています。

Pica Pic

こちらもゲームですが、あの「ゲーム&ウォッチ」が遊べるサイトです。ただのギャラリーではなくて、実際にプレイすることができ、ハイスコアも記録されます。サイトのデザインも良い感じです。


page 1 of 3123