チーム制作のメリット・デメリット
チームによるWeb制作の現場でのメリット 本連載ではこれまで、複数でHTMLファイルを扱うためのルールの必要性、ルールをドキュメント化したガイドラインの存在、ガイドラインの作り方、チームで作業する上での技術スキルや知識の差を埋める対策としての勉強会や、コミュニケーションについて、提案や事例などを交えて解説してきました。 チームと言っても漠然とした設定でしたが、企業における業種・業態はそれぞれですし、運営する人たちもまた違ってきます。しかし、大事なことは「チームはでまとまってWebサイトを作っている」という意識をお互いに持つことではないでしょうか。 これまでの回で注意するべき点を解説してきましたが、それとは反対にチームでの制作現場だからこそ、そこから得られるメリットもたくさんあります。 多くの人と関わることができる機会は、フリーランスでは得られないメリットの1つです。たくさん人がいるというこ
プロ直伝のコーディングテクニック
柔軟性のあるコーディング Webサイトの制作業務を請け負っていると、制作の途中でデザインが変わることは少なくありません。コーディングもいきなり仕様が変わったり、新しい機能やカラムが追加になるといったことがしばしば発生します。 要素を追加するため、ソースコードに無理な変更や複製を行うと、ソースコードはどんどん劣化していきます。最悪の場合は、今後の拡張性を考えると作り直しをした方が作業時間を短縮できるのではないかと思われるものまであります。しかし、納期や予算に余裕があれば作り直しをすることもできますが、大抵の制作現場ではその時間もなく、なかなか理想のコードが作れないことが現状です。 このようなソースコードの劣化や作り直しを防ぐためにも、柔軟性を持ったコーディングをするテクニックが必要です。今回は、ソースコードを劣化させないコーディングのコツを紹介していきましょう。 秘伝の3つのコツ 第1のコツ
ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
Webブラウザの検証！
複雑化するWebブラウザの検証 WebデザインのHTMLコーディングでは、複数のOSやWebブラウザ、またバージョン別による検証確認は必須です。OSやWebブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることもあるからです。 テーブルレイアウトでコーディングしていた時は、OSのフォントサイズの違いによる段落検証が中心でした。しかし、CSSレイアウトへ移行すると、WebブラウザごとにCSSの解釈が変わってくるため、検証がより複雑になってきます。今回はWebブラウザ検証方法と、その対処策をマスターしていきます。 現在、一般的に使用されている主なWebブラウザは、Internet Explorer（通称IE）のバージョン6と7、Firefox、Safari、Operaです。これらのWebブラウザシェアは日々推移していますが、ユーザ環境リサーチを行っているW3Counte
CSS3では何ができるのか？
CSS3は今！ 皆さんはCSS3について知っていましたか？ 「まあ、なんとなく知っていたけど、まだ先の話でしょ」という感じではないでしょうか。筆者も「最近ようやくテーブルデザインからCSS+XHTMLでのコーディングスタイルが落ち着いたから、もうちょっとこれでやらして」という感じです。 しかし、CSS3時代の到来はそう先の話ではなさそうです。例えば、SafariやOpera、Firefoxなどの一部のWebブラウザでは、すでにCSS3の仕様が実装されています。また、新しいバージョンが出るたびに、どんどん新しい実装が追加されています。Internet Explorerもバージョン8でWeb標準に向かっています。 このCSS3策定は、Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun MicrosystemsなどといったW
第9回 ValidなHTML、ValidなCSS | gihyo.jp
W3Cが(X)HTMLやCSSについての勧告を出していることにより、Web制作者は仕様に沿って「正しい」(X)HTMLやCSSを書くことを求められています。 Validな(X)HTMLの基準として挙げられるポイント まず、 仕様のとおりに書かれている HTMLバリデータ[1]で減点されない ことが挙げられます。 DTD（文書型定義）に沿った(X)HTMLを書けば、このようなバリデータの検証でエラーがでないようにすることが可能です。 validだと何が良いのか XHTMLをXMLアプリケーションとして考えると、パースエラーの出ることのない利用価値のある文書となる（validではないものではパースエラーが出てしまう） 正しい(X)HTML文書に対してでないと、CSSが意図した通りに機能しない 点数が満点になることによる制作者の満足感が高まる 何回かこの連載で取り上げましたが(X)HTMLは文書
[Think IT] 第3回：万能なWebサイトを作ろう (1/3)
ちょっと待った！コーディングを始める前に... 正しく美しいコーディング目指す本連載の第3回では、Webサイトをより使いやすくわかりやすくするための具体的な技術を紹介していきます。 クライアントから請け負ってWebサイト制作をしていると、後から「Webコンテンツをきれいに印刷できるようにしてほしい」「検索エンジンの最適化を考慮してほしい」などの要望を受けることがあります。印刷対応を後から要求されると、対応するWebブラウザの種類とバージョンによっては、ほぼ作り直しが必要だったり、また工数が2倍以上掛かってしまったりすることがあります。 コーディングを始める前に、クライアントの希望やユーザの環境を知っておきましょう。確認すべき事項はたくさんありますが、必ず確認すべきは「印刷対応」「検索エンジン最適化」「アクセシビリティ」「暗号化通信（SSL）（アドレスの確認を含む）」です。もし、仕様書にこれ
[Think IT] 第3回：リストタグを試す！ (1/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第3回：リストタグを試す！ 著者：米倉 明男 公開日：2008/04/15（火） リストタグの用途 Webサイト内のコンテンツの多くは、「見出し ＋ 本文」の構成から成り立っています。これはユーザエクスペリエンスに基づくもので、ユーザはまずコンテンツの見出し箇所から閲覧し、その中の興味を持った部分の詳細を読みます。「ブラウズ」とは流し読みの意味でもあります。 これをXHTMLの文書構造化に置き換えると情報の区分けや段落の整理が必要となってきます。そしてこの情報の整理に有効的な方法として、リストに整理するという手法があります。 CSSコーディングでWebサイトをレイアウトする場合に欠かせない要素の1つにリストがあります。 XHTMLで使用するリストは3種類あります。「箇条書きリスト」「番号付きリスト」「定義リスト」です。 「箇条
RedLine Magazine : よく使うhtmlとCSSのソースセット
よく使うhtmlとCSSのソースセット 読んで字のごとく、よく使うhtmlとcssのソースセット。プロパティはよく使いそうなやつで値は全部空。自分用ストックだったりするので、もしコピペする場合は状況に合わせていろいろ追加やカットしてくらさい。 ナビゲーション部分用のソース サイトのナビゲーション部分によく使ってるソース。意外とこれ毎回書くの面倒なので個人的にこの雛形は気に入ってる。背景画像は通常時もhover時も全部まとめて１枚もの画像になってる前提。 <ul id="navi"> <li id="menu01"><a href=" " title=" "> </a></li> <li id="menu02"><a href=" " title=" "> </a></li> <li id="menu03"><a href=" " title=" "> </a></li> <li id="m
やってはいけないコーディング
あのタグを使っていませんか 現場でよくある間違ったコーディング例として、非推奨（Deprecated）タグの使用があります。図1（上）に示したタグは非推奨タグや廃止タグと呼ばれるもので、現在はブラウザでサポートされていますが、将来的には使用できなくなる可能性があります。 なぜ、今使えるのに将来的に使えなくなるのでしょうか。 これまで、ブラウザメーカーはHTMLの見栄えをよくするために、無秩序にタグの拡張を行ってきました。結果としてHTMLは、その元であるSGML（Standard Generalized Markup Language）の「文書論理構造を記述する」という目的とは異なる独自の進化を遂げることになりました。 そのような中でHTML 4.0からは、文書論理構造を記述する本来の目的に立ち返ろうという動きがあり、見栄えを設定するタグはHTMLに直接記述せずにCSSなどを使用することを
[Think IT] 第2回：カラムを理解する！ (1/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） テーブルレイアウトでのカラム作成 Webデザインのレイアウトではカラム（段組）という手法がよく使われています。この語源は「Column」表計算ソフトで使う「列」からきています。 Webサイトでは左側のカラムをナビゲーションにして、右側のカラムをコンテンツエリアとするパターンや、ポータルサイトのように情報量が多いWebサイトでは3段組カラムを使い、左側がナビゲーション、真ん中にメインコンテンツ、右側にバナーや関連へのリンク、という区分けもスタンダードな形式といえるでしょう。 テーブルレイアウトでのコーディングによるカラム作成は、まず全体をテーブル<table>タグで囲み左右にセルを作ります。そして左カラムは左のセルに入れ子のテーブルを新規作成して、
[Think IT] 第1回：ルールを作ろう！ (1/3)
【即実践！HTML+CSS】 チームによるWeb制作の現場 第1回：ルールを作ろう！ 著者：イー・アクセス 佐藤 恵 公開日：2008/04/03（木） ルールはなぜ必要？ 2008年4月の特集2では「即実践！HTML+CSS」について取り上げています。その中で本連載では、実際の現場の話や取り入れやすい実践的なテクニックなどを紹介していきます。第1回の今回は、現場におけるコーディングのルールについて、筆者が携わっている「JP.AOL.COM （http://www.jp.aol.com/）」で用いられている実践例をもとに解説していきましょう。 さて、読者の皆さんはWebサイトを運営するにあたって、HTMLファイルを共有する際に何かルールを設けているでしょうか？ 例えば、コードの記述方法に関して、はじめにテンプレートを作った人とファイルを更新／修正する人でコードの書き方が違うと、統一性のなく
[Think IT] 第1回：XHTMLの文書構造化とボックスモデル (1/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第1回：XHTMLの文書構造化とボックスモデル 著者：米倉 明男 公開日：2008/04/01（火） テーブルレイアウトとは HTMLコーディングの主流が、旧式のテーブルレイアウトからCSSレイアウトに変わり、大規模Webサイトを中心にXHTMLへの移行がひと段落した感があります。しかし、まだテープルレイアウトを用いたWebサイトが多いのも実情です。 そこで本連載では、慣れ親しんだテーブルレイアウトからなかなか抜け出せない方向けに、CSSレイアウトへスムーズに移行をできるポイントを解説していきます。はじめにCSSレイアウトはHTML 4.01、XHTMLいずれのバージョンでも対応可能ですが、本記事ではXHTML 1.0を対象にCSSコーディングについて解説します。 テーブルレイアウトとは、HTMLタグの1つである表組み<tab
第13回 Webページで読みやすいテキストとは：ITpro
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
第12回 ページの余白で見た目はずいぶん変わる
前回，ヘッダやフッタ，ナビゲーションなどを付けたページ構成を一通り完成させたわけですが，一度プレーンなHTMLの世界に戻ります。何の装飾もなくシンプルなHTMLを書くと，テキストはブラウザ画面の左一杯から右端一杯までいって折り返すという表示になります（図1）。 画面一杯に文字があるというのは，単位面積あたりの情報量が最も多いということです。何らかの情報を提供するのがHTMLの役割だとすれば，図1の状態はHTMLも目的を達するうえでは非常に効率が良いということになります。だけれども，これでは読みにくくてしかたありません。 まず画面全体に文字がびっしりと並んでいるというのは，読む人に圧迫感を与えます。また画面全体に目を通さなくてはならないのでポイントが散漫になり，注視すべき部分を特定できなくなって集中力を阻害します。学生の頃に誰もが「字ばかりの本を見ると読む気がなくなる」と感じたことがあったと
第11回 CSSだけでヘッダ/フッタ/2カラム構成のページを作成する（完成編）
今回のポイント floatを使ったレイアウト clearプロパティの働き ブロックとインラインの区別 spanタグの使い方 前回，ページ上部に可変のヘッダ領域を備えた，本文が横並び2カラム構成のページをCSSでレイアウトできましたが，本文の下にフッタを表示させようとして困ってしまいました。今回はこれを解決する方法について説明します。 それは「float」プロパティを使う方法です。もともとのfloatがどういう動きをするものなのか，ということから見てみましょう（リスト1）。 リスト1●floatプロパティの働きを調べるためのコード。プロパティ値にrightを設定する <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict
第9回 CSSだけを使ってWebページをレイアウトする
今回のポイント CSSを使ってレイアウトを指定できる 段落の縦の長さは“なすがまま”にする position，top/leftで位置を指定する 前回，Webページのレイアウト手法の変遷と題して，フレームを使う方法と，テーブルを使う方法について説明しました。今回は，CSSを使ってレイアウトを指定する方法について解説します。ここまでCSSをフォントの色や大きさを変える程度にしか使ってきませんでした。実はCSSではレイアウト指定もできるのです。 唐突にレイアウト指定ができますと言われても，なんだそれは？？という感じですね。最初から複雑なものは難しいので，CSSのレイアウト系の使い方も順番に確認しながら，簡単な例から見ていくことにします。 まず単純なHTMLを用意します（リスト1）。レイアウトを確認したいので本文テキストはある程度の長さのものを用意してください。これを表示させると図1のようになりま
第5回 HTML文書を装飾するCSSの基礎（その1）
前回，CSSの書き方には3種類あると書きました。今回から書き方を順番に説明していくことにしましょう。まずベースになるHTMLを作ります。今回はHTML中の<p>に対して，フォントの色を赤くするという単純な装飾でCSSの書き方を学習します。 <p>があるHTMLを作ります。説明画面が寂しくないように，若干のボリュームがあるテキストを本記事からコピーして作ってみました（リスト1）。 リスト1●ベースになるHTML <?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"> <hea
CSSでWebページの背景画像を指定する - builder by ZDNet Japan
DXの成否を分けるのはガバナンス Microsoft Security Forum 2021 Day2 どこよりもわかりやすい基調講演解説！ 現場業務のデジタル化の最適解 JBSのアプリポケットとアプリメーカーが 企業のデジタル化をサポート 次の一手はこれだ！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu 大学、研究機関、製造業など いま目覚ましい躍進ぶりを見せるデルのHPC その背景と選ばれる理由にせまる 対談：クラウド時代のネットワーク DX推進の要であるクラウド活用 レガシーなネットワークがボトルネックに 体験から学んだ成功への知見 マネーフォワード×エム・フィールド対談 Fintechプラットフォーム開発の「鍵」 Microsof
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer