CSSでtable幅を設定するためのまとめ
CSSでtable幅を設定するためのまとめです。 以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。 うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。 記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。 １．table要素に幅を設定 table要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります。 th要素/td要素の内容の幅が同じ場合は均等割りつけ th要素/td要素の内容の幅が異なる場合は長さに応じて割りつけ th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用 例として、次のtable要素を利用します。
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 ２．「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N
Google Analytics APIでページのアクセスランキングを作る方法
Google Analytics APIを使って、ウェブサイトやブログなどの人気ページのアクセスランキングを作る方法を紹介します。 １．完成イメージ 本エントリーで紹介する手順で作成すれば、ブログに次のようなランキングを表示できるようになります。 厳密には、ランキング用HTMLファイルを出力するところまでの説明となります。 ブログにランキングを表示させる手順は割愛していますので、出力ファイルを適宜インクルードしてください。 ２．作成手順 「Google Analytics API class for PHP」の中ほどにある「googleanalytics.class.zip」をクリックして、ファイルをダウンロード。 アーカイブを展開して、中にあるGoogle Analytics APIを利用するためのライブラリ「googleanalytics.class.php」をサーバにアップロードして
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
WordPressでカスタムフィールドを出力する方法のまとめ
WordPressでカスタムフィールドの出力方法についていろいろ調べてみました。 大丈夫と思いますが、以下に示すサンプルは次のようなループタグの中で使ってください。 <?php if(have_posts()) : while(have_posts()) : the_post(); ?> ここにサンプルコードを挿入 <?php endwhile; endif; ?> １．値を出力する（キーと値が1：1の場合） キーと値が1：1の場合、値を出力するにはpost_custom()を使います。 <?php echo post_custom($key); ?> 冒頭の画像の「サイズ」の値「3000」を出力するには次のように記述します。 <?php echo post_custom('サイズ'); ?> ２．値を出力する1（キーと値が1：nの場合） WordPressではひとつのキーに複数の値を記述
Movable Type の PHP化（その2：.html のままPHPを有効にする）
Movable Type の PHP化（その1）では拡張子を変更する方法を説明しましたが、このエントリーでは拡張子を変更せず、html のままPHP化を行うカスタマイズを紹介します。 このカスタマイズを行えば、モジュール化やページ分割等を、拡張子の変更なしで利用できるようになります。 1年以上前、自宅サーバで運営している時にこのテクニックを知ったのですが、.htaccess を利用すればレンタルサーバでも可能であることに最近気がつきました。 ここでは、 AddType ディレクティブによる設定 ForceType ディレクティブによる設定 AddHandler ディレクティブと Action ディレクティブによる設定 の3つの方法を紹介します。 基本的には１項の設定で動作するはずですが、さくらインターネットでは３項の方法でしか有効になりませんでした。４項以降の作業は１?３項共通です。 なお
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
