YUI、Blueprint、YAMLなどのCSSのフレームワークでも利用されているブラウザのスタイルを初期化するスタイルシートのサンプル集です。 Blueprint YAML YUI Tripoli meyerweb warpspire christianmontoya crucialwebhost 下記のスタイルシートは、記述スタイルを同様のスタイルに全て変更しています。また、コメントも削除しています。 Blueprint Blueprint Based:Reset Reloaded <textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,

Last time we looked at 3-column themes, and while they allow you to add a lot of sidebar accessories, some people prefer to keep it clean and simple. For those people, we offer up a list of 30+ 2-column themes for you to choose from. One thing to keep in mind when choosing a theme is Fixed Width vs. Variable Width. Fixed Width themes are just that: a fixed set of dimensions and will show up the sa

『Web担当者 現場のノウハウVol.8』の読者のために、データを入力するだけで簡単にアクセス解析レポートを作れる、エクセルのフォーマットをダウンロードできる形で用意した。自分なりにアレンジしてぜひ活用してもらいたい。このツールを使えば、アクセス解析ツールだけでは直接読み取れない、別の視点からウェブサイトを解析できる。 また、『Web担当者現場のノウハウvol.8』の特集p.32のステップ7で紹介した、上司への報告書向けのテンプレートも用意したのであわせて活用してもらいたい。 →→エクセルのテンプレートをまとめてダウンロードする。 ページビューで見るウェブサイトの偏差値各ページやディレクトリに「偏差値」をつけるエクセルのひな形を用意した（図1）。統計の言葉の中で、「偏差値」ほどブルブルっとくる言葉はないだろう。一度はこれで悩んでいるはずだ。 →→偏差値のテンプレートをダウンロードする。 偏

2-Column website templates are easily the most popular, as well as the most common free templates available. Here are more than 80 of the best. You may also want to check out the following: 40+ Free One-Column Website Templates, 50 More Beautiful Blogger Templates, 20 Wordpress 4-Column Themes Blooming - Rounded corners and the flower header give this simple template a little extra class.

Having a strong online presence continues to be extremely important for any individual or business today. When you are looking…

Having a strong online presence continues to be extremely important for any individual or business today. When you are looking…

CSSコードのチュートリアルサイト「Max Design」の9つのフローティングチュートリアルです。細かく手順が書いてありますので、わかりやすいのではないかと思います。 詳細は、以下から。1から9のチュートリアル名とデモ画面の画像です。 右にイメージを置く Floatutorial: Tutorial 1 - all steps combined イメージとキャプション Floatutorial: Tutorial 2 - all steps combined 縦にイメージを並べる Floatutorial: Tutorial 3 - all steps combined サムネイルギャラリー Floatutorial: Tutorial 4 - all steps combined 「next」と「back」を使ったリスト Floatutorial: Tutorial 5 - all s

ライブラリ・WEBツール FancyForm - Javascript checkbox replacement チェックボックスをオシャレに変換する。 見飽きたチェックボックスを変更するだけで、少し違った印象を与える事が出来るかも？ （前に紹介した気もしますが念のため） Popular Online Generators | Tech Magazine 過去に話題になったWEB2.0系の画像を自動生成するWEBジェネレータまとめ。 アップした写真をお洒落に見せるJavaScript 写真風に自動変換してくれる便利なJavaScriptライブラリ。 Gigazinize: あなたのブログ，GIGAZINEのようにします 自動でブログ文章に見合った画像を探してくるサービス。 後継のGigazinize Tools - Image: Making up your Blog（あなたのブログに選り

Three column templates are very popular, especially for sites that are monetized with banner or text ads. Here are 30+ great templates from around the web. Oh, and don't forget to check our lists of 1-column and 2-column web templates. Informatif - a very web-2.0-looking theme.

FLASHイメージギャラリーのひとつ。 ぺらぺらとページをめくるように画像を閲覧していきます。 これはGooglePicasaを利用している人用のエントリになりますのであらかじめご了承ください。 xml形式のテキストファイルを少しいじるだけで使える便利なもの。 以下のサンプルをみて、面白そうだと思ったら試してみるといいかもしれません。 ・サンプルデモ1（横長） ・サンプルデモ2（縦長） 詳細は以下に ダウンロードしたらxmlフォルダを開く 以下のページの下部にダウンロードファイルがあります。 ↑ここにあります。 ダウンロードしたファイルを下のフォルダに入れます。 Program Files/Picasa 2/web/templates/ 結構簡単に使えそうですね。 言語的に、もしかしたら日本語は対応していないかもしれません。 興味のある方はぜひお試しあれ。 写真管理ソフトGooglePic

最近よく聞かれるのですが、一体Yamada氏のネタ元はどこですかと聞かれます。 ネタ師であるブロガーがネタ元を晒すのはどうかと思っていたのですが、有益である情報は晒すべきだと友人に言われてしまったのと、海外でまとめエントリにされていたので公開に乗り切ります。 より有益な情報を得る為に 友人いわく、公開してその上を目指せ、とか意味がわからないことを言われましたが、結局のところ海外の数々の有益な情報からピンポイントで発信するからこそ価値があるのであって、まとめサイトが有益なものであるとは限りません。 これらネタ元をつかって、より多くの方にピンポイントで面白い記事の発掘が出来るようになれば、それはそれで自分にかえって来るんだなぁと思います。 WEB制作者向け発掘サイト DZone - fresh links for developers デザイン、CSS等に関して有益なエントリが上ってくるシステ

1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 50KB） 8/10 追記 初期に配布したテンプレート内に、結構な量の誤字等がありましたので、現在の最新版を下記からダウンロードしてください。 では使い方などの説明を。 ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。 index.html （XHTML テンプレート） css （CSS ファイル格納フォルダ） img （画像ファイル格納フォルダ） js （JavaScript ファイル格納フォルダ） 基本的に

Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択

起業準備の段階から事業計画作成、各種必要申請書類まで、 『すぐに使える雛形が欲しい』に対応するフォーマットを記入例とセットにしてご提供します。※ 本フォーマットはサンプルであり、実際のご使用に際しては専門家に相談されるなど、ご注意ください。

Let’s dive today into a sea of brushes. Hundreds of thousands of sets are lying undiscovered like pirate treasures all over the web. Due to this phenomenally vast amount of Photoshop brushes available, directories are becoming very popular lately. Designers are collecting them like mad. Not to mention that finding the most unique or bizarre set is a must. And believe me, in this case, size does ma

唐突に、PHP用のテンプレートエンジンを作ってみる。 方針： ふつうのPHPファイルをテンプレートとして使う。 <?php echo $var; ?> は面倒なので #{$var} と書けるようにする。 <?php echo htmlspecialchars($var); ?> はもっと面倒なので %{$var} と書けるようにする。 ついでにXML宣言も <<?php ?>?xml ... に自動置換する。【追記】レイアウト機能を追加してみた コード： <?php /* * SixtyLinesTemplate.php - 60行しかないけどSmartyより速いテンプレートエンジン * * 使い方： * require_once('SixtyLinesTemplate.php'); * $TEMPLATE_DIR = 'templates'; // 省略可、パーミッションに注意 * $c

Web design Architecture Life drawing Art gallery Synesthesia Comics This website is where I bring together my two biggest passions in life; art and design. I hope you enjoy my work. Learn more about me or contact me if you have any questions. Responsive Columns: Build Amazing Layouts With Custom HTML Tags Responsive Attributes: Generate CSS Grid Layouts With Simple HTML Responsive Font Size (Optim

2007年10月30日20:00 カテゴリLightweight Languages perl - 勝手に添削 - 40行で作るPerl用テンプレートエンジン 久々の勝手に添削。今回はこちら。 40行で作るPerl用テンプレートエンジン 正規表現がらみなので、Perl以外でも有用。 添削箇所は、こちら。 40行で作るPerl用テンプレートエンジン sub convert { return unless defined(my $str = shift); $str =~ s{&amp;}{&amp;}gso; $str =~ s{<}{&lt;}gso; $str =~ s{>}{&gt;}gso; $str =~ s{\"}{&quot;}gso; $str; } これの最初のsubstitutionが&amp;ではなくて&ではないかというのはさておき、こういった場合、何度も正規表現をかけ

08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう

We will be closed on Thursday November 28th & Friday November 29th due to the Thanksgiving Holiday

北米トレンド 織田 浩一 連載 米国を中心にモノやサービスのデジタル化が進み、競争の鍵は顧客体験の向上と価値創造に移行しました。新たなトレンドに対応するため、北米の最新情報を毎月お届けします。

海外の WEB2.0 系サイトのデザインを見ていると、どこかしら似ていると感じることが多いと思います。「カドが丸い」「ロゴが反射している」などなど、これまでも様々な点が指摘されてきましたが、最近のトレンドは「クリーンな水平分割」なんだとか： ■ Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided (StyleIgnite.com) 「クリーンな水平分割」とは、StyleIgnite による造語。しかしこの表現がピッタリだということは、例に挙げられているサイトを見れば一目瞭然です： ■ shoeboxed.com 上の画像は、現時点でのキャプチャ。画面全体が大胆に水平分割されていて、余白スペースも大きく開けられていますね。まさしく「クリーンな水平分割」。 念

2カラムなサンプルです。 海外で流行気味？ということで、「クリーンな水平分割」が出来そうなサンプルです。 どんなもんか見たい方・欲しい方は以下よりどうぞ。 サンプル 一式ダウンロード この辺で知りました↓ POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行？ 言われてみれば確かに多いような気がしないでもないですね。こういうのは。 MT4の管理画面もそんな感じだし。 とはいえ、日本の企業サイトではあんまり見た記憶がないような、チェックが甘いだけなような。 一応サンプルの説明でも。 ベースとしてはそれなりに使いやすいかと思います。 新規でサイトを作るのに使えそうなの一式。をベースにして、各コンテナの子要素にdiv.areaを追加している感じです。 .areaの指定がこんな感じになってて、 #page .area { width: 860px; margin: 0