階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

ヘッドフォン出力2系統装備、充電式バッテリー内蔵のポータブルヘッドフォンアンプ M-AUDIO Bass Traveler » ハードウェア(オーディオ) M-AUDIO が2系統のヘッドフォン出力を装備した充電式バッテリー内蔵のポータブルヘッドフォンアンプ Bass Traveler を2016年7月23日に発売予定、市場価格は3,500円前後(税込)。 Bass Traveler は、4極対応のステレオミニジャックのヘッドホン端子を2系統装備したコンパクトなポータブルヘッドホンアンプで、充電式リチウムイオンバッテリーを搭載していてフル充電で約8時間の動作が可能です。 その他、ボリューム調整つまみと2段階の切り替えが可能な低音ブーストスイッチを装備しています。 4極ステレオミニジャックヘッドホン出力端子×2 4極ステレオミニジャック入力端子×1 約8時間動作可能なリチウムポリマーバッテリ

Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに

[ 一般 ] iwmrwiki tipsを残しておくための個人wiki 編集 履歴 添付 設定 新規ページ作成 メニュー カテゴリー 最近更新したページ 2005-12-12 携帯電話の位置情報 2005-11-13 CSSメモ 2005-09-02 ブックマークメモ 2005-07-27 携帯電話用ムービーのHTML 携帯電話用HTML参考ページ 携帯電話向けFlash FrontPage CSS参考ページ MenuBar1 MenuBar2 携帯電話用ムービーのHTML ドコモ用（iモーション、着モーション） ダウンロード <a href="（ムービーのファイル）"> 例： <a href="hoehoge.3gp"> <object declare id="（ムービーのID）" data="（ムービーのファイル）" type="video/3gpp"> <PARAM name="co

中川です。 今回は携帯用マルチメディアコンテンツの著作権保護について調べました。 著作権保護に関して 対象ファイルの転送禁止や再生回数制限などについて、キャリアごとの設定方法を調べました。 auの場合 EZムービー(3GPP2形式)の場合 ファイルにコンテンツ保護情報を埋め込むことができます。 以下の設定が可能です。 ・端末上でのみ再生できるようにする ・再生回数を制限する ・有効期限を設定する(何日後、もしくは何年何月何日まで) QuickTimeProでエクスポートする際に、上記の設定項目があるので それらに従うだけで簡単に作ることが出来ます。 DoCoMoの場合 MP4対応iモーションの場合、 ファイルにコンテンツ保護情報を埋め込むことができます。 以下の設定が可能です。 ・端末上でのみ再生できるようにする これもQuickTimeProでエクスポートするとき

Docomo, AU, Softbankの動画再生に関しての調査メモ。 Docomo Docomo端末での再生回数制限や保存不可などの設定方法などを記述 また、Docomo端末ではストリーミング再生も可能なのだけど、公式サイトにはそのことに関しては表記されていない。 ダウンロードの場合は、初期型900は300KBまで後継機901シリーズなどは500KBが限度となっています。 それ以上の大きいサイズの動画となるとストリーミング再生を選択したほうがよいかもしれません。 ストリーミングの場合は2Mまで再生可能になります。最新機種(MobileMP4バージョン7以降?)の場合は10Mまで可能になります。 ■　本家ドキュメント ( NTT Docomo MP4対応iモーション ) http://www.nttdocomo.co.jp/service/imode/make/content/imotio

マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか

はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera

Posted on | 4 月 28, 2009 | 先日やろうとしたこと。 flashを背景にしいて、上で何やかんややろうと思ってた。 方法論としては、まずflashを作る。 んで、下記を追加する。 <param name=”wmode” value=”transparent” /> <embed wmode=”transparent”> これでflashの上に要素を置いても、flashがちゃんと下にくるようになった。 というわけで、今度は上におきたいdiv要素を作り、配置する。 置き方は、marginをマイナスにしようが、position:absoluteしようがどっちでもいい。 僕はmarginマイナスにしてみた。positionの挙動が、あまり好きじゃないんです。 absoluteとrelativeを使いこなさなくちゃいけないのが面倒で…。 さて、これで基本的には

意外と簡単です。 ってか通常（sslじゃない方）のmixiのログイン画面ってそうなってますね。 そして、今やマインディアのトップページもそうなっています。 http://mindia.jp/top flash側 とりあえずflashのwmodeがデフォルト値だと、z-indexが無視されて最前面をキープしてしまうらしいです。 なので、flashのwmodeをopaqueかtransparentに設定してやるんだそうで。 まぁ、実際にソースを見ながらやってみましょう。 下はマインディアのトップページのソースから抜粋したものですが・・・。 の部分はDreamweaverでFlashを挿入すると出てくるソースですね。 そのままFlashを

◆追記 評判良かったので大幅に加筆訂正してみました。 ちょっと昨日、一昨日と携帯向けサイトを作っていたのですが、最近の携帯電話事情がわからず、どういうタグを使えばいいのかとか、CSSは対応しているのかとか、文字コードの問題はどうするのかとかいろいろわからないところが多かったので、ちょっと自分なりに調べてまとめてみます。 間違いが含まれている可能性が非常に高いです。 突っ込み大歓迎。 前提 キャリア別とか2G用にテンプレートを複数作って対応というのは個人で出来るレベルじゃないので、モバイル向けは１ページごとに１枚のテンプレート追加で作る。 なるべくPC向けのテンプレートを大幅に修正しなければいけないようなものは避ける。 長くなるので最初にまとめ ・文字コードはUTF-8。 ・マークアップ言語はXHTML Basic。 ・画像はJPEGかGIF。 ・CSSはインラインで書く。