第3回 floatプロパティを学習する上での3つのポイント | gihyo.jp
こんにちは、市瀬裕哉と申します。『実践 Web Standards Design』では、floatプロパティとpositionプロパティを利用したレイアウトについての解説を担当しています。私は専門学校にてWebデザインを講義する立場にいるため、書籍に掲載したCSSレイアウトの解説は、私が講義していく中で得られた、生徒達からのさまざまなフィードバックを反映した内容になっています。書籍の発刊からはCSSレイアウトの習得を短期間で実現するための講義に必要な教科書として、実際に現場で利用しています。 本連載（第3回、第4回）では、floatプロパティを利用したレイアウト方法を学習する中で、必要なポイントと基本的なレイアウトの実現方法、その応用までを解説します。 1．ボックスに置き換えて考える CSSで装飾を行う際は、floatプロパティを使う、使わないに限らず、HTML文書の各要素が生成する「ボ
HTMLにCSSとJavaScriptを含めない方がいい理由 | エンタープライズ | マイコミジャーナル
Robert's talk - Web development and Internet trends Webサイトを構築するにあたってHTMLとCSS、JavaScriptの3者を完全にファイル分離するべきだという方法論が紹介されるケースが増えている。最近話題に上がったトピックに絞っても次のトピックが類似した内容を紹介している。紹介している内容や対象、視点に違いはあるが、どれもHTML、CSS、JavaScriptは分離してインラインで記述しない方がいいと説明している。 Unobtrusive DOM Scripting 累進的拡張 Obtrusive JavaScript Checker HTMLを綺麗に保つ12の原則 Obtrusive JavaScript Checkerの開発者でもあるRobert Nyman氏が自身のブログにおいてWhy inline CSS and JavaS
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
CSS 3における新しいレイアウト手法：ボックスレイアウト - builder by ZDNet Japan
ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。 このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。 ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。 そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認
ブラウザの設定を初期化させるCSSとチェックツール
CSS入門の3回目は、Webブラウザにあらかじめ設定されているスタイルの初期化とボックスモデル、CSSの状態を確認するツールとしてFirebugを分かりやすく説明します。 初心者の方は少し難しい部分もあるかもしれませんが、第1回「ちょっとサイトをステキにするCSSの基本」、第2回「良いデザインを行うためのCSSの下地を作ろう」の連載を読んでいただければ幸いです。 Webブラウザの初期スタイルをなくす CSSを使ったデザインを行ううえで最初に行わなければならないのが、Webブラウザの初期スタイルをなくすことです。 前回の記事でh1タグについて解説しましたが、そのとき実際Webブラウザには大きいサイズの文字が表示されたと思います。 ●スタイルを初期化せずにWebブラウザに表示した結果 皆さんもご存じのとおりサイズの大きい文字が表示されましたね。 これがまさに各Webブラウザが持っているh1タグ
HTMLを綺麗に保つ12の原則 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。 [原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTY
第26回 フォームに関する基礎知識
今回のポイント inputタグ labelタグ sizeプロパティ maxlengthプロパティ textareaタグ 今回はフォーム（form）について勉強します。フォームはWebプログラムにおいてとても重要かつ基本となる部分で，プログラムと密接な関係にあります。閲覧者が何らかのデータをサーバーサイドのプログラムに送信するにはフォームを利用しなくてはなりません。 まずは基本となるフォームです（リスト1）。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head
コーディングをさっと済ませるためのCSSテンプレート集 | CREAMU
コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。 以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッドレイアウトなど、たくさんのCSSレイアウトを配布 » Code Sucks 90のフリーCSSレイアウト » Layout Gala 40のCSSレイアウト » CSS Creator 幅や背景色などを指定してXHTMLソースが生成できる » Whiteboard フリーのワードプレステーマフレームワーク » Yet Another Multi-Column Layout モダンで拡張性のあるレイ
Flash、HTML、AJAX：ウェブアプリ戦争に勝利するのは - builder by ZDNet Japan
かつて、ウェブページは静的なテキストとグラフィックの集合体だった。しかし、ウェブが成熟してくるに従い、ウェブを豊かで双方向的なアプリケーションにするための技術についての激烈な競争が起こった。 一方の陣営は、HTML（Hypertext Markup Language）と呼ばれる元からあるウェブページを記述するための技術だ。HTMLの機能の不足は、最初は基本的なプログラミング言語であるJavaScriptで補われ、その後AJAXと呼ばれるJavaScriptが巨大化した技術で補われることになった。 もう一方の陣営はAdobe SystemsのFlashで、この技術はグラフィックのアニメーションを実現するための手段としてスタートした。その後、Flashは長年をかけてはるかに強力なプログラミング基盤に成長し、最近はMicrosoftのSilverlightという競争相手も登場している。 これらす
HTMLを理解していないウェブ開発者ってどうよ？ - builder by ZDNet Japan
エンドポイントセキュリティの転機 情報セキュリティ戦略が問われる今 重要インフラ事業者としてANAが考えること ゼロトラスト対策3つのポイント ニューノーマル時代に必須なゼロトラスト セキュリティの始め方 クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu 中小企業のひとり情シスの現実 夢か幻か、はたまた現実か？ ヘルプデスク業務の週休4日制を考える 日清食品グループのDX（前編） 現場が主役のDXのススメ トップの強い意思で変革に弾み EDRトップランナー対談：後編 セキュリティ戦略を転換せざる得ない背景と EDRのような手法が必要な理由に迫る 激変するビジネス環境の中でのDX モダンアプリケーション戦略への取り組みが 市場の競争力の源泉となる アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の
CSS・ブログ時代のblockquote活用方法 | エンタープライズ | マイコミジャーナル
HTMLの要素のひとつにblockquote要素がある。blockquote要素は引用文を掲載する場合に使われる要素で、視覚的には左右にインデントを作る効果がある。blockquote要素自身は登場以来変わっていないが、今後はもっと適切な使い方があるかもしれない。SitePointに掲載されているKevin Yank氏のBlockquote: Then and Nowにblockquote要素に関する興味深い話がまとめらている。 同ドキュメントはまずblockquote要素に関する歴史的な状況遷移を説明している。当初は同じ視覚効果がありしかも文字数が短いという理由でblockquote要素の用途にdd要素が使われていたが、HTML規約に準拠するためにその用途ではdd要素ではなくblockquote要素が使われるようになったという。 インデント機能かわりに使われたblockquote要素の例
HTML 5では「article」タグでページの「本文」が取れる - モジログ
次世代HTMLの「HTML 5」について、そのウワサは以前から耳にしながらも、中身については知らなかった。 仕様や解説記事（末尾にまとめた）をいくつか流し読みしてみて、驚いた。これこそ、私の求めていたものだ。 私は以前より、Webページの「本文」がどこからどこまでなのか、ソフトウェアで判定できる標準的な方法があればいいとずっと思っていた（「フィードをアイテム単位に区切れば、セマンティック・ウェブが一気に現実化する」）。HTML 5では、いくつか導入される新しい要素（タグ）の中に「article」というものがあり、これがまさに「記事」の範囲を示すものなのだ。 これさえあれば、プログラム的にWebページを取得して、その「article」タグの部分だけ抽出すれば「本文」になる。あらゆるWebページにこの「article」タグが入ってくれば、もうフィードに頼る必要もなく、どんなページの「本文」でも
Ajax開発にベンリ！「Html Validator」でJavaScript実行後のHTMLを検証 - builder by ZDNet Japan
Html Validatorは、その名の通りHTMLの文法を検証するための拡張機能だ。 Web Developerに付属している検証機能はW3Cのオンラインサービスにアクセスするだけのものだが、Html Validatorは自身でパーサーを持っており、ローカルの環境だけで検証を行うことができる。サーバから送信された生のソースコードだけでなく、そこに含まれるJavaScriptを実行した後のソースコードの検証が行える点も、大きな特徴だ。 加えて、Html ValidatorをインストールするとFirefoxのソースコード表示機能が拡張され、エラー発生箇所の表示や、エラー内容の表示などが行われるようになる。ソースビューワーがHTMLデバッガになってしまうわけだ。さらに、自動で修正候補のHTMLを生成する機能なども備えている。 ただし、Firefox Add-onsのサイトに掲載されているのはW
第25回 tableをもっと見やすくデザインする
今回のポイント 「col」で縦列をまとめて装飾する方法 colに対して有効なCSS指定と無効なCSS指定 colの親に当たるcolgroupの考え方 縦のCSS指定と横のCSS指定はどちらが優先されるのか 縦にも横にも適切な色分けがされた表を作る方法 塗り分ける色味のうまい決め方 table系のタグには縦列をまとめるタグも存在します。colとcolgroupです。“まとめる”という言い方がなんとも微妙なんですが，うまく使うと，とても見やすい表を作ることができます。実例を見ながら解説していくことにします。 「col」で縦列をまとめて装飾する まずはcolから見てみます（リスト1）。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml
Web DeveloperでCSSとHTMLを編集してみよう - builder by ZDNet Japan
前回の「Web Developerでウェブサイトを構築・デバッグ」に引き続き、今回もウェブ開発向けのFirefoxアドオン「Web Developer」の基本機能を紹介する。 CSSやHTMLの編集 Web Developerの大きな特徴に、ファイルそのものを書き換えることなくHTMLやCSSの編集結果をプレビューできるという機能がある。 例えばCSSの場合、ツールバーから［CSS］−［CSSを編集する］を選択すると、現在のページが使用しているCSSがサイドバー（表示場所は変更可能）に表示される。これを変更し、上部の［適用］アイコンをクリックすると、その内容が表示中のページに反映される。 元に戻すには［リセット］アイコンをクリックすればよい。もちろん、編集したCSSをローカルのファイルに保存することもできる。
第24回 tableデザインをかっこよく見せる
前回，thead/tbody/tfootとthやcaptionといったtable系のタグを一通り理解したところで，実際にtableのデザインをいくつか作って眺めてみることにします。プレーンなtableをCSSでいろいろと装飾してみて，デザインを考えるという段取りにしましょう。 まずはプレーンなtableを作る 社員名簿をイメージしてプレーンなtableを作ってみました（リスト1）。データベースから読み出してPHPで生成したtableという感じで眺めてください。このプレーンなtableはborderの設定などをしていないためケイ線は一切無く，お世辞にも見やすいとは言えません（図1）。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtm
HTML上のテーブル操作の決定版·Flexigrid MOONGIFT
※ 画像は公式サイトデモより 業務システムのみならず、メールや一覧の機能で必要になるのがテーブルを使った一覧機能だ。このとき、比較元になるのがエクセルをはじめとした表計算ソフトウェアだろう。あのレベルのUIをWebベースで再現するのはほぼ不可能とさえ言えそうだ。 ドラッグアンドドロップによるカラムの並べ替えや表示/非表示の切り替えが可能 無理矢理カスタマイズして膨大に工数を増やすのではなく、ライブラリを使って柔軟に、素早く対応しよう。 今回紹介するオープンソース・ソフトウェアはFlexigrid、jQueryを使ったテーブル操作ライブラリだ。 Flexigridは既存のテーブルに対して利用できるライブラリで、普通のテーブルをカラムの並べ替えや表示/非表示、幅の変更など優れたUIをもったテーブルに変更してくれる。対応ブラウザはIE6/IE7、Firefox 2、Opera 9.x、Safar
第23回 tableを基礎から理解する
今回のポイント captionの使い方 境界線をCSSで描く classとidのおさらい th，thead，tbody，tfootによるtableの構造化 今回はtableについて基礎から勉強します。なお今回のtableの解説は，ページ・レイアウト時のtable使用についてではなく，ページ内に表を描くというtable本来の使い方についての説明です。レイアウトにtableを使用するにしても，tableの基本概念がわかっていないと応用がききません。もともとtableとはどういうものなのか，そこから見ていくことにします。 まず，なぜここでtableの話なのかを説明しておかなくてはなりません。現在よく使われているPHPを使ったWebアプリケーションの場合，データベース・システムのMySQLやPostgreSQLと組み合わせてサイトを構築することが多くあります。商品情報や会員情報など数十から数万とい
第8回 「CSSによるデザインワークと相性のよいHTMLって？」に対する小林的提案
茨城県出身。1980年生まれ。専修大学経営学部卒業後，1年弱のニート生活を経て販売代理店の営業職を経験後，有限会社アイエイトワンに入社。主に，Webディレクション，マークアップを務める傍ら，講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則，これだけ。」（共著，MdN発行）がある。 いつも良質なエントリでブックマークをたくさんもらっている「ウノウラボ Unoh Labs」というサイトがあります。少し前になりますが，そこで「CSSによるデザインワークと相性のよいHTMLって？」というエントリがありました。そこにはすでにたくさんのことが書かれていますが，今回は僕が実践していることを紹介します。 と，その前に，「CSSによるデザインワークと相性のよいHTML」についてちょっと説明しておきましょう。サイト作成の案件を進めていく過
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
XHTML 2とHTML 5はまだ別々の道を歩む
