[使える CSS テクニック] CSSだけで実現するPhotoアルバム | バシャログ。
集中連載「使える CSS テクニック」も第 9 回になりました。 今回は CSS だけで画像ギャラリーを作ります。 画像の挙動は、（IE6 でも同様の表示ができるように）a タグの擬似クラスだけで設定しています。 サンプル XHTML <div id="album"> <ul> <li><a id="photo01" href="#slide"><em><img src="css_album/img/photo01.jpg" /></em><span>日本大通り駅</span></a></li> <li><a id="photo02" href="#slide"><em><img src="css_album/img/photo02.jpg" /></em><span>指路教会</span></a></li> <li><a id="photo03" href="#slide"><em><i
![[使える CSS テクニック] CSSだけで実現するPhotoアルバム | バシャログ。](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)
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
印刷用デザインをきれいにまとめるための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)
印刷のことを常に考え、要所要所でボーダーを使うべし | Takazudo Clipping*
印刷って大事なんじゃないですかっていうエントリです。 背景で画像敷いたり、背景色で塗りつぶしたり、複雑なデザインの箱を組む時でも、できるだけボーダーを設定した方が、印刷時に奇麗に見えることがあります。たとえばこんなデザイン。 基本例 背景画像を印刷する設定して、インク代を浪費する人はまれなので、ほとんどの人は、CSSにて指定された背景画像や背景色を出しません。その結果、なんか見出しなんだか何なんだかよく分からんよねという感じに。 まぁ、ある程度はしょうがないんですが、グラデーションの端にborderをつけておくことで、ちょっとだけ分かりやすくすることができる。borderつけてHTML組んだサンプルと、その印刷イメージです。 HTML組んだサンプル(HTML) どうでしょうこれ。なんかすごい微妙な例で申し訳ないんですが、2番目のやつとか、むしろイラネーと自分で思ってしまったんですが、こんな
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 | バシャログ。
HTML をシンプルに保ったままブロック要素を段組みする方法です。 ↑のように写真を横並びで表示したい、というケースはよくあると思います。 まず、上記の HTML ソースがこちら。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サンプル3" width="160" height="120" /></li> </ul> </div><!-- /#photo --> 今回のサンプルでは、ボックスと余白が以下になっています。 全体の横幅（500px）が決まっていて
[使える 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>
https://www.openvista.jp/archives/note/2007/webdesign-for-ipod-touch/?2007/webdesign-for-ipod-touch/
[使える CSS テクニック] CSSを使った見栄えの良いサイトマップ | バシャログ。
第 7 回目は「CSSを使った見栄えの良いサイトマップ」です。 今回は、Web サイト構成をすばやく確認できるように見栄えのいいサイトマップを紹介したいと思います。 以下のようなツリー構造のサイトマップを作成してみます。 sample 1.画像を用意 以下のような画像を使用します。 アイコンから伸びる点線はなるべく長くします。 2. XHTML はリストの入れ子で XHTML <ul> <li><a href="#">ホーム</a> <ul class="category"> <li><a href="#">会社案内</a> <ul class="page"> <li><a href="#">会社概要</a></li> <li><a href="#">コンセプト</a></li> <li><a href="#">沿革</a></li> <li><a href="#">社長挨拶</a></l
第3回 Webページで行間はどのくらいにしましょうか？
小林 信次 マークアップ・エンジニア。茨城県出身。1980年生まれ。専修大学経営学部卒業後，1年弱のニート生活を経て，販売代理店の営業職を経験後，有限会社アイエイトワンに入社。主に，Webディレクション，マークアップを務めるかたわら，講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則，これだけ。」（共著，MdN発行）がある。 いろいろな方と話しているときに，line-height（1行の高さ。行間として認識できる余白を制御する値）ってどのくらいに指定していますか？という話題が出ることがあります。そこで改めて，他の人がサイトでどんな指定をしているのかを調べてみました。 ※ 今回は，Webのフロントエンド制作を仕事にしている人の間でよく知られており，アクセシビリティ，ユーザビリティ，文字の読みやすさなどにも気を使っていると思
リストやテーブルを簡単かつ綺麗にストライプ状に色分けする方法
リストとかテーブルをストライプ状に色分けしようとするとき、 セルとか列に対して一つ一つクラスをつけて、 そしてCSSで装飾するのが一般的だと思います。 でも、クラスを一つ一つにつけていくのって面倒じゃないですか？ 今回紹介する方法を使えば、 簡単かつ綺麗に色分けすることができるので、 参考にしてみてください 面倒なやり方：一つ一つにクラスをつけていく まずはオーソドックスに、 一つ一つにクラスをつけて行く方法を紹介しておきます。 ■HTMLソース <ul> <li class="list01-odd">リスト１</li> <li class="list01-even">リスト２</li> <li class="list01-odd">リスト３</li> <li class="list01-even">リスト４</li> <li class="list01-odd">リスト５</li> </
クリーンなデザインでピュアＣＳＳなフォームを作るサンプル:phpspot開発日誌
woork: Clean and pure CSS FORM design クリーンなデザインでピュアＣＳＳなフォームを作る 次のようなデザインの綺麗なフォームのサンプルがＤＬ可能です。 マークアップは以下のようにシンプルかつクリーン <div id="stylized" class="myform"> <form id="form" name="form" method="post" action="index.html"> <h1>Sign-up form</h1> <p>This is the basic look of my form without table</p> <label>Name <span class="small">Add your name</span> </label> <input type="text" name="name" id="name" /> <
[使える CSS テクニック] CSSで実現するプルダウンメニュー | バシャログ。
使える CSS テクニックの第 4 回は「CSS で実現するプルダウンメニュー」です。 確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。 CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHTML）を併用することで IE6 でもプルダウンメニューを実現しています。 まずは、以下のサンプルをご覧ください。 シーブレイン コーポレート WEBサイト制作 マニュアル制作 ローカライズ 検索エンジン Yahoo! Japan Google Goo excite Biglobe 週刊少年漫画 少年ジャンプ 少年マガジン 少年サンデー このサンプルの HTML は以下のようになっています。 <ul id="pulldown-menu"> <li><a href="#">シーブレイン</a> <ul> <li><a href="http://c-brai
無料で使えるサイトのデザインテンプレート40選『40 Free Web Template Resources』 – creamu
デザインテンプレートを使って手軽にサイトが作りたい。 そんなときにおすすめなのが、『40 Free Web Template Resources』。無料で使えるサイトのデザインテンプレート40選だ。 以下にいくつかご紹介。 » Simavera Website Templates Flashとサイトテンプレート。↑のキャプチャはこのサイト » Open Designs XHTML + CSSのフリーデザインテンプレート » Tristar Web Design Templates 9つしかないが、速くてクオリティの高いXHTML + CSSサイトならここ » Solucija Templates 商用・非商用問わず無料で使えるテンプレート » Styleshout Templates すべてWeb標準準拠のXHTML + CSSサイトテンプレートを配布 無料で使えるサイトのデザインテンプレ
新規でサイトを作るのに使えそうなの一式。Ver 2｜CSS HappyLife
新しいdigiper staff blogが始まりました。 PICTOGRAM CHANNEL - ピクトグラム チャンネル タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。 何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。 さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。 Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。 むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。 えっと、ダウンロードは以下よりお願いします。 新規でサイトを作るのに使えそうな一式。Ver 2をダウンロード（zip：18kb） ちなみにダウ
Mozilla Japan ブログ - Firefox 3 の修正内容のご紹介 その3 ― URLも改行されるように
Firefox 2 までは日本語ではないテキストでは、Web デザイナの方がトリックを使わない限り、半角スペース (U+0020) 以外では改行されませんでした。そのため、長い URL が以下のようにはみ出したり、これが原因で Web ページ全体のデザインが壊れたりすることがありました。 これが、Firefox 3 では以下のように改行されるようになりました。 この修正は、多くの Internet Explorer (以下 IE) 向けにのみデザインされた Web ページの表示を、そのデザイナの意図通りに表示できるようになったことを意味します。 それでは、 Web デザイナの方には細かい仕様や注意点について、少し詳しい解説をさせて頂きます。デザイナの方が気になるのは、IE との互換性かもしれません。しかし、Firefox 3 のレンダリングエンジン、Gecko 1.9 は IE と全く同じ
Web 標準的な CSS の値変換方法（px → em など）（訂正あり） - IT戦記
はじめに W3C の仕様に CSS の値を変換が可能なオブジェクトが定義されていることに気がついたのでメモしておきます。 まず CSSStyleDeclaration オブジェクトを取得する 例えば、 var decl = element.style; または、 var decl = getComputedStyle(element, ''); http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration CSSStyleDeclaration オブジェクトから getPropertyCSSValue という関数を使って CSSValue オブジェクトを取得する var val = decl.getPropertyCSSValue('width') http://www.w3.org/TR/DOM-Level
CSSの初期化ファイル | d-spica
CSSの初期化ファイル 2008-05-31 0 0 XHTML/CSS CSS 以前， CSSの初期化 というエントリを書きました。あれからいろいろと試行錯誤し，初期化ファイルがずいぶん変わってきましたので，改めて今ぼくが使っている最新のファイルを紹介したいと思います。 default.css 以下からご覧いただけます。 default.css このファイルは次のような目的で作っています。 各ブラウザが持つデフォルトのCSSをリセットして，レンダリングの違いを解消する。 サイトやページによって書き換えることがほとんどない，基本的な設定を行う。 コーディングが分かりやすくなる初期値を指定しておく。 このファイルをあらゆるサイトで使い回せるようにしておくわけです。 リセット /* Reset */ body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, d
PHP＋MySQLで投票機能を作成するチュートリアル＆ＤＬ:phpspot開発日誌
How To Design and Create a PHP Powered Poll - CSS-Tricks Polls are fun! They can help engage the readers of your site and give both you and the poll-taker valuable information. PHP＋MySQLで投票機能を作成するチュートリアル＆ＤＬ。 Photoshopでデザインを作成するところから、マークアップしてPHPを書いてMySQLの設定してというところまでチュートリアルになってます。 デモを起動 作成した投票機能はダウンロードすることもでき、中には、PHP、CSSコードはもちろん、Photoshopファイルも入ってます。 通常、チュートリアルというと、デザイン寄りか、プログラム寄りになるのですが、どちらも学べる感じでな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
[CSS]使い勝手を考慮した、5つのスタイルシートのフォーマット