【即実践！HTML+CSS】私流、ツールの選び方 第1回：ベストなコーディングツールを探せ！ 著者：まつむらよしあき 公開日：2008/04/04（金） コーディングツールはどう選ぶ？ 2008年4月の特集「即実践！HTML+CSS」の金曜日では「コーディングのためのアプリケーションとツール」について取り上げます。 「Webサイトを作成するにあたって、どんなコーディングツール、アプリケーションを使えばいいの？」 これは、Webサイト制作の道に足を踏み入れる者にとって最初の関門です。大げさに聞こえるかもしれませんが、選んだツールによって生産性が大きく変わってくるのが事実です。自分にあったコーディングツール、アプリケーションを探すにあたって、まずはどんなツールがあるのか、またどんなツールが広く使われているのか紹介しましょう。 一般にコーディングツール、アプリケーションといってもかなりの数があり

複雑化するWebブラウザの検証 WebデザインのHTMLコーディングでは、複数のOSやWebブラウザ、またバージョン別による検証確認は必須です。OSやWebブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることもあるからです。 テーブルレイアウトでコーディングしていた時は、OSのフォントサイズの違いによる段落検証が中心でした。しかし、CSSレイアウトへ移行すると、WebブラウザごとにCSSの解釈が変わってくるため、検証がより複雑になってきます。今回はWebブラウザ検証方法と、その対処策をマスターしていきます。 現在、一般的に使用されている主なWebブラウザは、Internet Explorer（通称IE）のバージョン6と7、Firefox、Safari、Operaです。これらのWebブラウザシェアは日々推移していますが、ユーザ環境リサーチを行っているW3Counte

CSSでリストを横式ナビゲーションに では、次に同じXHTMLソースをそのまま使い、Webサイトの上部に配置されるような横式のナビゲーションにカスタマイズしてみましょう（図3）。 横式ナビゲーションの手順 ここで前回に解説した「floatプロパティ」浮動ボックスを再び使用します。前回はカラム（段組）を浮動ボックス化して回り込みを設定しましたが、今回は各リスト項目を浮動ボックス化します（リスト4）。 まずナビゲーション全体の横幅を<ul>タグに固定します。それぞれのナビゲーションボタンが120pxで、これが5個並ぶので合計600pxです。 次に<li>タグにfloat:left;の設定を記述します。これですべての項目が左に回り込む設定になりました。そしてfloatプロパティのルール上、設定したボックスには必ず幅widthを指定します。また、今回はリストの背景にグラデーションを表示させて、ボタ

【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） float（フロート）を使った3段組カラム作成 次は3段組を作ってみましょう。「ナビゲーション」エリアを左に、「メインコンテンツ」エリアを真ん中、追加で「サブ」エリアを右側に配置します。 一見、複雑になったかのように見えますが、配置方法は先ほどの2段組と同じです。今回は「ナビゲーション」エリア<div id="navi">と「メインコンテンツ」エリア<div id="main">を包括する<div id="wapper">を作ります。ボックスを入れ子状態にするのです。 まず<div id="wapper">と<div id="sub">ボックスを左右にフロートします。次に<div id="wapper">の子ボックスにあたる<div id="ma

【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） float（フロート）の概念 floatプロパティは、元々ボックスの外側にテキストを回り込ませるためのプロパティです。例えば<div>ボックスにfloat:leftと指定すると、そのボックスは浮動ボックスとなり、左端に配置され、その後に続くテキストが右側に回り込みます。 同様にfloat:rightと指定すると浮動ボックスは右端に配置され、続きのテキストは左側に回り込みます。 floatを使用する場合に注意する点は3つあります。 1つ目は、CSS2の仕様ではfloatプロパティを指定する場合に、そのボックス自身の幅を（width）を指定しておく必要があることです。この幅（width）を指定しないと一部のWebブラウザで回り込みが反映されない場合が

【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） テーブルレイアウトでのカラム作成 Webデザインのレイアウトではカラム（段組）という手法がよく使われています。この語源は「Column」表計算ソフトで使う「列」からきています。 Webサイトでは左側のカラムをナビゲーションにして、右側のカラムをコンテンツエリアとするパターンや、ポータルサイトのように情報量が多いWebサイトでは3段組カラムを使い、左側がナビゲーション、真ん中にメインコンテンツ、右側にバナーや関連へのリンク、という区分けもスタンダードな形式といえるでしょう。 テーブルレイアウトでのコーディングによるカラム作成は、まず全体をテーブル<table>タグで囲み左右にセルを作ります。そして左カラムは左のセルに入れ子のテーブルを新規作成して、

【即実践！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

平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。

サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは本日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

EclipseでPHP開発 EclipseはJava言語向けの統合開発環境として利用されることが多いが、プラグインをインストールすることでJava以外の言語での開発を行うことも可能だ。C/C++やCOBOLをはじめ、スクリプト言語(Light Weight Language、いわゆるLL)向けのEclipseプラグインについてもさまざまなものが存在する。 そんな中、EclipseプロジェクトでもLL向けのプラグインの整備が行われつつあり、PDT(PHP Development Tools)プロジェクトではEclipseの標準Web開発プラットフォームであるWTPをベースにPHP向けの統合開発環境の開発が行われている。 PDTは現在開発中であり、まだ正式版のリリースには至っていない。今回は執筆時点の最新版であるPDT 0.7 RC3の試用レポートをお届けする。 PDTのインストール 本稿では

このエリアへのアクセスは、ログイン若しくは許可された権限が必要です。 ページが自動的に更新されない場合はここをクリックしてください

PHPの開発環境について書いた前回の記事での予告通り、 今回はPHPEclipseについてご紹介したいと思います。 PHPEclipseはEclipseというIDE(統合開発環境)のPHP開発用プラグインです。 Eclipseとは、Java言語の開発ではデファクトスタンダードと 言ってもよいほど普及しているIDEです。 元々はIBMが開発していたIDEのソースコードを、 オープンソースコミュニティに寄贈したのがきっかけで 開発が始まりました。 オープンソースといっても、IBMやSunなどの大企業が 専門に開発者を割り当てて開発を支援するなど、 強力に機能強化や改善が進められています。 PHPEclipseはそのEclipseのプラグインとして開発され、こちらも オープンソースのプロジェクトとして開発が進められています。 Eclipseのプラグインとして動作するので、Eclipseがもともと

4/22 バージョンＵＰ バージョンアップの詳細→ＰＨＰエディタVerUpinfo プロジェクト管理やgrep機能などのついたPHP統合開発環境(IDE) vectorのものは古い(v1.40)ので最新版を手に入れてください(2004/02/17) 累計50万ダウンロード突破(2010/12/25) スクリーンショット (クリックすると大きく表示されます) 対応ＯＳ Windows98/Me/2000/XP (2000 or XP 推奨) ＰＨＰエディタの特徴 ( リンクをクリックすると詳しい説明を表示します。) ・フリーウェアですのでお手軽に利用いただけます。 ・ややこしい初期設定は不要。ＰＨＰに特化されているので初心者の方もすぐに使い始められます。 ・予約語、変数名、コメント等エディタの色分けが自由に可能。分かりやすい色分けでケアレスミスを 未然に防ぎます。(v1.35より予約語、予約