【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。
地味なパーツながら実は便利。そのためコーディングをする機会も多いと思われるのが「パンくずリスト」です。 シンプルなコーディングでちょっと気の利いた「パンくずリスト」を実現する方法をご紹介します。 パンくずリストの XHTML のサンプルは以下です。とてもシンプルです。 <ol id="topicPath"> <li class="home"><a href="hoge">ホーム</a></li> <li><a href="hoge">アニメ</a></li> <li><a href="hoge">ガンバの冒険</a></li> <li><em>ボーボ</em></li> </ol> サンプル1 とてもシンプルなパンくずリスト とてもシンプルなパンくずリストのサンプルです。 ホーム アニメ ガンバの冒険 ボーボ CSS はこちら ol#topicPath { margin: 20px 0;
[Photoshop CS5] 画像処理が格段に楽になる Photoshop アクションいろいろ | バシャログ。
みなさんはじめまして。 シーブレイン、Webデザイナーの Latin です。 今回が初ブログとなります（汗）今後ともどうぞ宜しくお願いいたします。 早速何を書こうか非常に悩みましたが、まずは基本に立ち返り、"画像処理作業"などの日常のルーティンワークを格段に早く、効率的にする事ができる Photoshop のアクションコマンドをまとめてみました。 え？そんなもん既に使ってるって？ そうおっしゃらず･･･まだ使ってない方はぜひ一度試してみてくださいね！ 今回は私が個人的によく使っているアクションコマンドと、有用性の高そうなものをご紹介させていただきます。 その前に Photoshop アクションコマンドの簡単な説明を。 【 Photoshop のアクション】とは？ 例えば、写真のリサイズや色調変換などの作業を10回･･･100回と繰り返しやってると嫌気が差してきますよね＾＾； アクションはそ
![[Photoshop CS5] 画像処理が格段に楽になる Photoshop アクションいろいろ | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b32b7b39e793e9ca22f7b768f450bcb25618270f/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_photoshop.png)
最近 PHP のセットアップ時にいつもやってる設定 | バシャログ。
レーザー治療までしたのにくしゃみ出まくってるんですけど、いったい何なんですか。どうもこんにちは nakamura です。 PHP-5.3.x 系もだいぶ浸透してきた今日この頃ですが、今日はここ最近新規にウェブサーバを立てる際にいつもデフォルトでやっている PHP 周りの設定をまとめてみました（よくよく考えたら PHP-5.3.x 系とかあんまり関係ないけど）。環境は CentOS 5 or 6 の PHP-5.3.x です。remi リポジトリを使って最新版の PHP を入れてます。 /etc/php/php.ini 毎回さわっているのは大体この辺ですね。他はサイトの仕様にあわせて適宜。 [PHP] expose_php = Off [Date] date.timezone = Asia/Tokyo セッションの保存先を memcached に セッションの保存先はデフォルトで memca
【Dreamweaver】DreamweaverにExcelをプラスでちょっと省エネコーディング | バシャログ。
会社のPCの壁紙テーマを猫に変えたら、たまーに仕事中ニヤニヤするようになりました。hakoishiです。 怪しい者じゃないです。 さて、今回はExcelとDreamweaverの合わせ技でちょっと楽してコーディングする方法をまとめました。 Excelで整形してDreamweaverにコピペして調整、という流れです。 どういう時に便利？ 大きく分けて2つあります。 【パターン1】セル数が多いテーブルを大掛かりに改修する場合 ⇒例：製品のスペック表、スクールの講座一覧など 【パターン2】連番のリンク先や画像名を含み、繰り返しの多いソースの編集 ⇒例：一覧リストなど エクセルはテーブル（特に縦方向）や、連番の付与といった類の編集に強く、そして軽い。（Dreamweaverのテーブル編集、もたつきますよね。。） 全てをDreamweaverで完結させようとせず、Excelを経由する手もあると覚えて
ソーシャルボタン設置のソースコードサンプルあれこれ。 | バシャログ。
今日は2011/11/11、やたら「1」の並ぶ日付です。 11時11分にスクリーンショット撮り損ねてちょっとorzなhakoishiです。 いっそその時間に更新までしてしまいたかった！後の祭り。 さて、今回はソーシャルボタン設置のソースサンプルをいくつかご紹介。 今回取り上げるサービスは、「はてなブックマーク」「twitter」「facebook」「addthis」の4つです。 (2011/11/22)その2、アップしました。「google+」「mixiチェック」「mixiイイネ！」「evernote」編です。 引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。 はてなブックマーク <a href="【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="【サイト名】" data-hatena-book
ちゃんと設定できてる？Facebook のプライバシー設定まとめ | バシャログ。
急に暑くなってすでに死に体の kimoto です。南半球に行きたい。ついでにコパアメリカを観戦したい さて、今日は Facebook の話題です。シーブレインとしても Facebook ページ作成のご相談なども増えてきており、日本でも徐々に盛り上がってる感のある Facebook ですが、自分も使わないとわからないだろうと言う事でいろいろいじってみてます。 その Facebook ですが、原則実名、しかも所属会社や学歴などを入力して利用していると、気になるのはやはりプライバシーですね。 そこで活躍するのが「プライバシー設定」ですが、これがとにかくわかりづらい！このわかりづらさのせいで、「友達」のみに公開してるつもりが全体に公開しちゃってるなんて事例も沢山ありそうです。 そこで、プライバシー設定についてまとめてみたいと思います。 前提として、全ての情報を友達のみ公開にしたいとします。 プライ
ソーシャルボタンについて集めてみました | バシャログ。
以前紹介したラーメン屋が閉店してしまって悲しいminamiです。 最近バシャログにも導入されましたが、facebookやtwitterなどのソーシャルメディアと連携するボタンについていろいろ集めてみました。 手軽にソーシャルボタンを発行 AddThis 簡単にソーシャルボタンを設置するスクリプトを発行できるサービスです。デザインを選んでソースをコピペするだけ。クリックされた回数の解析もデフォルトで入っていて便利そうです jQuery.socialbutton とても簡単にソーシャルボタンを導入できるjQueryプラグイン。 アイコンあれこれ Social Media Icons ソーシャルメディアのアイコンがずらり72個。 Handycons 2 - another free hand drawn icon set 手書き風でかわいいですね。 Set of social icons 缶バッ
【Fireworks】iPhone 画面パーツ集 | バシャログ。
iPhone 4 が発表されて、いつになったらそのスマートじゃないフォンやめるんだよ、ということを聞かれます toyama です。 スマートになりたいですね！身も携帯も！ というわけで、巷でもシーブレインでも iPhone 関連の制作が増えそうな気配です。 画面のサンプルを作って見せてくれ、なんてことを急に言われる可能性もありそうです。 サイトデザイン用の準備はあっても iPhone 用の画面デザインの準備は整ってない！ そんな私にぴったりのパーツを配布してくれているサイトをご紹介します。 Blog*spark Blog*spark Fireworks toolkit for creating iPhone UI mockups iPhone 3GS のあらゆるパーツがベクトルデータでみっちり集められています。 素材としても大変きれいで、作り方など見ても大変勉強になりますね。 一部 Pho
.htaccess だけで簡単キャリア判定してみる | バシャログ。
まだ 6 月だってのに早くも今年初あせもができちゃったよ！かいーの nakamura です。 サイトのモバイル、スマホ対応もすっかり一般的になってきた今日この頃、みなさんいつもどんな方法でキャリア判定を実装しているでしょうか。がっつりフレームワークなどを使っていればさほど難しくはありませんが、ほとんどプログラムが動いていないような静的なサイトの場合はちょっと面倒ですね。今日はそんな時に有用な .htaccess を使ったキャリア判定の方法をご紹介します。 仕様 今回、ルートディレクトリ / は PC 用サイト、/m/ 以下がモバイルサイト、/sp/ 以下がスマホサイトとして以下の仕様を元に記述方法を考えていきます。 PC で /m/, /sp/ 以下にアクセスしたら / にリダイレクト。 モバイル、スマホで PC サイトにアクセスしたらそれぞれ /m/, /sp/ にリダイレクト。 モバイ
Apple 関連のフォントを手に入れよう | バシャログ。
シーブレインのマニュアル作成サービスチームから「スマートフォンで読めるマニュアル作成」を PR するページを作ってほしいとのご依頼があり、ページをデザインました。 せっかく iPhone を素材に使うのだから、フォントも Apple 風にしたいわあ、といろいろ探した際に知ったいくつかのフォント情報をメモします。 ひと目でフォント判別できる一流デザイナーにあこがれる！ 1. Apple 日本語サイトのフォントは「AXIS」 Apple 公式サイトの日本語や Apple store で手に入るパンフレットには「AXIS」というフォントが使われていることが多いそうです。 その「AXIS」試用版が、無料でダウンロードできます。登録さえすれば商用も OK という太っ腹ぶりです。 なだらかなラインがスマートな、きれいなフォントです。 Type Project｜試用版ダウンロード http://www.
[使える CSS テクニック]CSSだけで実現するタブナビゲーション | バシャログ。
第 3 回目は「タブナビゲーションを CSS で実現してみよう」です。 タブナビゲーションはサイトのメニューに多く使われ、ビジターに「ここはクリックできますよ」とわかりやすく伝えるためにロールオーバすることが多いです。 ロールオーバに JavaScript を使用する方法もありますが、CSS ならもっとスッキリ！ 1.テキストリンクを生かしてタブナビゲーションを実現してみる テキストリンクを生かしたまま、背景に画像を表示させることでナビゲーションに見せる方法です。 [サンプル] [HTML] ソースはこんな感じになります。 <div id="tabnav-00"> <ul> <li id="menu01"><a href="#">メニュー01</a></li> <li id="menu02"><a href="#">メニュー02</a></li> <li id="menu03"><a hr
[作って学ぶ！jQuery] 第3回 画像ロールオーバーを作って学ぶ | バシャログ。
Webサイト制作において、クリックできる部品にマウスポインタを乗せたときなどに、表示を切り替えるエフェクトを「ロールオーバー」と呼びます。バシャログの左サイドバーの「ホーム」「はじめての方へ」にマウスをのせるとハイライトしますが、これもロールオーバーです。今回はjQueryを使ったロールオーバーの実装を解説いたします。 デモ 今回作成したロールオーバーは次のようなものです。 ロールオーバー サンプル HTMLソース <ul id="first" class="nav clearfix"> <li><a href="/"><img src="img/btn_home.gif" alt="HOME" width="160" height="40" /></a></li> <li><a href="#"><img src="img/btn_news.gif" alt="HOME" width="
[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。
第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。 本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる 線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条 承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
