サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
www.d3.dion.ne.jp/~tiyoko01
pre 要素とは? pre 要素は、整形済みテキスト( preformatted text )であることをブラウザに解釈させるタグです。ホームページをタグを使って作成する場合は、それぞれ役割のあるタグをマークアップをしてHTML文書(ソース)を作成します。その過程で、文章を読みやすくするために、文字と文字の間にキーボードからスペースキーを押して出来る半角スペースを入れたりしますが、幾度押しても半角スペースは一つしかブラウザに表示されません。(日本語環境での全角スペースは押した分スペースを空けることができます。)タブキーも同じです。また、ソース上に改行を幾ら挿入してもブラウザに表示されることはありません。Web ページ(ホームページ)に改行を表示するためには、 br を使ったり、行間を空けるためにスタイルシートなどで随時指定しなければいけません。それらの動作をしなくても pre 要素は、連続
重ね合わせの順序を指定しよう z-index 複数の要素が重なり合った時に、この重なる順序を指定します。 position (relative, absolute) で配置を指定し、z-index で重ね順を整数値で指定します。 数値が大きくなるほど手前に表示されます。 画面表示 左側は配置順を指定していません。右側は z-index: 1〜3を指定しています。黄色い花の画像を3に指定しているので一番手前に表示されています。 スタイルで配置方法を指定 <style type="text/css"> <!-- div { position:absolute; } .a { top:260px; left:50px; } .b { top:280px; left:150px; } .c { top:330px; left:200px; } .d { top:260px; left
ホームページができました。次にすることは、ホームページを FTP で転送(アップロード)することです。 初めての方はここで、??と思われるのではないでしょうか。何かすごく難しいそうな感じがしますね。ホームページを作成するのに使った全ファイルを、WWWサーバーに転送するのが最後の作業になります。ファイルを「アップロードする」といいます。 これをクリアしなければ、インターネット上であなたのホームページを見ることができません。プロバイダでのアップロードについて、説明します。もう少し頑張りましょう!! アップロードの手順 ホームページスペースを手に入れる FTPソフトを入手してPCにインストールする FTPソフトを設定する ファイルをWWWサーバーにアップロードする ブラウザで表示確認する となります。 1.ホームページスペースを手に入れる 自分のパソコン(ローカル)で作成したホームページ
トップページのファイル名は index.html です ホームページ(HP)が出来上がりました。多くなったファイルも整理しやすいように数個のフォルダに分けてあります。ファイル名、フォルダ名も任意で分かりやすい名前を付けました。さぁー契約しているブロバイダーの自分用のホームページスペースのあるWeb サーバーに全てのファイルを転送する最後の作業です。そのときに気をつけることがあります。それは、ホームページの顔ともいわれるTOPページであるHTMLのファイル名です。HPのTOPのページのファイル名が最初から決まっていて、ファイル名を一般に「index.html」にするということです。自分のPC上で一番最初に表示されるTOPページのファイル名が「myhome.html」だったとすると「index.html」に変更します。 「myhome.html」のアイコンを右クリックし「名前の変更」から i
ページの作り始めは HTMLファイルやイメージファイルなどの数も少なくファイルの収納は1つのフォルダでも困りませんが、 ページが増えてくると、1つのフォルダ内にいろいろなファイルが散らばってどれがどれだが分からなくなります。ファイルを手直したり、イメージを差し替える時たくさんのファイルから一つ一つ確かめないと作業はできなくなり、効率が非常に悪くなります。そこでファイルの整理が必要になります。新しいフォルダを作ってその中に関係するファイルを一まとめに収めます。フォルダの中にサブフォルダを作りサブフォルダの中にまたフォルダ・・・とフォルダ名も入っている内容に合う名前を付け、自分がわかりやすいように整理します。ファイルのフォルダ分けをするとファイルの位置が変わります。そこで階層という考え方が必要になります。 ファイルの位置を指定するのには、二種類の方法があります。 相対的パス ファイルどうしの
超初心者でも大丈夫 入力フォームを作ってみよう HTMLにはフォームという仕組みが用意されています。フォームと送信ボタンをホームページに設置すると、ページをみる人がすぐにサーバーに情報を送り返すことができます。それを実現させるために、フォームタグを使って入力欄、ボタンを作ります。 <form> 〜 </form> フォームの機能を使うさまざまなタグは、全てこの中に記述します。簡単な指定でテキスト入力欄や送信ボタン、取り消しボタン、ブルダウンメニューなどがページに設置できます。 ■フォームを作りたい(基本) フォームを使ったサンプル シンプルなメールフォーム 入力欄の枠線に色を付けたメールフォーム 枠線と入力欄の背景に違う色を付けたメールフォーム シンプルなメールフォーム(色付き) 画像を背景に配置したメールフォーム テーブルの中に壁紙を付けたメールフォーム カラフルなメールフォーム テー
リンク先ページのウィンドウの指定 <a href="リンク先のURL" target="〇"> 〇は、リンク先のページをどのウィンドウに表示するかを指定します。次の指定ができます。 _blank 今表示されているページをそのまま存在させて、新たな同じ大きさのウィンドウにリンク先ページを表示します。リンクをクリックする毎にウィンドウが増えます。 _self 今表示されているウィンドウにリンク先のページを表示します。通常 target を指定しない場合と同じです。1つのウィンドウ内でページが切り替わります。 _top フレームを使っている場合は、フレームを解除してウィンドウ全体にページを表示します。フレームを使っていない場合は _self と同じ今のウィンドウ内に表示します。 _parent リンク先をリンク元の親フレームに表示します。フレーム分けした部分をまたフレーム分けした場合(階
画像(IMG)の altの役割 ページに画像を使って作成している方が多いと思います。 本当に知りたい情報だけが必要な場合は文章だけで構成されたページはその目的を果たしますが、画像と文章が適宜配置されているほうが気分的にも視覚的にも楽しいものです。また、画像を表示することでそのページの印象度や表現力の度合いが高まります。 ページに画像を表示させるには、表示させたい場所に <img src="画像ファイル名" width="画像の幅" height="画像の高さ" alt="代替テキスト"> と指定するだけです。 width="画像の幅" height="画像の高さ"の指定をしておけば、画像よりも文字のほうが早く表示されるので画像容量の大きい場合は、真っ白な画面のまま画像が表示されるのを待つこともなく快適に閲覧できます。また、画像が表示されない場合でもブラウザは画像の幅、高さスペースを確保し表
透過gif 画像を使って自由にスペースを作ろう 文章の始まりや、文字列の位置、画像の位置などページを作成中どうしてもスペース(空間)が欲しい場合があります。強制改行である br を連続して使うと上下にスペースを得ることができますが、HTMLの正しい書き方ではありません。スタイル・シート(CSS)を使うと好きな長さの空間を簡単に指定できますが、まだそのレベルに進んでいない場合(CSSは古いブラウザや各ブラウザによって等しくサポートされているわけではないので表示の仕方が違う場合もでてきます。) 透過gifの画像を使うと思う通りのスペースを作ることができます。ページのレイアウトを整えるテクニックの1つとして利用しましょう。 透過gif画像(スペーサーgif)というのは、最小単位1×1ピクセルのとっても小さい透明な画像です。 ページに貼っても表示されません。本来画像は元の画像の大きさとは関係なく横
※画像形式を「.png」を使っている箇所があります。この形式はIE4以降で対応しております。 誠に申し訳ありませんm(__)m パソコンを使い始めた頃の分からなかったこと等を取り上げました 目次
7.同じページにある各リンクに違ったスタイルを指定しよう リンク部分にスタイルを適用する場合 a:link、a:visited、a:hover、a:active とそれぞれの状態にスタイルを記述し、ページ全体のリンクに適用することができますが、スタイルの適用先をクラスに指定することで、ページにあるそれぞれのリンクに違ったスタイルを適用することができます。 a { text-decoration:none; } のようにリンクの状態での指定ではなく、 a で指定する通常のスタイルで指定するとリンクの全てに下線を付けないことになります。 a:link 、 a:visited、 a:hover や a:acitive ではリンクの状態によって個別にスタイルを指定することができます。 このページ全体のリンクは下線なし、文字色は青でテキストの上にマウスを乗せると文字色は濃いピンク、背景色は灰色に指定
■小さい画像を複数並べてクリックでサイズの大きい画像を表示しよう 小さい画像(サムネイル)を複数並べて、各画像をクリック すると、その下に作った額に大きいサイズの画像を表示します。ページスペースが取られますが、複数ある画像の場合はすぐその場で大きなサイズの画像を見れ、閉じるボタンを押す手間も要らないのでいいのではと思います。 <html> <head> <title></title> <script type="text/javascript"> <!-- function Imgche(ado) { document.space.src=ado; } // --> </script> </head> <body> <center> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img
インラインフレームは、たびたび 更新される情報(更新記録や季節の挨拶など)を表示するホームページのトップ画面によく 使われます。小さなスペースの中に多くの情報を表示することができます。トップページとは別ファイルなので、別ファイルを更新するだけで済みます。 <iframe>〜</iframe>の間には、インラインフレームに非対応のブラウザに対して別のページへ案内するメッセージと別ページへのリンクを記述します。このメッセージはフレームに対応しているブラウザでは表示されません。 ▼ ページ内に更新情報のインラインフレームを作る 例:1 インフレームを使っています。未対応のブラウザをお使いの方は <a href="kousin.html">更新情報</a>からどうぞ。 <iframe src="kosin.html" name="in" width="350" height="100" scr
見出しを枠線で装飾しよう ホームページは、見出しが正しく記述されていると訪問者にとって快適に閲覧することができます。見出しを見てどんな内容が記述されているのか、だいたい検討がつきます。見出しを定義するタグには<h1>〜<h6>があります。このタグに囲まれた部分は太字で、前後に空白が作られます。<h1>は一番上位の大きな見出しでページ内のタイトルを指定するのが一般的です。数字が大きくなるとレベルも下がります。 正しく見出しを記述しておけば検索エンジンにもとても有効になります。このページでは、HTMLだけでは表現できないいろいろな装飾をスタイルシートを使って<h1>に取り入れ、アクセントのある見出しを作ります。 スタイルシートでのボックスについて スタイルシートで h1 に装飾を指定する前に、スタイルシートでのボックス(箱)について知っていると分かりやすいと思います。今回は下の図にある青い枠線
Windows標準に付いている「メモ帳」、「ペイント」、Officeに付いている「Photo Editor」 Office2003に付いている「Picture Manager」を使ってホームページを作ります。 『作ってみたいけど、発信する情報も無いし、難しそうで私にきっと無理』と思っている方いませんか?ほどんとのプロバイダーには無料、もしくは僅かな登録料であなたのホームページスペースが提供されています。写真数枚とコメントだけでも自分のページです。世界に向かって発信するのではなく、まずは友達や親戚に発信してもいいのでは!! 自分のホームページを持つ楽しみのきっかけになればと思います。ホームページに対する疑問は、右のメニュー「Contents」の「HP知っ得コーナー」で解決するかな?? 08.07.24 サイト休止のお知らせ NHKの語学講座「リトル・チャロ」(私のデジタルなお話) につ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ・ ・ </html> 赤い文字列がDOCTYPE宣言の一例です。DOCTYPE宣言とは、文書がHTMLであり次にはじまるHTML文書(HTMLソース)がどのバージョンを利用して、どのDTD(文書型定義)に従って記述されているかを文頭に宣言することです。 この場合はHTML 4.01 バージョンを利用して、DTDの中のTransitionalに従って記述する宣言になります。 DTDでは、どのような要素や属性※1が使えるのか、あらかじめ定義されていて、、 その定義された要素や属性使ってHTML文書を作成します。バージョンが違えば利用できる要素や属性などが異なります。 ブラウザはまずこれを読んで(解釈し)宣言に従って表示するようになっています。 ※
<body> </body> </html> ------------------------------------------------------------ 上記の赤い部分のソースを<head>〜</head>の中に記述し、color の色を変えて自分の好きな色のスクロールバーにすることができます。 <meta http-equiv="Content-Style-Type" content="text/css"> はスタイルシートを使っていますとブラウザ等に知らせるために記述します。 スクロールバーを一色で指定しましたが、個別に指定することもできます。 scrollbar-xxx-color: scrollbarに色を指定したい部分を track、face、arrow、shadow、darkshadow、highlight、3dlight などのキーワードで指定しま
ハードディスク(HD)は1つなのに、「マイコンピュータ」を開いた時に「Cドライブ」「Dドライブ」があります。 1つのハードディスクの領域を幾つかに区切ることができ、それぞれにドライブを割り当てることができることができるので、複数のHDがあるかのように見えます。これを、"パーティションを切る"といいます。 ふつう作成したファイルや新しいソフトのデータはCドライブに保存されます。 永くパソコンを使っているとCドライブの空き容量が無くなってきます。パソコンの動作などに不都合が生じます。こんなときは、 空きになっている「Dドライブ」を有効活用しましょう。 活用方法はどのようにすればいいのでしょうか? パソコン購入時に二つのドライブに分割されているいる場合、CドライブにWindowsとアプリケーションがセットアップされ、Dドライブが空きになっています。 大切なのは、自分が作成したデータです。Win
写真をクリックしてください。クリックする毎に画像が変わります。 ページの場所を取らないで、いいのでは♪ <html> <head> <title></title> <script type="text/javascript"> <!-- num = 0; function change() { num++; num %= 4; document.chPto.src = "type"+num+".jpg"; } // --> </script> </head> <body> <a href="javaScript:change()"> <img src="type0.jpg" name="chPto" border="0"> </a> </body> </html> ※オレンジ内のソースをコピーして、使ってください。head 部分に入れるものと、bo
超初心者でも大丈夫 JavaScriptを使ってみよう HTMLにプラスする機能として、動きをつけるのが、JavaScriptです。現在のWebページ作成に欠かせないものになっています。Webサーフィンをしていると、背景に雪が降っていたり、時計が動いていたり、文字がいろいろ変化したりと、楽しいページを見かけます。また、画面上でクリックするとそれに反応してメッセージを表示したり、入力フォームで入力し、ボタンをクリックすると、それによって何らかの処理がなされるようなページもあります。それらの多くは、JavaScriptを使っています。ブラウザに拡張する機能を追加することなく、特別なソフトを使う必要もなく今まで通り、メモ帳でHTMLファイルの中に直接JavaScriptを記述するだけです。 JavaScriptを宣言すれば、ブラウザが<script>タグと認識し実行してくれます。 HTMLでペ
超初心者でも大丈夫 スタイルシートを使ってみよう HTML(各主要要素=タグ) をある程度使えるようになってくるとスタイルシートは理解ができると思います。 ページに使った背景画像や写真を自由に好きな所に配置することや、テキスト (文字列) の文頭の位置、余白など変えたい時ありませんか?スタイルシートを使えば、できるようになります。 HTMLはもともと文書の構造を表すために考えられた仕組みですが、 スタイルシートは、HTMLのタグにプラスして指定し、HTMLでは不可能だった細かいコントロールや表現 (文字、色、背景、枠線、表示位置、余白など) を可能にし、レイアウトに凝ったページを作成することができます。 デザインの表現をHTMLから分離したものがスタイルシートです。 HTMLだけでは、ページのデザインをコントロールする自由な調整はあまりできません。インターネット上には素敵にレイアウトされた
■ Picture Manager の使い方 ■ Picture Manager は Office 2003 に標準付属しているソフトの中の一つで画像の管理、編集、共有(office、メールソフトなど)を行うことができます。このページでは、Picture Manager を使って、ホームページ作成に役立つ画像編集について記述したいと思います。 「デジカメで撮った写真をホームページに載せたいけれど、容量が大きすぎるので小さくしたい!、見栄え良くしたい!でも、PC 内に適当な画像編集ソフトがない・・。」と思われる方は、手元にあるPicture Manager を使って画像の編集をしましょう。 01.Picture Manager の起動 02.Picture Manager の既定画面 03.写真のサイズを小さくしよう 04.トリミングをしよう 05.明るさとコントラストを調整しよう 06.
このページを最初にブックマークしてみませんか?
『www.d3.dion.ne.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く