これだけブログが広まっても、まだまだ解決されていない問題がある。それがブログのUIだ。ある程度はユーザーがカスタマイズできるとはいえ、本当に自由に見た目を変更するためには、それ相応のスキルが要求される。 UIで特に困るのが、過去記事の参照だが、それを一気に解決してくれるサービスが登場した。それがムロドーの提供するサービス「Mokuji」だ。
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
CSS BloomというブログなどのCSSデザインをみんなで評価するサイトにて、高評価のデザイントップ20です。 日本のブログデザインのコンセプトとちょっと違うのが多く、見ているだけでも面白いです。ブログデザインの展示会といった感じ。また、どんなデザインのブログにしようかな~と思っている場合にはかなり参考になります。 Top 20 Blog Designs | Blog http://silentbits.com/?p=339 http://silentbits.com/?p=385 以下、上記サイトで出てきたトップ20のサイト第1弾。 Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design Avalonstar. The Aries Project. By Bryan Veloso. Matt Brett Joshuaink
テキストエディタでWebサイト構築をガンバル人へ:どこまでできる? 無料ツールでWebサイト作成(6)(1/3 ページ) 「あえて」テキストエディタでWebサイト構築 今回はテキストエディタと組み合わせることで、開発をより便利にできるツールについて考えてみよう。 現在「あえて」テキストエディタでの開発を行われている方には、現在使っているエディタを選択するまでの“経緯”や“こだわり”があると思う。筆者もこれまでにさまざまなテキストエディタを試し、「この程度のもので十分だ」と感じるテキストエディタを現在使っている。 テキストエディタ+α そこで今回は、テキストエディタ自体とそのプラグイン/拡張機能に関する紹介は行わないこととし、「どのようなテキストエディタを使っている場合でも、組み合わせて使うことでより簡単にWebサイト構築ができるツール」という観点で紹介したいと思う。もちろん、Webオーサリ
Internet Explorer 7日本語正式版 Internet Explorer 7(IE7)の日本語正式版がリリースされた。現在はまだダウンロードしてインストールする必要があるが、2007年4月をめどに、Windowsの自動アップデートで「優先度の高いアップデート」として配布される予定だ。「IE7ではWebページの表示が崩れる」といった問題が出る場合、それまでには対応を済ませておきたい。 そこで本稿では、IE7 beta2のCSS実装検証を元に、IE7日本語正式版における変更点やバグをまとめる。また、IE6以下との下位互換やモダンブラウザとの互換性を保ちながらバグを回避する方法、CSSハックについても検証する。 新規対応機能一覧 未対応機能一覧 修正済みバグ一覧 未修正バグ一覧 CSSハック一覧 参考 CSS実装徹底検証! そこが知りたいInternet Explorer 7 なお
ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。 ダウンロードや実際の例、使い方などの各種取り扱い説明は以下の通り。 jQuery: New Wave Javascript http://jquery.com/ 上記ページの「Run」をクリックするとその機能の一端を垣間見ることができます。面白い効果です。 その他のデモとしてはこんな感じでいろいろなところに使えます。特に一番下の「Example G」のボタンをクリックしてから本文の上にマウスを乗せると色が変わり、フェードしながら元に戻るというのはシンプルながら面白い。 JQuery http://codylindley.com/blogstuff
ホームページ制作に役立つwebデザインを無料配布している0円の無料素材屋さんは、プロのwebデザイナーによって作られています!ホームページ制作だけではなくブログ制作にも役立ちます。アイコン、ボタン、背景、バナーなど、web素材が無料!ネットショップから企業サイトまで、ビジネス向けの商用にも使えます。素材利用の使用報告など、面倒なことは必要なっし!皆さんが楽しいwebライフをすごせますように♪ ← これも無料素材のひと~つ!無料だよ! あ、この素材いいなぁ♪と思ってくれたら、どんどんリンクしてくれると嬉しいです!!下記のバナーをどうぞご活用ください!また学校教育関連の資料や素材としても、どうぞご利用ください、お役立ちできると嬉しいです。
クリエイティブ・コモンズ・ライセンスで公開されており、自由に使うことが可能なPSDファイルの詰め合わせパックです。Web2.0っぽいデザインからオリジナルのデザインまで、いろいろなサイト作成やパーツ作成に応用できそうなものが山ほど詰め込まれており、かなり使えます。 ダウンロードは以下から。 Deluxive Creative Pack 001 by *Deluxive on deviantART 中に含まれているのは以下の通り。 バッジ キューブ カーテン カレンダー グリッドフレーム いろいろな文字入れができるパーツなど イラストいろいろ ポラロイド風の枠 世界地図とかお天気とか 付箋紙 押しピン シェルフ たばこ 星形のバッジ ぺらっとめくれる感じのステッカー 木の板 なお、ほかにもPhotoshopで利用できるパターンや壁紙も入っています。
16×16、22×22、32×32、48×48、64×64、128×128までの各サイズがそれぞれ600個以上、全合計で3600個ぐらいある無料で利用可能なアイコン集、それが「Crystal Clear」です。クリエイティブコモンズライセンスで提供されており、PNG形式で提供されています。 ダウンロードは以下から。 Everaldo.com : Crystal Icons http://www.everaldo.com/crystal.html アイコンの一覧は以下から見ることができます。 Crystal Clear - Wikimedia Commons http://commons.wikimedia.org/wiki/Crystal_Clear もともとは以下の画像のように、LinuxのKDEのために作られたアイコンセットと言うことで、そのライセンスが適用されているようです。
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
HTML文書の文法をチェックし、採点します htmllint.cgi ver1.21 / htmllint.pm ver3.30 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ダイアルアップはつらいので、ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタ
Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです(「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・)。 さて、ではポイントをば。 ■ グレーの次はグリーンだ! 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命! Rounded Cornersは新しい標準す。 ■ 「無料!」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は?素材集す
The PHP coder's top 10 mistakes and problems @ SourceRally.net PHP Community 「PHPプログラマがおかしがちなミスTOP10」、という記事があったので紹介。 PHP初心者だとこういうミスがよくありますね。ということで今年からPHPをはじめようと思っている人には気をつけてほしいリストです。 生でクエリを出力しない echo $_GET['username']; ↓ echo htmlspecialchars($_GET['username'], ENT_QUOTES); やらないとクロスサイトスクリプティングされます。 SQLクエリに$_GET,$_POST,$_REQUESTの値を直接含めない $sql = "select * from table where id=".$_GET["id"]; ↓ $sql =
R6K.Net Pressにエントリーされている「あなたが避けるべきウェブデザインの43のミス」の意訳です。 43 Web Design Mistakes You Should Avoid 上記エントリーによると、よく見かけるデザインのミスリストは10個くらいが通常ですが、それでは足らなく、増やしていくうちに43個になったそうです。 43の法則は、常識として浸透しているものもあれば、論争になるようなものもあります。 個人的には、いくつかは条件しだいでと思いますが、概ね相違無いです。 The user must know what the site is about in seconds. サイトに来訪したユーザーは、数秒で何のサイトか知らなくてはいけません。 Make the content scannable. コンテンツが一覧できるリストが必要です。 Do not use fancy
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く