当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
June 14, 2008 Roll OverのJava Scriptライブラリが普及してる今、画像置換(Image Replacement)を使用するケースは減っているのでしょうか？JSによるRoll Overはお手軽だけど、グローバルナビの配下に属するローカルページを表示している間もグローバルナビの状態をカレントにしておきたい場合などがありますよね。 JSによるRoll Overを利用する場合にそれを実現する場合、yuga.js0.6.0を使用するかグローバルナビの項目の数だけカレント状態になったコードを用意することになるかと思います。でもやはりグローバルナビなんかはDreamweaverユーザーならライブラリとかで1つのソースコードで管理したくなりませんか？ なのでやっぱり画像置換を...と思ってしまう訳です。でもtext-indent: -9999px;とかなんかやだなってな場合
Thank you for being patient. We are doing some work on the site and will be back shortly.
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
devSnippetsで、リストをデザインするためのCSSプラクティスが紹介されています。 ざっといくつかご紹介。 » Elastic Calendar Styling with CSS CSSでデザインしたカレンダー。↑のキャプチャはこちら » Simulating a Table Using an Unordered List ul,liでテーブルレイアウトを作る » How to Create a Block Hover Effect for a List of Links リンクのリストにブロックのhoverエフェクトをつける » Turning a list into a navigation bar リストをナビゲーションバーに » FORM elements design using CSS and list (ul and dl) ulとdlを使ってフォームを作成 » Pr
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. CSSで段組デザインをする際に、とても参考になるサイトを発見。 ＣＳＳでの段組レイアウトのサンプルがサムネイル付きで４０種類紹介されています。 お好みのデザインを見つけてソースを開いてコピー＆ペーストすればお好みのデザインを素早く作れますね。 ＣＳＳも
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
CSS Juice - Design, Tutorial, Showcase and more 25 Rounded Corners Techniques with CSS Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. CSSで角丸テクニック２５がまとめられていました。 様々なサイトにでの角丸実装ドキュメントのまとめです。 Sliding Doors Even More Round
This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article), I will show you how to design a watercolor effect menu in Photoshop. Then in next tutorial, I will show you how to slice the menu and code in CSS. If you need some inspiration on creating an artistic menu, visit our previous post on artistic websites
Create Resizing Thumbnails Using Overflow Property | Css Globe This tutorial is aimed at controlling the size of the thumbnails appearing on your page. CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。 次のように、CSSで画像を固定サイズにトリミング表示できます。 更にマウスオーバーで画像を元サイズに。 実装について見ていきましょう マークアップが次のようにあったとします <p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p> そして、次のＣＳＳを適用。 p.thumb{ float:left; margin:.5
スタイルシートでドロップキャップを作る雑誌などでよく使われる「先頭の1文字を大きくして下の数行に食い込ませる」装飾(ドロップキャップ)を作ってみましょう。スタイルシートを使えば簡単です。first-letter疑似要素・first-child疑似クラスを使います。 雑誌などでよく使われるドロップキャップを実現 雑誌などでよく使われている「ドロップキャップ」を作ってみましょう。段落の最初の1文字を大きく表示させ、下の数行に食い込ませる装飾のことを「ドロップキャップ」と呼びます。 この「ドロップキャップ」は、スタイルシートを使えば、HTMLに手を加えることなく簡単に作れます。 作ってみた例は、以下の通りです。 先頭の1文字だけ、大きな赤色の反転表示になって、下の数行に食い込んでいます。 CSSのfirst-letter疑似要素を使うと、ボックスの最初の1文字にだけ装飾を施すことができます。 こ
属性セレクタで、スタイルシートを柔軟に！Internet Explorer 7から使えるようになったスタイルシートの機能に、「属性セレクタ」があります。FirefoxやOperaでは以前から使えていました。これを活用すると、より柔軟な装飾対象の指定が可能になります！ 属性セレクタを使うとスタイルシートの記述が楽になる スタイルシートで装飾対象を指定する方法に「属性セレクタ」という書式があります。 今までは、FirefoxやOperaしか対応していませんでしたが、Internet Explorer 7でも使えるようになりました。 この「属性セレクタ」を使うと、スタイルシートでの装飾対象の指定が楽になります。 例えば、次のような指定が可能です。 a要素のうち、name属性があるものだけを装飾 a要素のうち、target属性の値が _blank のものだけを装飾 input要素のうち、type属
上記のHTMLは、ブロックレベル要素の中に、画像を1つ入れているだけです。このような記述は頻繁に使われるでしょう。 このとき、文字サイズ(font-size)がとても小さかったり、行の高さ(line-height)が低かったり、表示に使われているフォントの種類によっては、あまり隙間が気にならない場合もあります。しかし、右図のように画像の下に隙間が見える場合もあります。 画像の下に空く謎の隙間がハッキリ見える記述・装飾例 以下のようにHTMLとCSSを記述すると、謎の隙間がハッキリ見えるでしょう。 <p> <img src="sea.jpg" alt="海"> quick doggy jump </p> 上記のHTMLでは、画像の隣に小文字のアルファベットを掲載しています。さらにCSSで、 p { font-size: 200%; line-height: 1.4; font-family:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く