サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
2024年ランキング
www.webword.jp
フォームを使ってサーバへデータを送信した時、どのようなデータが実際に送られているのか確認する方法をご紹介しておきます。サーバ側のプログラムは必要ありませんが、メソッドとして「get」を使いますのであまり長いデータでは出来ません。 まず確認したいフォームが含まれるWebページを作成したら、送信先を自分自身(例えばindex.htmlという名前のWebページにフォームを記述している場合はindex.html)に設定しメソッドは「get」にします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="j
リストを使った横型のナビゲーションバーを作成する方法について解説します。 (2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新) まず縦型の場合と同じく、リストを作成し<ul>タグに対して、"margin-left"プロパティ及び"padding-left"プロパティに対して0を設定し、初めから付いている余白を削除します。合わせて"list-style-type"プロパティに"none"を指定しデフォルトで付いている黒丸を消します。 sample7.html 次に同じく<ul>タグに対して"width"プロパティを使ってナビゲーションバーの幅を指定します。また"border"プロパティで全体に枠を描いておきます。今回は横に並べるので横に並べた時に必要となる幅を設定して下さい。 sample8.html 次にリストを横に並べるために、<li>タグに対して"floa
ボタンのようなものを作る場合、ボタンの画像を用意してその画像にリンクを張るというのがよく行われていることだと思いますが、ここではリンクそのものをボタンらしくする方法を見ていきます。 (2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新) <a>タグはデフォルトではインライン要素ですので、これをブロック要素に変換します。要素のタイプを変更するにはスタイルシートのdisplayプロパティを使います("display"については表示形式の変更(display)を参照して下さい)。 a{ display:block; } ブロック要素に変換したら、ボタンの幅や高さを設定します。幅を設定には"width"プロパティで、高さについては"padding-top"と"padding-bottom"で設定します。またボタンに表示させるテキストは中央に表示したいので"text-al
まず:link、:visited、:hover、:activeの4つの擬似クラスについて確認します。これら4つの擬似クラスはa要素を対象として一緒に使われることが多いためまとめて解説します。 :link擬似クラスと:visited擬似クラスはa要素のみに使用できる擬似クラスです。使い方は次の通りです。 a:link { プロパティ: 値; } a:visited { プロパティ: 値; } :link擬似クラスはリンク先に未訪問の場合に適用され、:visited擬似クラスはリンク先に既に訪問している場合に適用されます。これらはbody要素で用意されているlink属性とvlink属性に値を設定した場合と同じものです(どちらも非推奨属性です)。 では簡単なサンプルで試してみます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
ボックスなどを順番に追加していった場合、上から下に向かって順番に表示されますが、下ではなくボックスの右側や左側に次のボックスを表示させたい場合の指定方法です。floatプロパティを使って設定します。 float : float プロパティは"float"です。値は下記の中から1つを選択します。 float : left; /* ボックスを左に寄せ、次のコンテンツを右へ回り込ませる */ float : right; /* ボックスを右に寄せ、次のコンテンツを左へ回り込ませる */ float : none; /* 回り込みは行わない */ デフォルトは「none」を指定した場合と同じで回り込みは行われません。 具体的なイメージは試して頂いた方が早いので、実際の例を見てください。まずは「flow」を設定しない場合です。 sample4-1.html <!DOCTYPE html PUBLIC
:before擬似要素と:after擬似要素は対象となる要素の前または後に指定した内容を追加することができます。使い方は次の通りです。 要素名:before { プロパティ: 値; } 要素名:after { プロパティ: 値; } ※:before擬似要素と:after要素はIE6及びIE7では未サポートです。 どちらの擬似要素も追加される内容はcontentプロパティに設定した値となります。contentプロパティにはテキストの他に画像などのURIを指定することができます。(詳しくはcontentプロパティのページを見てください)。 例えば次のように使用します。 p:before { content: "[開始]"; } p:after { content: url("img/sample.png"); } なおブロックレベルの要素に対して:before擬似要素や:after擬似要素を
背景画像はデフォルトでは、対象となる要素の左上(パディングの部分)に表示されますが、要素内のどの位置に表示させるかの設定方法について見ていきます。定義式は下記のようになります。 background-position : h-position v-position background-position : h-position プロパティは"background-position"です。値には数字＋単位で指定します。例えば下記のようになります。 background-position : 10px 10px; background-position : 50% 0%; background-position : 10px; ※単位については「値の単位と記述方法」を参照して下さい。 値を2つ指定する場合は、水平位置と垂直位置の順で半角スペースで区切って指定します。値を1つだけ指定した場合は
「em」はfont-sizeプロパティの値を1とする大きさです。つまりフォントサイズの大きさを1として考えます。 実際の例を元に確認します。まず何もスタイルが設定されていない次のようなHTML文書を用意します。 <p> CSSでは数値＋単位でさまざまな大きさを表します。 </p> ブラウザで表示させてみます。 ではp要素に対して文字間隔を指定するletter-spacingプロパティを指定してみます。 <p style="letter-spacing: 1em;"> CSSでは数値＋単位でさまざまな大きさを表します。 </p> 間隔は「1em」です。「em」はフォントサイズの大きさが1ですので「1em」はフォントサイズの大きさだけ文字間隔をあけることになります。ではブラウザで表示させてみます。 このように1文字毎にフォントサイズの大きさだけ間隔があきました。 p要素のフォントのサイズを変更
サイズが可変するようなボックスに対して背景画像を適用する例について見ていきます。 (2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新) 例として下記のようなボックスを考えて見ます。 <div class="sample"> <p> 清原、歴代1位のサヨナラ弾＝野村克也に並ぶ通算11本目－プロ野球・オリッ クス </p> </div> <div class="sample"> <p> オリックスの清原和博内野手（38）が27日、スカイマークスタジアムで行われ た横浜2回戦の9回、一死満塁でクルーン投手から逆転サヨナラ満塁本塁打を放 った。清原のサヨナラ本塁打は巨人時代の2001年7月14日の広島戦以来通算11 本目で、野村克也（現楽天監督）に並ぶ歴代1位となった。前回（01年）もサ ヨナラ満塁本塁打で、両リーグにまたがってサヨナラ満塁本塁打を放ったのは 清原だけ
スタイルシート毎の優先順位は前のページなどで記載した通りですが、同じスタイルシート内に同じ要素のプロパティに複数回値が設定された場合はどうなるのかをまず確認してみます。 簡単な例で確認します。まず対象となるHTML文を作成します。 <p> 今年は第二回の<strong>ワールド・ベースボール・クラシック(WBC)</strong> が開催されます。監督選考の件で日本でもごたごたとしていましたが第一回 は<strong>優勝</strong>でしたので今回もいい結果を出して欲しいものです。 </p> 次にスタイルシートを適用させます。strong要素に対して2回値を設定しています。 <style type="text/css"> strong { color: #00ff00; } strong { color: #ff0000; } </style> 実際にブラウザで見てみると下記のように
ホームページのレイアウト例ですホームページのデザインにおいて、テーブルを使わないスタイルシートを使ったレイアウト例を確認していきます。よくある2段組や3段組の段組レイアウトの方法ややギャラリー型のレイアウト方法です。 関連カテゴリ:ホームページの作成入門, HTML/XHTMLで使うCSS入門 段組基本レイアウト ギャラリー型レイアウト ＋Sponsored Links
著者 / TATSUO IKURA 初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を多数行っています。 ≫ 詳しいプロフィール
対象となる要素が、同じ親要素の子要素で特定の要素のすぐ次に現れた場合だけ対象となるセレクタです。隣接兄弟セレクタとも呼ばれます。 隣接要素 + 対象要素 { プロパティ: 値; } 隣接要素と対象要素を「+」で区切って記述します。対象の要素が隣接要素のすぐ次に現れた場合だけが対象となります。なお隣接要素と対象要素は同じ親要素の子要素である必要があります。 次の例を見てください。 h1 + h2{ color: #ff0000; } この場合、h1要素の直ぐ次の要素がh2要素だった場合にだけ、h2要素にスタイルが適用されます。 サンプル では簡単なサンプルで試してみます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
Web ページを作成する上で HTML は文書の構造を決めるために使われるものですが、それを画面上にどのように表示するのかを決めるのがスタイルシート(CSS)です。 Web ページ全体のレイアウトや各文書のフォントやスタイルの指定、枠線の有無など見た目に関する設定は全てスタイルシートを使って記述していきます。ここではスタイルシートの基本的な書き方について解説します。 スタイルシートを使わなかった頃の方法 スタイルシートで見た目を記述 スタイルシート言語の指定 外部スタイルシートとして記述 style要素にスタイルシートを記述 style属性にスタイルシートを記述
CSS の書式について解説します。スタイルを設定するためのセレクタを指定してプロパティと値を設定する方法や、様々なセレクタの指定方法について解説します。 (2022 年 02 月 19 日公開 / 2022 年 02 月 19 日更新) 基本書式 セレクタのグループ化 タイプセレクタ 子孫セレクタ 子供セレクタ 隣接兄弟セレクタ クラスセレクタ IDセレクタ 属性セレクタ ユニバーサルセレクタ
利用者の方が問い合わせ内容を記述したり、アンケートを作って意見を送付してもらいたい時に利用するのがフォームです。フォームにはテキスト入力ボックスやラジオボタンなど様々な部品が用意されています。ここではフォームの使い方について解説します。 ※なおフォームはあくまで利用者が入力などを行うためのものです。入力された内容はサーバ側に送信されますが、このデータを適切に処理するにはサーバ側で CGI プログラムなどを用意しておく必要があります。 (2022 年 02 月 19 日公開 / 2022 年 02 月 19 日更新) form要素によるフォーム作成 フォームから送られるデータの確認方法 テキストボックス ボタン イメージボタン パスワードボックス ラジオボタン チェックボックス テキストエリア セレクトボックス 選択肢とグループ化 隠し項目 ボタン(button要素) ファイル選択ボックス
ホームページを作成するための HTML 入門です。これからホームページの作成や公開をしてみたいという方を対象に、ホームページ作成に必要な HTML の基礎について解説します。 ホームページとは Webブラウザとは HTMLとは スタイルシート(CSS)とは ブログとは 文字コードと文字化けとは
Contact question@buzzword.jp with question regarding this site. Copyright (C) 2006 BuzzWord. All Rights Reserved.
ここからは幅可変のレイアウトについて見ていきます。幅可変とはブラウザの大きさに合わせて横の表示領域を拡大縮小するタイプのレイアウトです。段組の場合でよく使われるのはメニュー部分の幅は固定のままで、メインの領域のみ可変にするという場合です。 基本的な構造は幅固定の場合と同じですので、2段組の場合は下記のようになります。 スタイルシート側の修正点としては、幅が可変ですので、「wrapper」要素や「contents」要素に設定した「width」プロパティを外します。 #wrapper{ margin:0; padding:0; background-color:#ffffff; } #contents{ margin:0; padding:0; } 次に幅を固定したい「navi」要素に関しては固定幅レイアウトの場合と同様に「width」プロパティを設定し、そして「float:left」を設定し
まずHTML全体の大枠の部分を作成していきましょう。 まずブラウザの領域全体の色を設定します。これには<body>要素の「background-color」プロパティに色を設定することで対応します。 body{ margin:0; padding:0; background-color:#dcdcdc; } 次にコンテンツを配置するための領域を1つ用意します。全てのコンテンツはこの領域の中に配置します。なぜ<body>要素の中にこのような領域を作成するかといいますと、幅を固定したレイアウトにする場合の幅の指定に使うためです。 <div>要素を使い、属性として「id=wrapper」を指定して作成します。 #wrapper{ margin:0; padding:0; background-color:#ffffff; } またコンテンツ領域全体の中で、ヘッダー部分、コンテンツ部分、フッター部
ここでは画面全体にサムネイルなどの画像を大量に表示するレイアウトについて見ていきます。個々の画像はバラバラの大きさでも構いませんが、見た目を重視するのであれば画像のサイズを統一するか、画像の大きさはバラバラであってもその画像を入れる枠を作り、枠のサイズを統一しておくといいかと思います。 全体の構成としては下記のようになります。 画像を格納するための領域を<div>要素で定義し、必要な数だけ追加していきます。 全体をヘッダー、コンテンツ領域、フッターの3つの分けるところまでは、『基本構成』を参照して下さい。下記のようになります。 body{ margin:0; padding:0; background-color:#dcdcdc; } #wrapper{ margin:0; padding:0; background-color:#ffffff; } #header{ margin:0;
WEB作成ノートではHTML＋CSSを使ってこれからホームページを作成しようとする初心者の方へ役立つ情報を提供していきます。
このページを最初にブックマークしてみませんか？
『スタイルシートの学習ならWebWord』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
