[Think IT] 第1回：結構良さそうだぞHTML 5！ (1/3)
【即実践！HTML+CSS】ポストWebコーディング 第1回：結構良さそうだぞHTML 5！ 著者：吉田 光利 公開日：2008/04/07（月） HTML 5時代はすぐそこまで来ている！ HTML 5と聞いたとき、皆さんはどう思ったでしょうか。 筆者の場合は「え？HTML 5？また覚えなきゃいけないことが出てくるの？」「もうHTMLはいいだろ」「今あるサイトはどうなっちゃうの？」「W3Cの勧告なんてあてにならないからなぁ」などというネガティブな感じです。 しかし、HTML 5について学んでいくと「おお！結構良さそうだぞHTML 5」「これは来るな！」という気持ちに変わりました。 2010年の正式勧告される予定で、そこに向かってすごいスピードで広がっています。もしかしたら、それくらいの時期には定着しているのではないかと筆者は考えています。なぜならばあのInternet Exploreもこの
[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字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
ローカルファイルのセキュリティ警告を出さないおまじない
Libraのハッカソンやってるという話は先日「HackLibra、最初のオンラインハッカソン」で書きました。 …
第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
DOMの基本。正しいHTMLとドキュメントツリーを理解しよう
DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、おもにDOM Level 1で規定されている手法を使って、JavaScriptを使ってどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説していきます。JavaScriptからHTML要素を手に取るように操れるようになります。 ドキュメントツリーとは DOMスクリプティングでは、HTMLに関する正しい知識が求められます。まずは正しいHTMLとはなんなのかを理解していただきます。そして、DOMスクリプティングでは欠
第9回 CSSだけを使ってWebページをレイアウトする
今回のポイント CSSを使ってレイアウトを指定できる 段落の縦の長さは“なすがまま”にする position，top/leftで位置を指定する 前回，Webページのレイアウト手法の変遷と題して，フレームを使う方法と，テーブルを使う方法について説明しました。今回は，CSSを使ってレイアウトを指定する方法について解説します。ここまでCSSをフォントの色や大きさを変える程度にしか使ってきませんでした。実はCSSではレイアウト指定もできるのです。 唐突にレイアウト指定ができますと言われても，なんだそれは？？という感じですね。最初から複雑なものは難しいので，CSSのレイアウト系の使い方も順番に確認しながら，簡単な例から見ていくことにします。 まず単純なHTMLを用意します（リスト1）。レイアウトを確認したいので本文テキストはある程度の長さのものを用意してください。これを表示させると図1のようになりま
W3C勧告に忠実なHTMLエディタ兼ブラウザ「Amaya 10.0」 | パソコン | マイコミジャーナル
SVGの編集など他にない機能を備えるHTMLエディタ兼ブラウザ「Amaya 10.0」 World Wide Web Consortium (W3C) は2月29日、Webブラウザの機能も備えたオープンソースのHTMLオーサリングソフト「Amaya 10.0」 (3月3日時点の最新バージョンは10.0.1) をリリースした。同チームのWebサイトでは、各種UNIX系OSに対応するソースコードのほか、WindowsとLinux、Mac OS X向けのバイナリパッケージが公開されている。 今回のリリースでは、HTML 4.01とXHTML 1.0、XHTML Basic、XHTML 1.1、HTTP 1.1、MathML 2.0の一部、そしてCSS 2の多くの機能とSVGの一部をサポート。ツールバーやパレットのデザインが一新されたほか、コンテキストメニューにはリンクの操作やカット / コピーと
ブラウザにおける空白文字に関する考察 - elm200 の日記(旧はてなダイアリー)
趣旨 ブラウザによる空白文字の取り扱いは、なかなか一筋縄ではいかないので、これを整理してみる。 情報ソース ブラウザの問題：半角スペース、全角スペース、改行コード、整形処理 よくまとまっている。おすすめ。 ブラウザ上の空白文字の表示 一般的なブラウザ(Firefox 2 や IE6 など）で次のような HTML 文書がどのように表示されるだろうか？ (\n; は改行(LF, 0x0A), \tはタブ(0x09), \s は半角スペース(0x20)をそれぞれ表すとする) A\nB\tC\sD答えは、"A B C D"。つまり A, B, C, D のそれぞれに半角スペースが1つずつ存在する。これは簡単だ。 では、半角文字にかえて、全角文字を使ってみたらどうであろうか？ あ\nい\tう\sえ答えは、"あい う え" になる。ここで、「あ」と「い」の間に半角スペースが入っていないことに注意してほ
第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
第2回 Webデザインの基礎はHTMLの構造にあり
今回のポイント テキストを読みやすくすることが最大の目的 まずテキストをHTML化して構造化すること HTMLタグは意味を持たせるものだけを使用する デザインについてざっと大筋の勉強をしてみましょう。デザインの根幹となる考え方はわずかに二つです。その二つとは「色」と「バランス」です。この二つを制することができたらデザインを制覇したと豪語してしまっても構いません。 Webデザインの場合はこの二大要素に加えて「読みやすさ」という要素を含めることができます（図1）。Webデザインというのは，そこに存在するコンテンツをいかに読みやすくしていくかが最大のポイントです。 近年，社会傾向として“活字離れ”が発生していると言われています。たしかに新聞や雑誌の発行部数は年々減少しています。しかし世間で何が起こっているのかといえば，実際には日本人は有史以降で一番文字を読む時代に突入しています。どこで字を読んで
セマンティックHTMLの規格化に向けたHTML 5のドラフト - builder by ZDNet Japan
激変するビジネス環境の中でのDX モダンアプリケーション戦略への取り組みが 市場の競争力の源泉となる ユーザビリティを第一に！ ソフトウェアの力でビジネス変化に対応 ハードとソフトがセットになったストレージ 身近な改善の第一歩！ ニューノーマルな働き方を前提にした これからの時代のWi-Fi環境構築のポイント アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の鍵を握るDevOpsの真の意味 ひとり情シスのための年度計画 大企業も中小企業も求められるレベルは同じ 限られたリソースでのIT管理対応法 自社利用の知見・経験を顧客に提供 コンテナ活用を推進する日立製作所 VMware Tanzuを利用したモダナイズを伝授 20年培ったデジタルカイゼン文化 誰もが知るあの「Notes」で実現する 現場とIT部門二人三脚でのデジタルカイゼン ともにDXを推進する コンテナ
Flash マークアップをめぐる混迷 - elm200 の日記(旧はてなダイアリー)
趣旨 Flash を HTML 文書に組み込む方法について考えてみた。基本的に Flash はブラウザにしてみれば IMG 要素で表現される画像と同じ種類の要素である(インラインレベル置換要素)。しかし、そのマークアップの方法がいまひとつわかりずらいので、解説する。 歴史的経緯 Flash を HTML 文書に組み込むには、2つのタグが使用できる。EMBED と OBJECT である。何で2つもあるのか、不思議に思うかもしれない。そこらへんの事情は次のエントリに詳しい。 .js外部ファイル編 11 FlashのEMBEDとOBJECTタグ 要するに、Flash はもともと EMBED を使って組み込まれていたのだが、そのあと W3C が「EMBED って HTML 4.0 に入ってないんだよ。OBJECT を使えよな、ゴラ！」を横槍を入れてきたので、ブラウザメーカー(Microsoft や
Flash の z-index を Javascript から有効にする - elm200 の日記(旧はてなダイアリー)
趣旨 Flash は、ただのインラインレベル置換要素であるにもかかわらず、デフォルトでは CSS の z-index に関する決まりごとに従わない。z-index とは、画面の x軸・y軸の両方に直交する軸で、要素が画面の手前におかれているのかそれとも奥かを指示する CSS プロパティである。たとえば、position:absolute で z-index を指定した DIV 要素を z-index の指定のない Flash と重ねると、本来ならば、DIV は Flash の手前に表示されなければならないのに、実際には Flash のほうが手前に来てしまう。 では打つ手はないのか、というと実は wmode という Flash のプロパティがあり、これを "transparent" にしてやればよい。たとえばつぎのような感じだ。 <!-- EMBED を使うとき --> <embed src
CSSでWebページの背景画像を指定する - builder by ZDNet Japan
DXの成否を分けるのはガバナンス Microsoft Security Forum 2021 Day2 どこよりもわかりやすい基調講演解説！ 現場業務のデジタル化の最適解 JBSのアプリポケットとアプリメーカーが 企業のデジタル化をサポート 次の一手はこれだ！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu 大学、研究機関、製造業など いま目覚ましい躍進ぶりを見せるデルのHPC その背景と選ばれる理由にせまる 対談：クラウド時代のネットワーク DX推進の要であるクラウド活用 レガシーなネットワークがボトルネックに 体験から学んだ成功への知見 マネーフォワード×エム・フィールド対談 Fintechプラットフォーム開発の「鍵」 Microsof
別のサイトの iframe の中身は Javascript からは見られない - elm200 の日記(旧はてなダイアリー)
iframe に関するセキュリティ上の制限 常識かもしれないが、とりあえずメモ。 次のような HTML を考えてみる。 <html> <body> <iframe src="http://www.softculture.com/" id="iframe1"></iframe> </body> </html> これをファイルとして保存して、それを FireFox 2.0 で直接読み込む。（つまりローカルで実行) Firebugs のコンソールで次の Javascript のコードを実行すると、 document.getElementById("iframe1").contentWindow.document.body "Permission denied to get property HTMLDocument.body" と言われてエラーになる。 別のサイトを読み込む iframe の中身
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
Managing SEO-friendly HTML Titles with Rails : Robby on Rails :