CSS3でのposition:relative
CSS3でのposition:relative 昨日「スマホサイトでtd/th要素へのposition:relativeはダメ！」と書いたところ仕様書を読め的な圧力がいろんな所からかかってきました。こわいですね。 position:relativeが仕様としてどうなっているかは@Takazudoが5年ほど前に解説しているのでそちらを参考にしてください。 table系にはposition:relativeが効かない | Takazudo Clipping* ただ、これはCSS2.1の仕様なんですね。最新のCSS3ではWD段階ではありますが、次のようになっています。 table-caption and table-cell offset relative to its normal position within the table. If a table cell spans multipl
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
mixiチェックのチェックボタンを設置
mixiチェックのチェックボタンを設置 mixiチェックのチェックボタンを設置してみました。（参考:mixiチェックとは？）FacebookのLike Button(いいねボタン)のmixi版のような感じです。 設置方法 mixi Developer Centerのmixiチェックに設置方法が書かれていますが、設置には「mixi チェックキー」が必要のようです。 mixi チェックキーの取得 チェックキーの取得にはデベロッパー登録が必要で、mixi Developer Centerでデベロッパー登録ができます。 個人の場合はmixiアカウントとメール認証が出来る携帯電話が必要です。 デベロッパー登録が終了したら、mixi Developer Centerの右上のログインリンクからダッシュボードに移動し、mixi プラグインに新規登録からチェックボタンを設置するサイトを登録します。URL許可
商品画像掲載のページ構成CSS
商品画像掲載のページ構成CSS ネタ元：商品画像掲載のページ構成css or table? なかなか語られることのない、Web制作の問題点が議論されています。 この問題はheightLine.jsを使ったり、tableで組むことで解決できるのですが、なんかそれをやると負けた気がする人がいるのも理解できます。 ですので、私が最近使っている方法を紹介。 サンプル コードに関してはサンプルから参照してください。 行ごとにブロックレベル要素で包み、その要素(サンプルではul要素)に対して、商品のリスト表示に使っている要素(サンプルではli要素)にかかっている物とおなじfloatプロパティを適用します。 副産物として、行ごとにブロックレベル要素で包んでいるのでclassを適用することにより背景色を変更することができます。 このマークアップも好みが分かれる所だと思いますが参考までに 関連エントリー 高
「CSS Reloaded」CSS3の実践的な使い方をご紹介！の感想
「CSS Reloaded」CSS3の実践的な使い方をご紹介！の感想 先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介！」に行ってきました。 資料が公開されました。 ■出典元：CSS Reloaded ■著者；John Allsopp ■リンク：Web Directions East 以下、内容を復習もかねてまとめてみました。（サンプルやブラウザ対応などは私が補足したものです。） CSSの歴史 1996年ぐらいからありました。 2000年にCSSのサポートが良いMac IEが登場 2000-2005年はCSS3の開発がストップ 2000-2008年でブラウザが劇的にCSSに対応していく。(ブラウザ Reloaded) 各ブラウザはCSS3を試験的に実装 プリフィックスをプロパティの先頭につける事によってCSS3を実装することが可能。 Firef
画像置換とSEO
画像置換とSEO 画像置換の話題がはやっているようですのが、SEOに関して肝心なところ出てきていないようですので補足しておきます。 ひとまず、関連エントリーのまとめ 画像置換乱用してませんか？ | THE HAM MEDIA 画像置換について « grandes cedro 画像置換について考えてみました｜linker journal｜linker ここからが本文。 結論から書くとGoogleはaltもテキストも同等に扱う為、SEO上のメリットはありません。あったとしても計測できないほどの微々たるものです。 ただ、Yahooはaltに関してまったく評価されません。 つまり、画像のaltにのみキーワードがあるような場合は検索結果に登場しません。 また、a要素に包まれたテキスト、アンカーテキストと呼ばれるものですが、これは現在のSEOで結構重要なポジションにある要因なので、これが評価されていな
Movable TypeとWordpressについて
Movable TypeとWordpressについて 最近はMovable TypeからWordpressへの移行がはやっているようですね。 [N] Movable TypeからWordPress移行の波がくる？ ブログをMovableTypeからWordPressに移行しました - trick7 ブログをMT(3.32)からWordPressに移行しました : akiyan.com 固定リンクを変えずにスムーズにMovableTypeからWordPressに移行するまでの作業ログ 個人的にどちらも愛用しているのですが、どちらもよいCMSですよね。 ちょっと私なりにMovable TypeとWordpressの違いをまとめてみたいと思います。 Googleトレンド ネタフルさんでも利用されているGoogle トレンドでもう少しトレンドを分析してみたいと思います。 Movable Typeと
MTでopモディファイアを利用して複雑なレイアウトを行う
MTでopモディファイアを利用して複雑なレイアウトを行う MTのテンプレートでopモディファイアを利用して複雑なレイアウトを行う方法です。 例えば、エントリーの一覧画面で、商品画像掲載のページ構成CSSのようなエントリー3個づつをブロックレベル要素で包んで出力することなどが可能です。 基本的な使い方 まずは簡単なサンプルでopモディファイアの利用方法を説明します。 エントリーの変わりに数字を出力するテンプレートタグは以下のようになります。 <MTsetVar name="no" value="0"> <MTEntries> <MTSetVar name="no" value="1" op="+"> <mtgetvar name="no"> </MTEntries> 12345といった感じにエントリーの数だけ、数字をひたすら出力する記述です。 1行目でnoという変数に0を代入し、 <MTse
MTで特定のカテゴリーのみテンプレートに反映させる方法
MTで特定のカテゴリーのみテンプレートに反映させる方法 MTで特定のカテゴリーのみテンプレートを変更したい場合の処理 <MTIfArchiveType archive_type="Category"> <MTIfCategory name="カテゴリー名"> 処理 </MTIfCategory> </MTIfArchiveType> 特定の親カテゴリーを持つもののみ変更したい場合は以下のようにになります。 <MTIfArchiveType archive_type="Category"> <MTParentCategory> <MTIfCategory name="親カテゴリー名"> 処理 </MTIfCategory> </MTParentCategory> </MTIfArchiveType> スポンサードリンク to-Rについて JavaScriptやCSS、React/Angula
エントリーテンプレートでのMTIfCategoryの挙動
エントリーテンプレートでのMTIfCategoryの挙動 MTのカテゴリー操作 色々で色々書いたんですけど、ブログ記事テンプレートやウェブページテンプレートでは正常に動作しない。 調べていたら、MTIfCategoryの仕様が他のページとは異なるためのようです。 コンテキスト内に指定されたカテゴリが含まれる、またはアクティブなブログ記事が指定されたカテゴリに属している場合に有効になる条件タグです。 MTIfCategory | テンプレートタグリファレンス MTIfCategoryはブログ記事テンプレートではMTCategoriesコンテキスト内で利用していても、ブログ記事のカテゴリーで条件分岐を行ってしまうようです。 （カテゴリーを持たないウェブページテンプレートでも条件に引っかからない） ちょっとこれでは使い物にならないのでエントリーテンプレートでも使えるMTIfCategoryもどき
MTのカテゴリー操作 色々
MTのカテゴリー操作 色々 Movable Typeでカテゴリーを操作する際の方法です。 カテゴリーの一覧 いたってノーマルにカテゴリーの一覧の取得 <ul> <MTCategories> <li><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a></li> </MTCategories> </ul> 特定のカテゴリーのサブカテゴリーの一覧 ある特定のカテゴリーのサブカテゴリーの一覧を取得する時 <ul> <MTCategories> <MTIfCategory name="特定のカテゴリー"> <MTSubCategories> <li><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a></li> </MTSubCategories> </MTIfCategor
MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン
MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン MTのテンプレート開発で再構築の工程が非常に不満だったので、テンプレート開発中は再構築を不要にするプラグインを作成しました。 以下のような条件で開発している方用のプラグインです。 ダイナミックパブリッシング環境で開発 テンプレートのファイルリンク機能を利用して開発 ダイナミックパブリッシング環境で開発 スタティックな環境で開発している方も多いと思いますが、あまり効率が良いとはいえません。 ダイナミックパブリッシング環境で開発を行えば、再構築の作業を行わなくてもブラウザで確認を行うことが出来ます。 参考：MovableTypeにダイナミック・パブリッシングを設定する テンプレートのファイルリンク機能 MTのテンプレート管理画面でテンプレート管理画面で開発している方も多いと思いますが、これもあまり効率が良いとは
MyMiniCityを楽しむためのGMスクリプト
MyMiniCityを楽しむためのGMスクリプト ちょっとしたブームを巻き起こしているMyMiniCity。 自分の街を作って、訪問者を誘導して育てていくという非常にシンプルなゲームなんですけど、なかなか面白いです。 twitterでは、自分の街への勧誘コメントが飛び交っています。 to-RのMiniCity 人口を発展させるURLhttp://to-r.myminicity.com/ 産業を発展させるURLhttp://to-r.myminicity.com/ind 交通を発展させるURLhttp://to-r.myminicity.com/tra などがあり、どのURLから訪れたかによって街が様々な形に発展していきます。 コメント機能もついて、他の街にコメントとかが書き込めるのですが、コメントとかもらっても、相手の街に行くのにコピペしないといけないのでめんどくさいです。 そこで、コメン
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
CSSで実現するスマートなロールオーバー
CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。 長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。 サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。 まずサンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
