Amazon風の一覧ページを Movable Type で実装するときに覚えておきたいループ処理 | バシャログ。
こんばんは、約2ヶ月ぶりの投稿になってしまいました ishida です。 tanaka・kimoto・社長に続き、iPhone ユーザーになってしまいました。 iPhoneネタを書きたいところですが、今回は Movable Type ネタで。 Amazon みたいな一覧ページ カテゴリアーカイブはブログ記事詳細より、カスタマイズが発生する頻度が高いですよね。 最近の流行りで言うと、以下のような Amazon みたいな一覧ページ。 画像とタイトルと記事概要が入るようなパターンです。 タイトルと記事概要については、入力される文字数が決まっていないので各記事のブロックを float するだけではレイアウトが崩れてしまいます。 （※文字数を制限しちゃって、「…」にすればイイじゃんとは思ってもスルーしてください。） float 解除ブロックを追加 3つごとに float を解除するためのブロックを追
画像のサイズを動的に指定する際の理屈を忘れがちなので備忘録 | バシャログ。
梅雨明け！バンザイ！nakamura です。 例えばユーザがアップロードした画像を決まったサイズのエリアに表示するような処理。よくあると思います。（画像を動的に生成するのではなく、img タグの height と width を動的に生成するやつです。）よくある割にいまいち理屈を忘れがちなので今日は個人的な備忘録も兼ねてエントリーします。 まぁよくよく考えてみれば何てことはないのですが、、、一応順を追って整理してみましょう。 いくつかのパターンで考えてみる 仮に横 320px、縦 240px の表示エリアがあるとして、色んなサイズの画像をその中にちょうどいい感じで表示する理屈を考えてみましょう。 縦も横も表示エリアより小さい場合 赤の点線が表示エリアで、黒の実線が実画像とします。 図のように横長の画像を表示エリア内にぴったりフィットさせる場合。直感的に分かると思いますが、横辺の長さが表示エ
【Fireworks】圧縮率による JPEG で文字もきれいに書き出す | バシャログ。
今週の木曜日はやはり早く寝て夜中に起き出すかないか！toyama です。金曜日は結構な割合で寝不足な人が多そうですね。 大きな写真イメージの上にキャッチコピーを書いてサイトの目立つところに表示、というデザインは割と多いパターンですが、画像の書き出し圧縮率は毎度悩ましいです。 写真の書き出しは jpg がセオリーですが、キャッチコピーの文字がひどく劣化してしまうことがあります。かといって gif で書き出すには色数が多くてディザでもちょっと辛いし重い！ そんなときは Fireworks さんにおまかせです。さすが web 制作の申し子！ 1. こんな感じの画像があるとします。 写真の上にテキストで文字が置かれています。 2. jpg で書き出してみます。普段はこんなに低画質で書き出すことはないですが、分かりやすく圧縮の品質を 50 にしてみます。 背景の画像はともかく、もう文字のまわりがグニ
【CSS】CSS のコメントの書き方 | バシャログ。
CSS コーディングのキモは「設計」にあります。 ただ漫然とコーディングしてしまうと、コードが肥大化してしまって本来 CSS のメリットであるはずの汎用性・メンテナンス性が著しく低くなってしまいます。 CSS のコーディングでは「コメント」を活用すると、全体の見通しが良くなって「設計」がしやすくなります。 いきなりセレクタとかプロパティとかを記述する前に、あらかじめサイトの構成（エリア）を CSS コメントで区切っておくと、その後のコーディングがとても楽になるのでお勧めです。 シーブレインで採用している CSS コメントにはレベル（階層）があります。コメントに階層を設けることによって、より設計しやすくしてやろうという魂胆です。 以下がその例です。 /* ========================================================= Level 1 ===
IEのhasLayoutをtrueにした時に起こる不具合を回避する | バシャログ。 - WEB制作
以前のエントリー：IEのhasLayoutをtrueにした時に起こる不具合の続きです。 前回は IE の様々な CSS のバグは hasLayout という IE 独自プロパティを true にすることで回避ができるものの、今度は hasLayout が true の時にのみ起こる別のバグが発生してしまう、というエントリーでした。 今回は hasLayout の値を true にした要素を false に戻す方法をご紹介します。 * { zoom: 1; } 上記のようにユニバーサルセレクタに「zoom:1」を指定すると、全ての要素の hasLayout プロパティが true になります。 これにより IE の CSS バグがかなり解消されますが、ul や ol のリストマークが消えてしまうなど別の不具合が起こります。 この不具合を回避するために、以下の記述で ul, ol, li それ
【CSS】clearfixを使わずにfloatを解除する | バシャログ。
以前、floatを解除する clearfixハックという記事を書きましたが、できることならハックは使いたくないと最近思うようになってきました。 いろいろと検証した結果、今回ご紹介するのはハックを使用せずにfloatを解除するための方法です。 divの構成はこちら。 boxというクラス名の div （floatを解除するための div ）は必要です。 cssのソース div.box { overflow: hidden; /* これがポイント */ position: relative; /* IE6でエリアを選択できるようにする */ /* DreamWeaverのデザインビューで正しく表示させる */ } div.left { float: left; /* 左に寄せて配置 */ width: 200px; } div.right { float: right; /* 右に寄せて配置 *
Dreamweaver のデザインビューで読み込む CSS を切り替える | バシャログ。
CSS はメディアタイプによって読み込むスタイルを切り替えることができます。 しかし、「モニタ用」「プロジェクタ用」「印刷用」と複数のメディアを設定すると、制作時の表示確認が大変です。 そこで便利なのが Dreamweaver のデザインビュー。 Dreamweaver のデザインビューは、どのメディアタイプを想定して表示するかを手軽に指定することができるので、表示確認の負荷を軽減することができます。 指定方法は 【表示】メニューの【スタイルレンダリング】からメディアタイプを選択するだけ。 これでデザインビューの表示が切り替わります。
strict な XHTML のままポップアップを実現する | バシャログ。
XHTML 1.0 strict では、targetを_blankに設定すると構文エラーとなります。 そこで jquery を使って XHTML は スマートな記述にして、ポップアップを実現します。 XHTMLのソースコード <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="popup.js"></script> <ul> <li><a href="/">トップページ</a></li> <li><a href="/company/">会社概要</a></li> <li><a href="/blog/">ブログ</a></li> <li><a href="/help/">ヘルプ</a></li> </ul> jquery.js と ポップアップ用の popu
[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。
第 8 回目は「CSSを使った見栄えの良いフォーム」です。 フォームまわりは、各ブラウザによってかなり差異があります。 よって CSS だけで見栄えをよくしようとすると、結構手間だったります。 例をあげると magin・paddingが異なる borderの線がでない 背景が画像があたらない などなど そんな時に便利なのが 「niceforms」 という javascriptライブラリです。 すいませんが、今回だけは javascript を使わせてください。 niceforms のサンプルはこちら 導入方法 まずは、niceforms をダウンロードします。 次に、必要な jsファイル および cssファイル をインクルード。 <script language="javascript" type="text/javascript" src="niceforms.js"></script>
![[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
