サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
www.1uphp.com
ページ全体の余白の調整をする ブラウザによっては、ページ全体の上下左右に余白が規定値で設定されます。 これでは、デザイン上問題ある場合がありますので、その余白を調整する方法を説明します。 まず、下図にある様にページ全体の余白についての違いを見てみましょう。（それぞれ左上にある赤矢印が余白になります。） 『青い枠線』は<body>～</body>に対して設定してあります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- .sample0,.sample1,.sample3 { width:100px; border:solid 3px #0000ff; background-color:#3366cc; color:#ffffff; text-align:cent
ホームページ作成をしていると、『お問合せはこちらへ』や『アンケート』などといった、訪問者に入力してもらい、ボタンを押してもらう機能が必要になってきます。 また、ホームページ上に直接メールアドレスを記載してメールを送信してもらうリンクからメールを送ってもらう mailtoの場合ですとメールアドレスが公開されてしまいますので問題もありますので、メールアドレスを公開せずに内容を送信してもらう事が出来るフォームを使用した方が良いです。 フォーム自体は、入力項目や、選択項目をページに表示して入力してもらう事ができますが、ボタン（送信や登録）を押した後の処理（実際に入力内容を送信する事や、入力内容を登録したりするプログラム自体）はＣＧＩやＰＨＰなどで処理をします。 このＣＧＩなどのプログラムの多くは、フリーソフトしてインターネット上に公開されていますので、それを使用する方が簡単であり、確実です。厳選リ
ページ全体をレイアウト（その１） ページ全体をレイアウトする方法です。 ここでは、下図の様に 上部にロゴなどのＴＯＰ部分 下部左側には、細めの部分（サイドバーと呼ばれる事が多い） 下部右側には、内容を入れる部分 といったブロックを定義していきます。 勿論、各ブロックの使い方や、内容は自由に使いましょう。 ＨＴＭＬにて行う場合には、テーブル（<table>）を使用して全体をレイアウトし、そのセルの中に各内容を入れていく事になります。 しかし、テーブルレイアウトは表示自体が遅くなったりと問題もあります。 その反面、テーブルレイアウトはレイアウトがブラウザによって崩れにくい利点もあります。 今回は、テーブルレイアウトは省略して、下記のスタイルシートでのレイアウトを行いましょう。 ホームページ作成ＴＯＰ > レイアウト > ページ全体をレイアウト（その１） > このページのＴＯＰ ▲ ページ全体を
ＨＴＭＬのみで表現する場合には、テーブルの設定だけで出来ます。 【考え方】 ＨＴＭＬで行う場合、テーブル自体の背景色が、各セル同士の隙間に見える様にする事で、あたかも線を引いている様にする方法です。 隙間などの場所は↓この様になってます。 【では設定方法を見ていきましょう】 枠線を非表示にする → border="0" 各セル間の間隔を決定する。この例では『１』にします。 → cellspacing="1" 表自体の背景色を決定する。この例では、オレンジにします。 → bgcolor="#ff6633" 見出し部分のセルの背景色をテーブル背景色より少し薄い色の薄いオレンジ(#ff9933)にします。 → bgcolor="#ff9933" 見出し部分の文字色を決定する。この例では、白にします。 → font color="#ffffff" 見出し以外の各セルの背景色を決定する。この例では、
色の書き方には、『色名』による指定方法と、『指定値』による方法があります。 『色名』による指定には、下記にあるカラーサンプル（色見本）の『標準１６色』の『色名』による指定ができます。（ ）内は『指定値』になります。 指定値にはこの１６色の他にも『セーフカラー』と呼ばれる『２１６色』がありあす。
スクロールバーの表示・非表示を調整する レイアウト内の表示内容が画面の表示範囲を超えたりした場合には、スクロールバーが必要になりますが、そのスクロールバーの表示・非表示を調整する事が出来ます。 【注意】 非表示にした場合には環境によっては表示が超えた場合にスクロール出来ないので、表示できないなどの問題が出ますので、十分な注意が必要です。
文字の背景色を設定する 文章の一部分の背景色を変更して、『網掛け』の様な強調をする事ができます。 ホームページ作成中には、文章の一部を強調したりしたくなります。 この場合、タグ内の文字自体の背景を部分的に設定するには、文章内の設定したい文字自体を囲うタグを使用して、そのタグに対して設定して行きます。 しかし、ＨＴＭＬだけで表現するには、複雑で、使用しなくても良い関係のないタグまで使用しないと難しいでので、スタイルシートで簡単に設定していきましょう！
フォーム<form>の中にいれるテキスト入力窓の幅を指定する方法になります。 幅を指定するには、下記の方法があります。 文字数指定：size="文字数"スタイルシート指定：width:サイズ; 今回は、表示サイズの調整の方法ですので、入力する文字数の制限をしたい場合には入力窓の入力文字数を制限するをご覧下さい。 <input type="text">の入力窓は１行の入力スペースになりますので、複数行を入力する為のサイズ指定は出来ません。 この場合には、複数行分の入力窓を入れるの<textarea>～</textarea>を使用します。
見出しの背景に画像を入れる 見出しの背景に画像を入れる方法です。 背景に画像を入れる場合には 同じ画像を繰り返し表示する場合 １つの画像を１回だけ表示する場合 の方法が可能になります。 また、見出しの文字や背景などの色々な表示方法は見出しの表現いろいろを参考にして下さい。
<p style="line-height:150%"> 文章の一部に<span style="border-bottom:solid 3px #ff0000;">赤い実線で 下線を引く</span>方法です。<br> 文章の一部に<span style="border-bottom:dotted 3px #ff0000;">赤い点線で 下線を引く</span>方法です。<br> 文章の一部に<span style="border-bottom:dashed 3px #ff0000;">赤い破線で 下線を引く</span>方法です。<br> 文章の一部に<span style="border-bottom:double 3px #ff0000;">赤い二重線で 下線を引く</span>方法です。 </p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.
画像と文字を揃える（下） 画像と文字の位置を揃える場合の方法を説明します。 （今回の下記の例ではフォントの種類をfont-familyをverdanaにて表現しております。） 画像と文字の下側の位置を揃える場合には、文字のベースライン（baseline）を合わせる場合と、文字の最下部を合わせる場合によって指定方法が異なり、下記の３通りがあります。 ベースライン（baseline）で合わせると↓ の様になり、文字の最下部で合わせると、↓下記の様になります。 （１）ベースライン（baseline）を合わせる gjpqy画像と文字の下部(baseline)を揃える(ＨＴＭＬ) gjpqy画像と文字の下部(baseline)を揃える(スタイルシート) （２）文字の最下部を合わせる gjpqy画像と文字の下部を揃える(スタイルシート)
<table border="1" width="300" height="150"> <tr valign="top"> <td align="left">左-上</td> <td align="center">中-上</td> <td align="right">右-上</td> </tr> <tr valign="middle"> <td align="left">左-中</td> <td align="center">中-中</td> <td align="right">右-中</td> </tr> <tr valign="bottom"> <td align="left">左-下</td> <td align="center">中-下</td> <td align="right">右-下</td> </tr> </table>
色々な見出しの書き方を、スタイルシートで説明します。 良く見かけるテーブルを利用した見出しも載せておきます。 使用したものと、意味を載せます。 また、今回フォントサイズを指定していなのは、全て<h4>～</h4>で行っており、サイズ指定はしておりません。
ロールオーバー 全てのボタンを１枚画像にして移動する マウスが上に来た時に、別々の画像では無く、全てのボタンを１枚の画像にして、表示位置を移動させてロールオーバー効果を出す方法です。 ↑この１枚の画像と、対応する項目部分とで、それぞれ表示位置を指定して表示させ、マウスが上に来た場合に下の対応する部分の画像を表示させる事になります。 １枚の画像なので、別々の画像で行う場合とは違い表示しない画像で先に読み込む必要がありません。 ここでは、javaを使用しない方法になります。 リスト（<ul>～</ul>）で作成したメニューの各項目のリンクの背景に画像の対応する上の部分を表示し、マウスが上に来た時に背景画像を対応する場所まで移動させて下半分を表示する方法です。 よって、画像の作りも上半分に最初に表示する画像、下半分に後の画像、という様に作りましょう。 半分の画像の高さと幅が下記の様に作成されてま
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- p {text-indent:2em;} --> </style> </head> <body> <p>この文章の先頭は、通常の表示位置から２文字下がってます。 <br>この行の位置が通常の表示位置です。 <br>この行の位置が通常の表示位置です。
文字の色を変えたい（リンク部分） リンク部分の文字の色を変えたい場合の方法を説明します 文字色を変更する場合には、背景色も同時に指定しておかないと、ブラウザの設定では、同色になり見にくい場合がありますので、背景色も同時に指定して下さい。 カラーサンプル（色見本）や、色の指定方法はＴＯＰ > カラー > カラーサンプル（色見本）ですを参照して下さい。
選択項目（ラジオボタン・チェックボックス）は少し小さいく、基本的にはサイズを大きくできない事からマウスで選択しにくい欠点があります。 選択項目（ラジオボタン・チェックボックス）のサイズを変更するには、IE6IE7のみの場合ですが、サイズを変更する事が可能です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- ul {list-style:none;background-color:#ffcccc;text-align:center;} .sample1 {border:solid 2px #ff6666;float:left;} .sample2 {b
ここで紹介する方法は、下記の３段階の指定方法を同時に指定する事で実現します。 text-align:center; margin-left:auto;margin-right:auto; text-align:left; 同時に指定する理由は、スタイルシートで中央に表示する為方法であるmargin-left:auto;margin-right:auto;のみの使用だけでは、IEで中央に表示されない事がある為です。 この『表示されない事がある』と言う意味の一部を説明しますと、『ドキュメントタイプの設定の仕方では中央に表示される事がある』という意味になります。古いブラウザ等でも中央に表示されないものが存在します。よって複雑です。 この事を解消する為に、同時に指定します。 【考え方】 １．親側にあたる範囲に対して、text-align:center;を設定する事で、IEでの表示の場合のみ、その親
ロールオーバー 文字や下線、背景など マウスが上に来た時に、文字や下線や背景などを変化させロールオーバー効果の様々なパターンです。 ボタンの様に全体に画像を使用したい場合には、 別々の画像を切り替える １枚の画像を移動させる 全てのボタンを１枚の画像にして移動させる をそれぞれ参考にして下さい。 ここでは、javaを使用しない方法になります。 また、リンク文字の色変更の仕方などは、文字の色を変えたい（リンク部分）で説明してますので確認して下さい。
また、何も（角丸の画像や文章も）入らないセルに対しては、ブラウザによっては空白セルを表示しない場合がありますので、ダミーとして、１ｐｘ（高）×１ｐｘ（幅）の大きさの透明ｇｉｆ画像であるclear.gifを入れてあります。 余分な部分を無くす為に border="0" cellspacing="0" cellpadding="0" などの指定を忘れない様にしましょう 【注意】 下記の書き方は、横幅の表示範囲の問題で記述途中で改行して記述してます。このままで使用すると、記述途中で余分なスペース等が入り、テーブル自体のサイズ等に影響して正確に表示されません。よって、使用する際には、改行などの無い様にして下さい。 <table width="300" border="0" cellspacing="0" cellpadding="0" bgcolor="#00ff66"> <tr> <td wid
影を入れる方法（背景画像） 影を表現して、ページ内に立体的に見える範囲を作成する方法です。 影を表現するには、 影のある画像を背景として配置 影に見える色のブロックを背後に配置 の２種類を行う事で可能になります。 今回は、１番目の『影のある画像を背景として配置』する方法で行います。 使用する画像は下記の３種類使用して、 テーブルを使用する方法 スタイルシートを使用する方法 の２種類の方法を説明していきます。
【概要】 選択されているタブの色が濃く、選択されていない方は薄い色を指定。 選択中の色■(#ff3333) ←→ 選択外の色■(#ffcccc) （その他のパターンの一覧はタブメニューのいろいろ（一覧）で見れます。） 【重要】 『タブ』の色と同色の帯びを、その直下に設置する事が重要です。 これは、２色の場合でも、複数色でも、画像を使用する場合でも共通に重要な事です。 （『現在訪問しているページが、メニューのどこと一致しているか。』を表現する為です。） 現在訪問しているページ自体のリンクは選択できない様にするのが一般的ですが、リンク自体の<a href="リンク先">～</a>を完全に取ってしまうと、スタイルシートを外した場合や、テキストブラウザなどでリンク部分が不明になってしまいますので、『マウスオーバー』時に『何も変化ない状態』が良いと思われます。
複数行分の入力窓を入れる内でもご紹介した通り、 <textarea rows="3" cols="10">～</textarea> にてサイズ指定(rows="3" cols="10")をしても下記の表示結果(1)の様にブラウザによって、その表示サイズが違ってきます。 これでは、ブラウザによってレイアウトが大きく崩れてしまう可能性が高くなります。 下記のスタイルシート指定の様にほぼ同じ大きさにて表示する様に指定していきましょう。
レイアウト調整！などレイアウトに関係するものの一覧です。あなたのホームページ作りに必要な情報を探して下さい。 はＨＴＭＬ、 はスタイルシートで、使用している主なものです。（ はIEのみの指定になります。） また、 ←このショートカットマークの場合には、別のジャンルで説明しているページにジャンプします。（別のウィンドウに表示されます。） やりたい事使用タグ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- ul {list-style:none;} li {float:left;} --> </style> </head> <body> <ul> <li>＜項目１行目＞</li> <li>＜項目２行目＞</li> <li>＜項目３行目＞</li> <
フォントを複数指定したい場合には、各フォントを『,』（カンマ）で区切って設定する事で可能になります。 表示されるのは、指定した順番になります。 また、フォント名の中にスペース（空白）を含む場合には『"』または『'』で囲む事になっておりますが、スタイルシートの要素の中で指定する際には、フォント名を『"』で囲むとstyle="font-family:"フォント名""この様に『"』がダブってしまい、機能しない場合がありますので、『'』で囲む方が良いと思います。 フォントは指定しても、表示するパソコンにそのフォントが入っていない場合には、そのブラウザの規定値で表示されます。 Windows と Macintosh と、cssでは下記の様になってます。 【注意】 フォントの指定の場合には、特に下記cssのキーワードで指定する場合等は、ブラウザ自体の設定によって変更されている場合に、ブラウザの設定が優
テーブルをスタイルシートで中央に表示するには、テーブル全体を<div>～</div>などのブロック要素で囲い、その中身に対して設定していきますが下記の様にブラウザによって結果が変わってきますので、複数の設定が必要となります。 【考え方】 <div>の中身をtext-align:center;で中央に表示() 中央表示されないブラウザ()に対してmargin-方向:auto;を設定 <caption>だけ中央表示されないブラウザ()用に、さらにmarginを設定 になります。 （この方法の１～２に関しての詳細は、レイアウト > 範囲を中央に表示する（センタリング）にて紹介してますので参照して下さい。） １．<div>の中身をtext-align:center;で中央に表示() 最初にテーブルを<div>～</div>で囲い、その<div>に対してtext-align:centerを適用し中央
次のページ
このページを最初にブックマークしてみませんか？
『ホームページ作成には1upホームページ作成の素材・テンプレート・ソフトウェア紹介...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
