リキッド・レイアウトでチェックボックスを綺麗に並べる - WebOS GoodiesWebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
CSS 分割管理の実践編
2006-12-13T09:47:51+09:00 数日前に行ったリニューアルでは、いくつか課題を設けました。ただただリニューアルしても張りがありませんし、ウェブデザインを行うものにとって自身のウェブサイトは自身の作品のようなものだし、好き勝手できるのも魅力なわけです。何回かの記事にわけて、リニューアルでおこなった作業をまとめていこうと思います。 前回、スタイルシートを分けて管理する方法をまとめるで CSS ファイルを分割管理するメリットや、どのように分割するか案を書いてみましたが、今回のリニューアルで実際に案を元に分割管理を実践し、結果はリストのようになりました。各ファイルの概要は案段階から変化がないので、そちら参照ください。以下のリストでは、テーマファイル以外の実際の CSS ファイルにリンクしています。 common.css component.css fonts.css scree
誰でも1時間でDreamweaverを使ってウェブサイトが作れるようになる動画チュートリアル。 | Last Day. jp
誰でも1時間でDreamweaverを使ってウェブサイトが作れるようになる動画チュートリアル。 最終更新日： 2016/02/05 HTML/CSS, YouTube チュートリアル こんにちは@sayobsです。今日紹介するのはAdobeから発売されているドリームウィーバーを使って誰でもHTML/CSSでウェブサイト(ホームページ)を制作する動画チュートリアルを紹介します。 僕も最初はこの動画を見てDreamweaverの使い方を覚えました。英語ですが、凄く分かりやすいですよ。WordPressで自作テーマを作りたい人にもおすすめのチュートリアルです。 1時間で覚えようPart 1 CSS Layout with Adobe Dreamweaver CS4
CSSの「height:100%」について - webデザイナーのナナメガキ
CSSのみでブラウザの表示枠ぴったりにレイアウトしたい時、どうしたらよいか。 テーブルレイアウトの場合は大枠を<table width=”100%” height=”100%”>にすればOKだった。CSSの場合ちょっと癖があり、横幅は100%でぴったりいくのだが、中身のボックス要素を「height:100%」で指定しても、その要素そのものの高さにしかならない。サンプル（横幅のみ表示枠ぴったり） なぜかというと、この高さの指定は親要素の高さに依存するものだからだ。（参考：height: n%;の正しい仕様 – Web標準普及プロジェクト） なので親要素である”<html></html>”と”<body></body>”の高さを100%に指定すると、ブラウザの表示枠ぴったりにはめることができる。サンプル（縦横表示枠ぴったり） html,body{ height: 100%; } これを応用して
Webのグリッドデザイン 支援ツールあれこれ | tuglog!
Grid Designer http://grid.mindplay.dk/ カラム数とマージンの幅を計算してくれるサイト。 使い方も簡単で、カラム数（Columns）を指定し、サイト幅(Pixels)、サイトの両端のマージン （Gutters）、最後にカラムのマージン（Margins）を指定し「Design」ボタンを押すだけです。 入力された数値から最適なカラム幅やマージンを計算してくれます。 また、下部にはカラムをまとめて使った場合の幅も表示されるので、非常に便利です。 960GRID SYSTEM http://960.gs/ こちらは960pxでデザインされたWebデザインのグリッドテンプレートを配布しています。 データ形式も豊富でたいていの制作環境で使えるので便利です。 実際にCSSに落とし込んだサンプルサイトも見ることができるので、実用性も高く、ほかのサイトの絡む分析もあり、制
ど素人のCSSのみで行うブログデザイン構築編 ① 〜 Live CSS Editor を使おう！〜 | なまら春友流
CSSど素人の春友です、こんにちは。 先日こんな記事を書きました。 ブログテーマをWordPressフレームワーク「Thematic」に変更しました | なまら春友流 このテーマにしてからCSSにものすごく興味を持ち始めています。 ってことで自分の備忘録としてデザインを変更してゆく様をブログに書いていこうと思いました。 あくまでも自分で実践してみたことを記載してゆくつもりです。 ど素人なので間違っていたり、美しくないCSSの書き方をしていることも多々あると思いますので、その際はご指導ご指摘いただけると幸いです。 自分ルールとしてphpファイルを直接弄ることはせず、CSSのみでのサイトデザイン変更を目的としています。 理由は上の記事でも述べていますが、子テーマのCSSを編集することでシンプルなブログ管理をするためです。 今回はこの不定期連載の第1回目、どのような方法でCSSを弄っていくか、と
ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介
yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか？ 「エラスティック（elastic）」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ
MdN Design｜総合情報サイト
第16回（最終回） 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。本連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 （公開日：2010年4月16日 解説：こもりまさあき） 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2（CSS 2）をサポートしているものがほとんどです（特定のプロパティだけ未サポートも含め）。その一方、現在CSSの次のバージョンにあたるCSSレベル3（CSS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://gerenuk.crazyphoto.org/2009/06/10/600/
サービス終了のお知らせ
サービス終了のお知らせ