サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
www.dspt.net
<meta http-equiv=”Refresh” content=”;URL=”> 指定時間になると、表示しているページを再度読み込んだり(更新)、他のページへ移動させることができます。これらの方法は記述の仕方で変えることができます。 指定時間になったら同じページを再読込(リロード) メタタグなので、HTML構造の<head></head>内に挿入します。「content=””」でページを切り替える時間を指定します。なお、この時間はページの表示が完了してからカウントされます。 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html lang=”ja”> <head> <meta http-equiv=”Refresh” content=”5″> <title>デザイナーズ プロジェクト [DSPT]</
解説 要素の幅やボックスの幅をブラウザの画面に合わせて表示させるには、「width」プロパティにおいて、値をパーセントなどの相対的な数値で指定すれば可能です。 こうすれば、ブラウザの表示幅に依存しないレイアウトにできます。 しかし、画面を極端に狭くして閲覧すると、レイアウトにも限界が生じ、レイアウトが崩れることもあります。 また、逆に幅を極端に広くして見た場合には幅が広がりすぎて見にくくなってしまうこともあります。 解決法 これを解決するために、要素の幅の可動範囲を予め指定しておくことができます。 これを実現するのが「min-width、max-width」プロパティです。 これらのプロパティにおいて、要素の幅の最小値と最大値を指定します。 指定方法 「width」プロパティと同様に、サイズ(数値)やパーセントによる指定が可能です。 ただし、厳格な最小値と最大値を定めるための値ですので、一
InternetExplorer独自の「filter:()」フィルター関連のサンプルです。 元のサンプル画像 fliph (水平方向に反転) flipv (垂直方向に反転) chroma (特定色の透明化) gray (グレースケール表示) alpha (グラデーション) invert (ネガ反転) blur (ぶれ) wave (ゆがみ) xray (白黒反転) dropshadow dropshadow (文字の影) glow glow (文字を光らせる) mask mask (マスク) shadow shadow (ぼかし影)
<a href=”mailto:?subject=?body=”> 宛先があらかじめ入力された状態でメールソフトを起動させる方法のオプションとして件名や本文もあらかじめ入力しておくことができます。以下のように指定します。 宛先のメールアドレス mailto:メールアドレス 件名 ?subject=予め表示される件名 本文 &body=予め表示される本文 記述例 <a href=”mailto:example_mail@xxx.jp?subject=~に関するお問い合わせ&body=返信は日本太郎まで。”>宛先はこちら</a><br> example_mail@xxx.jp 宛先はこちら example_mail@xxx.jp このタグで指定できるのはメールの宛先だけです。メールソフトの起動の有無や、メールソフトの種類までを指定することは出来ません。これらの設定はユーザが利用する個々のブラウ
<meta http-equiv=”Content-Type” content=”text/html; charset=”> HTMLの記述形式(文字コード)を正しく設定することによって、ページが読み込まれたときの文字化けを防ぎます。 文字コードには以下の4種類があります。最近のWEBページはShift-JISで作られていることが多いのですが、ブログの発展とともにEUC-JPも増えてきました。 Shift-JIS EUC-JP ISO-2002-JP UTF-8 各文字コードでの指定方法 以下のタグを<head></head>内にメタタグ<meta>として記入します。
インライン要素一覧 要素名 働き 要素名 働き a リンク abbr 略語 acronym 略語(頭文字) applet Javaアプレット挿入 b 太字 big 大きめの文字 br 改行 cite 出典元 code プログラムコード dfn 定義 em 強調 font フォント i 斜体 iframe インラインフレーム kbd キーボード入力 label フォームラベル object オブジェクト q 引用 s 取消線 samp サンプル(例) small 小さめの文字 span 1行グループ(汎用インライン要素) strike 取消線 strong 強い強調 sub 下付き文字 sup 上付文字 tt 等幅フォント u 下線 var 変数、引数(ひきすう)
<a href=””><img src=””> 文字にリンクをする方法の他に、画像からリンクすることも出来ます。例えば、メニューなどに画像を使用したりすることもできます。 リンクは通常のようにリンクタグに「href=””」や「target=””」などの属性でリンク先やターゲットを指定し、画像タグには「src=””」や「align=””」などで、画像の場所や表示位置を指定します。 記述例 「HTMLタグ/CSS一覧と初心者向けホームページ作成解説集」の画像からトップへリンクをしてみます<br> <a href=”https://www.dspt.net/”><img src=“../../logo.gif” alt=”HTMLタグ/CSS一覧と初心者向けホームページ作成解説集”></a>
上揃えの例 <img src=”../../logo.gif” align=”top”> 文字は画像に対してこの位置に表示されます。 文字は画像に対してこの位置に表示されます。 中央揃えの例 <img src=”../../logo.gif” align=”middle”> 文字は画像に対してこの位置に表示されます。 文字は画像に対してこの位置に表示されます。 下揃えの例 <img src=”../../logo.gif” align=”bottom”> 文字は画像に対してこの位置に表示されます。 文字は画像に対してこの位置に表示されます。 左寄せの例 <img src=”../../logo.gif” align=”left”> 文字は画像に対してこの位置に表示されます。 上揃えとの違いを良く理解しましょう。 文字は画像に対してこの位置に表示されます。上揃えとの違いを良く理解しましょう。
<a href=”#”> あらかじめ同じページ内の任意の場所にラベルをつけておき(名前を付けておく)、その位置へリンクをしたい場合に使用します。 例えば、長い文章の各段落のはじめにラベルを付け、画面の最初で各段落へ簡単に飛べるようなリンクを作ることもできます。通常のリンクと異なるのは、リンク先が同じページ内であるという点です。 指定方法は、「href=””」という属性の中に「#(半角シャープ)+リンク先のラベル」を書き入れるだけです。もちろん、あらかじめ任意の場所(リンクさせたい場所)でラベルの名前付けをしておく必要があります。 記述例 例えば画面のトップに「page」というラベル名を付け、<br> <a href=“#page”>画面トップへ移動できるようにリンクを指定する</a> 例えば画面のトップに「page」というラベル名を付け、 画面トップへ移動できるようにリンクを指定する
解説 「table-layout」プロパティは、表の列の幅を自動もしくは、固定させて表示させるスタイルシートです。 通常、table要素の属性「width」が定められてない場合、列の幅は内容に応じて決定され表示されますが、表の内容がすべて読み込まれてから列の幅が決められるので、表全体が表示されるのに時間がかかってしまいます。 table-layout:fixed; そこで、「table-layout:fixed;」とすると、表の最初の行が読み込まれた時点で列の幅が決定されるので、表のブラウジングの速度を向上させることができます。 ただし、値に「fixed」を指定した場合、表の最初の行td要素には必ず「width」属性を指定し、あらかじめ列の幅を決めておく必要があります。 また、表の列の幅は1行目が優先されますので、2行目以降内容によっては列に内容が収まらないこともあるので注意してください。
解説 「display」プロパティは、あらかじめ要素ごとに決まっているブロックレベル要素やインライン要素などの種類を変えることのできるスタイルシートです。 例えば、段落(P)要素はブロックレベル要素ですが、これをインライン要素に変えることもできます。 HTMLの要素の種類については「スタイルシートを書く前に〜インライン要素とブロックレベル要素〜」を、種類別の要素一覧は以下を参照してください。 ブロックレベル要素一覧 インライン要素一覧 置換要素一覧 設定できる値 「display」プロパティで指定できる値は以下の表をご覧ください。
解説 文字を縦書きにするスタイルシートです。 日本語独特の書き方のため、このプロパティは現在一部のInternetExplorerしか対応していませんが、CSSレベル3で実装予定だそうです。 値 「writing-mode:tb-rl;」とすることで、文字が縦書きになります。 初期値は「lr-tb」です。 開始位置 通常、縦書きは右側から書き始めますので、「writing-mode:tb-rl;」とすると、縦書きの文章はブラウザの画面右側に表示されます。(サンプル参照)
SEOとは SEOとは”Search Engine Optimization”の略で、日本語にすると「検索エンジン最適化」となります。 WEBサイトはサイト間のリンクがあって初めて成立するものですが、その中でも検索エンジン経由でのサイトへのアクセスはこれらのリンクの中でも大きな割合を占めます。 GoogleやMSN、Yahooなどの大手ロボット型検索エンジンは、ページの収集をすべてロボットに頼っており、登録されるページ数が多いことが特徴で、それに応じて利用者も多いことが知られています。 利用者がこれらの検索エンジンを利用し、ある検索語を入れてサイトを検索したとき、より上位に表示されたサイトからアクセスしていきます。 作成者側から見れば、アクセスを増やすためには、これらの検索エンジンで自分のサイトがより上位に表示されることが必須となってきます。 そこで、ロボット型の検索エンジンが好むサイト作
インデントとは インデントとは様々なアプリケーションにおいて、文字を入力する際に行頭の文字下げを指定するものです。 文章を改行すると初期設定では左側が各行において揃いますが、インデントを指定することで文字をずらし、見やすさを調整することが出来ます。 HTMLにおけるタグのインデント HTMLの記述内容は、すべて文字で表されているので、行を重ねるごとに改行を伴います。 タグ打ちと呼ばれ、タグを手入力で行う場合は特にインデントを組むことは稀です。 しかし、多くの制作ソフトによって生成されるHTMLのタグはデフォルトの状態ではインデントが指定されていることがあります。 例えば、制作ソフトの代表「IBM ホームページビルダー」の場合、初期設定でのインデントによる文字下げは「2文字」とされています。 従って、特に設定を変えることなく、このソフトで制作した場合、階層が深くなるタグ(テーブルなど)ほどイ
DOCTYPE宣言で見た目が大きく異なる HTMLのDOCTYPE宣言によってCSSの認識や表示の仕方に違いがあります。この点について解説します。 なお、以下の文章は本サイトの『HTMLタグ一覧』より文章を引用しています。 汎用性を保たせるためのモード HTMLの形式が徐々に進化することに並行して、HTMLを装飾(デザイン)するスタイルシート(以下CSS)も変化し続けています。 現在のブラウザはCSSの標準に準拠した解釈でページを表示するようになっていますが、ブラウザの種類やHTMLの形式によってその解釈が異なることがあります。 これを回避するため、個々のブラウザでは古いHTMLのバージョンで書かれたページも表示できるように、互換モードというものが搭載されています。 現在のブラウザの多くはCSS標準に基づいてページを表示するするようになっています。 このCSSの標準に準拠して表示するモード
CATEGORY テーブルタグ サイト上でエクセルのような表を表現する際に必要なテーブル関連のHTMLタグ一覧を解説します。 目的から選ぶ 表を挿入する 表の枠を指定する、または枠を消す 表全体の横幅をサイズ指定する 表全体の縦幅をサイズ指定する 表の罫線の幅をサイズ指定する 表のセル内の余白(マージン)を指定する 表全体の背景色を設定する 表全体の背景画像を設定する 表の表示位置を指定する 表の概要や要約を記入する 表題(表のタイトル)を記入する 行単位で背景色を設定する 行単位で背景画像を設定する (※) セルごとに横幅をサイズ指定する セルごとに縦幅をサイズ指定する セルごとに背景色を設定する セルごとに背景画像を指定する セル内に記入した文字の横方向の表示位置を指定する セル内に記入した文字の縦方向の表示位置を指定する 横方向にセルを結合する 縦方向にセルを結合する セル内で自動的
<style type=”text/css”> <!– body {line-height : 140% ; } –> </style> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS”> <meta http-equiv=“Content-Style-Type” content=“text/css”> <title>行間を空ける</title> <style type=”text/css”> <!– span {line-height : 140% ; } –> </style> </head> <body> <!–上で指定して変えたい文字をS
解説 「cursor」プロパティは、ページ上で表示されるマウスポインタ(カーソル)の種類を変えることができるスタイルシートです。 通常、マウスカーソルは矢印で表示されますが、リンクの上にきたときや入力中のはそれぞれ異なる種類のカーソルが表示されるはずです。 これらカーソルの種類を要素ごとに変えることができます。 値 「cursor」プロパティで指定できるカーソルの種類に割り当てられた値は、以下の表のようになっています。 以下はWindows系のOSのポインタの一例です。 OSやブラウザによって表示されるカーソルの形状は異なります。 値 カーソル形状 ポインタ例
解説 文章中の途中で英単語の改行をするかどうかを指定するスタイルシートです。 IE独自のプロパティですが、Safariも対応しています。 ただし、一部の値で両ブラウザの挙動が異なります。 break-wordの場合 「word-wrap」プロパティの値に「break-word」を指定した場合の挙動ですが、両ブラウザとも要素内に英単語が収まりきらない場合は単語の途中で改行されます。 normalの場合 一方、「word-wrap」プロパティの値に「normal」を指定した場合は、InternetExplorerでは要素内に英単語が収まりきらない場合は改行できる部分まで要素の幅が伸びて、単語と単語の間で改行されます。 また、Safariでは、要素に英単語が収まりきらない場合でも、要素は拡大せず、収まらない部分は要素からはみ出して表示されます。(overflowプロパティに依存)
スタイルシートの認識の違い 一部のInternetExplorerでは、CSSの『width、height、border、paddingプロパティ』において解釈の不具合があり、ボックスの表示サイズに既知のエラーがあります。 対象は以下のブラウザです。 InternetExplorer 5.5以前のバージョン InternetExplorer 5.5以降のバージョンかつ互換モードで表示時 ブラウザの標準/互換モードの起動やDOCTYPEスイッチによるこれらの切り替えについては『ブラウザ別標準・互換モード対応表』をご覧ください。 具体的な不具合 ボックスモデルでwidth/heightプロパティを指定した場合、「width/heightプロパティは要素内容の縦横の長さを指定するもので、パディング(padding)とボーダー(border)を含まない」とCSSで定義されています。 従って、実際の
解説 「z-index」プロパティは、「position」プロパティで重なってしまった要素の表示階層(重なりの順序)を指定できます。 値は「auto」または「0以上の整数値」です。 値(auto) 「z-index:auto;」とした場合、その要素を含む親要素と同じ階層(レイヤー)に表示されます。 値(0以上の整数値) 一方、「z-index:0以上の整数値;」とした場合、「z-index」プロパティが指定されている要素のうち、数字が大きい順番に重なりの順序が決まります。 従って、一番数字大きい値を持つ要素が最前面に表示され、一番小さい数字の要素が最背面に表示されます。 p { width:250px; height:250px; position:absolute; } p.z0 { top:50px; left:50px; z-index:0; background:#f6f6f6;
解説 スタイルシートをHTMLに読み込む方法に3種類あることはすでに説明しました。 以下の3つです。 各要素ごとに個別にスタイルシートを適用する方法 HTMLファイルごとにスタイルシートを記述する方法 外部スタイルシートを読み込み、一括指定する方法 この3種類のスタイルシートの優先度は、上から順に高くなります。 従って、これらの方法で、セレクタに同じプロパティが設定されていた場合、優先度の高い方法の設定値が有効になります。 優先度を変える 以前に設定していたセレクタを、他の方法によって改めて記述し直した場合、これらの優先度によって内容が上書きされてしまうこともあります。 これを避けるため、どの方法よりも最優先したいプロパティがある場合、上記のように『!important』をプロパティの値の後ろに記述します。 このようにすると、どの方法でCSSを読み込んだとしても、!importantが書か
携帯サイトを運営する上で、携帯端末のみをアクセス可能にしたい場合にサーバーに設置が必要なサーバー定義ファイル「.htaccess」を簡単に生成します。キャリアや検索エンジンのクローラーごとに設定可能なため、例えば「auは許可し、docomoは拒否」といった設定も可能です。 アクセスを許可したいキャリアやクローラーを選択し、最後に「htaccess生成」ボタンを押すと、htaccess用に書かれたIP情報(自IP含む)が表示れます。表示内容をコピーし、「.htaccess」という名前で保存した後、自分のサーバーにアップロードすれば完了です。 以下の携帯キャリアとモバイル向け検索エンジンに対応しています。 ※スマートフォンは対象外です。 携帯キャリア (5) NTT docomo, au by KDDI, SoftBank, 旧willcom(新Y!mobile), 旧emobile(新Y!m
テーブル関連のスタイルシート 表(テーブル)に対して細かな設定をするスタイルシート一覧です。以下のスタイルシート一覧より目的の設定を選んでください。解説ページに飛びます。 スタイルシート一覧 表の列に関してその幅を固定する table-layout 表のセルの境界線を重ねる border-collapse セルの境界線の間隔を指定する border-spacing 空のセルの境界線の表示有無を決める empty-cells キャプション(表題)の表示位置を指定する caption-side 最新リファレンス
InternetExplorerの不具合 InternetExplorerではスタイルシートのセンタリングの解釈に不具合があり、通常の設定では対象が中央揃えになりません。 この不具合が報告されているのは以下の場合です。 InternetExplorer 5.5以前のバージョン InternetExplorer 5.5以降のバージョンかつ互換モードで表示時 ブラウザの標準/互換モードの起動やDOCTYPEスイッチによるこれらの切り替えについては『ブラウザ別標準・互換モード対応表』をご覧ください。 具体的な不具合 ブロックレベル要素の幅を指定し、その要素をブラウザや親要素に対して中央揃えする場合、以下のように、widthプロパティによって要素の幅を指定し、左右のマージンの設定を『auto』にする必要があります。 以下のサンプルは上のブラウザ条件以外で閲覧した場合、対象の要素(p)自体が(BOD
2020年4月25日 携帯端末以外のIPを制限するhtaccessを簡単生成(Mobile IP htaccess Maker) 携帯端末以外のIPを制限するhtaccessを簡単生成(Mobile IP htaccess Maker) 携帯サイトを運営する上で、携帯端末のみをアクセス可能 […]
2020年3月29日 見出しを付ける <h1>~<h6> 新聞のヘッドラインのように、文章や段落の見出しを付ける時に使います。 見出しは<h1>、<h2&g […]
CATEGORY ホームページの作り方(初級) ホームページ作成に関しての知識が全くない方を対象に、ホームページ制作が初めてでも、簡単に取りかかれるよう、最低限必要な内容に絞ってできる限り分かりやすく伝えるようにしています。主に最初の部分ではホームページ作成に関する知識を習得することを目的とし、後半で実際に制作に入ります。 はじめに ホームページ作成に関しての知識が全くない方を対象に、ホームページ制作が初めてでも、簡単に取りかかれるよう、最低限必要な内容に絞ってできる限り分かりやすく伝えるようにしています。 主に最初の部分ではホームページ作成に関する知識を習得することを目的とし、後半で実際に制作に入ります。 ホームページは主に制作ソフトを導入して行う方法と、直接メモ帳などを使ってタグを打ち込んでいく手法の2通りの方法がありますので、それぞれの方法も紹介します。 ピックアップメニュー 必要な
携帯絵文字変換スクリプト(PHP配布) 携帯3キャリア(NTTドコモ,au,ソフトバンク)の共通絵文字を表示するスクリプトです。 従来、絵文字については各キャリア相互に互換性がなく、携帯サイトを制作する際は各キャリアに合わせたページを制作する必要がありましたが、このスクリプトを利用することで、1つのページで3キャリアに対応させたページ作りが可能となります。 プログラム概要 共通絵文字変換表に基づき、ドコモの絵文字を基準に、auとソフトバンク向けの携帯電話に対し、同等の絵文字を表示します。 スクリプトの呼び出しはSSIを利用するため、現在のHTMLをPHPに変換したりする必要はありません。 スクリプトはPHP単体で動作するため、HTML内の絵文字を表示したい部分に一定の記述(SSI)を追加するだけで、絵文字を簡単に表示させることができます。 →サンプル ※サンプル画面にはありませんが、ソフト
次のページ
このページを最初にブックマークしてみませんか?
『HTMLタグボード - HTMLタグ一覧、CSSリファレンスなど』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く