印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
レシピと味見でおいしいコーディング
制作仕様書は「料理のレシピ」 制作仕様書やコーディングチェックシートと言うと、堅苦しく聞こえるかもしれません。ワークフローや細かなサイト設計に基づいた制作の仕様が記載された制作仕様書は、料理の流れや材料、その分量が書いてある「料理のレシピ」に似ています。 そして制作仕様書通りに制作されたものか確かめるコーディングチェックシートは、料理レシピによって作られた「料理の味見」をする様なものと解釈してみてはいかがでしょうか？ ガイドライン化するメリットとデメリット 制作仕様書には、Webサイト全体の設計方針に分かりやすく書いたものにサイトマップなどを拡張した簡易的なものから、ファイル名や文法表記の統一など詳細情報を事細かに冊子のように厚いドキュメントに記載したものまで多く存在します。 ここではその内容や内容量に問わず制作仕様書が制作者へ与えるメリットとデメリットをご紹介します。 ガイドライン化する
チーム制作のメリット・デメリット
チームによるWeb制作の現場でのメリット 本連載ではこれまで、複数でHTMLファイルを扱うためのルールの必要性、ルールをドキュメント化したガイドラインの存在、ガイドラインの作り方、チームで作業する上での技術スキルや知識の差を埋める対策としての勉強会や、コミュニケーションについて、提案や事例などを交えて解説してきました。 チームと言っても漠然とした設定でしたが、企業における業種・業態はそれぞれですし、運営する人たちもまた違ってきます。しかし、大事なことは「チームはでまとまってWebサイトを作っている」という意識をお互いに持つことではないでしょうか。 これまでの回で注意するべき点を解説してきましたが、それとは反対にチームでの制作現場だからこそ、そこから得られるメリットもたくさんあります。 多くの人と関わることができる機会は、フリーランスでは得られないメリットの1つです。たくさん人がいるというこ
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
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>
[Think IT] 第2回：ガイドライン作成のポイント (1/3)
【即実践！HTML+CSS】 チームによるWeb制作の現場 第2回：ガイドライン作成のポイント 著者：イー・アクセス 佐藤 恵 公開日：2008/04/10（木） ガイドライン（ルール）はいつ、誰が決めるの？ 「第1回：ルールを作ろう！」ではルールの必要性について解説しました。Webサイトの持つ影響力を考えれば、その元であるルールの重要性も理解していただけたのではないかと思います。 今回はルールを実際に作ってみよう、改正しよう、と思っている方向けに、ルールの内容についてさらに詳しく紹介していきます。ルールは企業内で規定する場合、?「ガイドライン」と呼ばれるものにあたります。以降では本連載でもガイドラインと表記します。 さて、ガイドラインは「いつ？」「誰が」決定するのでしょうか。まずは「いつ？」について見ていきましょう。 一般的にガイドラインは年に数回ほど変更することがあります。その変更のタ
模様替え [究極の３列レイアウト]
[PR] 本ブログの商品紹介リンクには広告が含まれています 春なので、このブログのページデザインを少しリニューアル。以前は、左側にメニューとナビゲーションの列、右側はウィンドウいっぱいまで記事本体という２カラムのレイアウトでしたが、今度は右側にもカラムを設けて３カラムレイアウトです。以前同様、ブラウザのウィンドウのサイズを変えると、それに合わせて本文部分の幅が自在に変わるリキッドレイアウト。ゼロからページレイアウトを作る根性もデザインセンスもないので「ありもの」をパクってきました。 今回ベースにしたのは Matthew James Taylor という方の《The 'Holy Grail' 3 column Liquid Layout》というテンプレート。名前にある Holy Grail というのは、《ダ・ヴィンチ・コード》や《インディ・ジョーンズ》にも出てきたけど聖杯のこと。転じてみんな
CSS で簡単にメニューの上下中央揃えを実現する
CSS で簡単にメニューの上下中央揃えを実現する ネタ元：CSS で簡単に上下中央揃えを実現する IEでzoom:1とdisplay:inline;を同時に指定するとdisplay:inline-block;と同等の挙動を行うようです。 haslayoutがtrueの場合にdisplay:inlineを指定すれば、inline-blockのようになるようですが、zoom以外のプロパティはdisplay値の影響を受けるプロパティが多く、この方法はzoom以外では利用できないようです。 hasLayoutに関してはコリスさんが詳しく説明されています。 参考：IEでのCSSのバグを回避するhasLayout 以下のプロパティはdisplay:inlineと同時に指定してもhaslayhoutをtrueにできない。 × display:inline-block; × height:any valu
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
1ピクセルのずれも許せないWebデザイナのためにResetting Again | エンタープライズ | マイコミジャーナル
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
スペシャルベスト
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する（top 又は bottom） ■ <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE） →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間
CSS 脳内裁判 - 3ping.org
年内にあとひとつVicunaのスキンを作るとを目標にしていたので、 今、新しいたたき台用のスキンを作っています。 プロトタイプ系のスキンを作っているときには、「ユーザーはきっとこうしたいと思うだろう」と考えながら作っていて、僕はその頭の中に沸いてくる何人もの仮想ユーザーと会話しながら、安全なCSSの書き方を考え、ときには脳内裁判を開きます。 安全なCSSの書き方というのは、簡単にいうと、「ちょっとやそっとじゃぶっこわれなく、かっこいい」 書き方で、それが実践できたスキンは、丈夫なデザインになります。「おそらくここの幅を変更したいと思う人は多いだろう」とピンとくれば、幅を変更しても「ぶっこわれなく」します。 「ここに背景色をつけたらかっけーと思う人は多いだろう」とピンとくれば、background-colorを設定したとき(ボックスが可視化したとき)に、ユーザーが予想したようになるようにと、
CSSのレイアウト作成に役立つ便利なリソースいろいろ
最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
Blogサイトで見かける変なHTML - 3ping.org
というキャッチーな見出しを付けてみたけれど、(X)HTML(以下HTML)なんてのは自由に書いて、伝えたい人たちに思っている事が伝わるならば、それでいーんです。と、最初に言っておくよ。 自分の作ったWEBページのメンテナンス性を上げたいと考える人や、ソースコードを簡潔にしてダイエットしたいと思う人も中にはいるでしょう。複雑なBlogツールのテンプレートソースに四苦八苦してる人、単にW3Cの仕様に準拠させたページを作りたいと思ってる人も多いかもしれない(それは素晴らしいことだよ！)。 コンテンツの利用価値を高めたいと思っている人達、そういった方へ向けて、僕がよく見かける「もっといい方法があるよ」と思えるHTMLの記述を、代替ソースとセットで書いていきます。 項目をa要素やbrを使って整形する リストをリンクのためのA要素でマークアップして並べるという、ブログのメニュー部分などでよく見られる
栄光ゼミナール；塾選びガイド
栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなＤＶＤ（届くまでお楽しみ） 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制（6人から20人程度）できめ細やかな授業を受けることができるタイプと個人指導で1対1、1対2でもっと自分のペースにあわせることがで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.openvista.jp/archives/note/269/?269/
http://note.openvista.jp/268/
IDEA * IDEA