ピュアCSSでApple風デザインのアコーディオン型ナビゲーションを作ってみる | チバのブログ
なんて呼べばよいのかわからないんですが、「Apple風デザインのアコーディオン型ナビゲーション」と紹介されているものをピュアCSSで作ってみたので公開してみます。 Create an apple style menu and improve it via jQueryで紹介されているKwicks Menu with jQueryみたいなナビゲーションです。 webkit（Safari/Chrome）でしか動きを確認していないので、SafariかChromeで見てください。 Create an apple style menu and improve it via jQuery Kwicks Menu with jQuery ピュアCSSでApple風デザインのアコーディオン型ナビゲーション（デモ） HTMLソース <ol>タグを使用しています。 <ol> <li class="home
CSS3を使ったボタンデザイン | チバのブログ
CSS3の「これは！」という機能を紹介するエントリーの第2回。CSS3で作るボタンデザインを紹介します。 前回は画像を使わずに角丸を作るborder-radiusというプロパティの紹介だったのですが、ただの仕様書の写しのようになってしまいました...。 前回の反省も踏まえて、今回はサンプル付きで紹介したいと思います。 ボタンのデザインの参考にしたのはButton Design Showcaseというエントリー。 Button Design Showcaseの中から、CSS3で作れそうなものをいくつかピックアップしました。 ※サンプルはFirefox3.5～、Webkitでしか確認していません。 かっこいいボタンがいくつもあったのですが、CSS3の新機能を紹介できそうなボタンのデザインとして以下の3つを選びました。 アップル風のボタン 透過pngのグラデーションを使ったボタン RGBa
XHTMLをHTMLに変換するプラグイン | チバのブログ
このブログをHTML5に組み替えようと思ったときに面倒だったのが記事内のタグの変換でした。 管理画面のエントリー検索を使って、記事内の「 />」を「>」に変換することは簡単ですが、画像の挿入で生成されるソースも<img />となっているので、それらを新しく記事を書くたびに手作業で変換するのはかなり面倒です。 XHTMLに戻したくなったときにもまた書き換えなくてはいけません。 XHTMLからHTMLへの変換がテンプレートできれば一番簡単だと思い、perlの練習もかねてプラグインを書いてみました。 変換の方法などいろいろと不備はあるかもしれませんが、せっかくなので公開してみます。 XHTML2HTMLプラグインについて XHTML2HTMLプラグインは記事に書かれているXHTML形式の要素（<br />・<img />など）をHTML形式（<br>・<img>など）に変換するというだけの
jQueryだけで右クリックを禁止する | チバのブログ
画像などを右クリックから保存することができないようにするjQueryのプラグインが右クリックなどの画像ダウンロードを防止するjQueryプラグインで紹介されていたので、自分も書いてみようと思う。 ブラウザの画面上で右クリックを禁止するためには、禁止したい画像などにoncontextmenu="return false;"と書けばよいのですが、全部の画像に書いているととても面倒なので、この部分をｊQueyを使って実装してみるという方法。 ドラッグとか、画像のURL直うちで保存されたらもうどうしようもないですが、ある程度だったら防げるかなと思います。bind()を使う 右クリックを禁止するためにjQueryのbind()という関数？を使います。 一番単純な例だとこんな感じ。 $(document).ready(function(){ $(document).bind("contextme
YUI CompressorでjavascriptやCSSを連結・圧縮 | チバのブログ
GoogleのPage SpeedやYslowの項目の中に「gzipで圧縮してね」みたいなものがある。Java ScriptやCSSをgzipで圧縮することについては前に試して結構圧縮されたんだけど、どうせやるならもっと圧縮してやろう！ってことになりまして、YUI Compressorに手をつけました。YUI Compressorっていうのはヤフーが配布しているJava ScriptやCSSの圧縮用のライブラリです。 圧縮といってもzipにするとかそういうものではなくて、余計な改行なんかを取り除いてくれるツールです。圧縮後はjquery-min.jsの中身みたいに何が何だか分からなくなりますが、動作としては同じように動いてくれます。 このブログでいえば、jquery.js・yuga.js・jquery.corner.jsをほとんどのページで読み込んでいるので、これを1つのファイルにまとめ
ディレクトリ構成を変更したのでその時の作業メモ | チバのブログ
今まで記事詳細ページのURLが/articles/***.htmlとしていたんですが、何やらSEO的によろしくない（もっと良いURLがある）という記事をいくつか目にしたので、一気に変えてみました。 それに伴って、今までのURLから新しいURLへリダイレクトの処理をしなければいけなかったので、その方法をメモ代わりに書いておこうと思います。リダイレクトするために古いURLの一覧を作る 古いURLから新しいURLへリダイレクトするために、.htaccessにはこんな感じで書かないといけないので、それぞれの一覧を取得します。 記事の数が数百にもなってくるとすべてのURLを完全に覚えていられない、と思いますが、このブログではMTをを使ってURLの一覧を作成しました。 まず、URLの一覧取得用のインデックステンプレートを作ります。テンプレート名は適当でいいです。 以下のテンプレートをコピペして再
CORESERVERでCGI版PHPを使って携帯サイトを作る際の注意 | チバのブログ
CORESERVERではPHPをCGIとして動かすことができます。 CGI版として動かした方がいろいろと便利な事が出来るっぽいんですが、携帯サイトを作ろう！っていう場合は気をつけなければいけないこともあります。 これに気付かずに2時間くらいはまってしまったので、忘れないように書いておこうと思います。 CGI版PHPの使い方などはPHPをCGIとして動かす方法について - XREA&CORE SUPPORT BOARDをご覧ください。 CORESERVERで携帯サイトを作る PHPをCGIとして動かす方法についてに書かれている方法は.htaccessに1行追加するというだけなんですが、その方法を使ってしまうと、Content-Typeがtext/htmlに固定になってしまいます。 PCサイトを作っている場合には特に問題ないと思いますが、携帯サイト（ドコモでCSSを使う場合）やRSSなどの
CSSの@importを無くしただけで劇的にレンダリング速度が速くなった | チバのブログ
今日、仕事で試してみたのですがとても効果があったので書いておこうと思います。 なにかというと共通のCSSとかjavascript用のCSSとかをまとめて@importで読み込むためにimport.cssとかって作ったりしますが、そこで読み込んでいる順番で<head>に書いてえば@importで読み込んでいるCSSが多い時はサイトのレンダリングの時間がかなり早くなります。 import.cssの場合 例えばこんな感じでCSS内で共通のCSSをインポートしていると思います。で、それを各ページ用のCSSでまたimportするみたいな感じです。 @import 'reset.css'; @import 'font.css'; @import 'thickbox.css'; 変更後 これを以下のように変えるだけで今回の案件では劇的にレンダリングの速度が変わりました。 <head> <link re
JavaScript（jQuery）で簡単にCookieを使う事が出来るプラグイン | チバのブログ
開閉式メニューやフォントサイズの変更など、jQueryを使って作ったスクリプトの状態をCookieを使って保存できないか...？と思って探してみたら結構見つかってしまいましたので、備忘録も兼ねて書いておきます。 jQuery.cookie.jsプラグイン ｊQueryを使ったスクリプトでCookieを使うには、jquery.cookie.jsというプラグインがとても便利です。 使い方はデモページのソースを見てもらえればわかると思いますが、それだけでは備忘録にならないので簡単な使い方を書いておきます。 jquery.cookie.jsは以下のサイトからダウンロード出来ます。 Plugins | jQuery Plugins 基本的な使い方 jquery.cookie.jsを使ってCookieの読み込んだり書き込んだりする時の基本的な使い方です。 読み込み $.cookie('クッキー名'
チバのブログ: ブログ内の記事をランダムに推薦してくれるボタン（MT専用）
Copyright © chibatch.jp All Rights Reserved. | お問い合わせ先
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
