PC上手

パソコンまめ知識リンク集ご利用にあたってお問い合わせ
サイトマップ

Homeデスクトップノートブック周辺機器用語集カスタマイズ


パソコンまめ知識

PC上手トップ > パソコンまめ知識(2005年5月)

このページでは、パソコンに関するマメ知識や気になるモノ等を日記形式でご紹介していきます。


<< 前月のまめ知識へ <2005年5月のまめ知識> 次月のまめ知識へ >>

2005年5月3日(火)

■ホームページ作成講座 第1回 〜誰でも簡単に世界に情報公開〜

インターネットで公開されているホームページは、デザインにこだわらなければ誰でも簡単に作ることが出来ます。インターネットに接続出来る環境なら無料で作成出来るので、試しに作ってみてはどうでしょうか。ホームページの作成に必要なものは以下のものです。

・インターネットに接続されているパソコン
・ホームページを公開する為の場所
・テキストエディタ
ホームページ作成

「パソコン」はPC上手でも紹介されているDELLの一番安いパソコンやMacであればMac miniで十分です。「ホームページを公開する為の場所」は、また後で紹介しますが、一つ紹介しますとYahoo!で無料で場所を提供しています。「テキストエディタ」は、Windowsでは「メモ帳」、Macでは「Simple Text」が標準でパソコンに入っています。これらを使っても良いのですが、もっと便利なものが無料でダウンロード出来るので紹介します。

ソフト名 内容
TeraPad 行番号や画面分割、元に戻す・やり直す、色分け等が出来る高機能テキストエディタ。Windows用
mi ホームページ作成の為の様々な機能が付いている高機能テキストエディタ。Mac用

それではホームページを作ってみましょう。その前にホームページを作成する際には拡張子が見えていないと不便です。ですので作る前に拡張子を表示するようにしてください。

【拡張子の表示の仕方】
適当なフォルダを開いて「ツール」→「フォルダオプション」をクリック。
「表示」タブをクリックして、「登録されている拡張子は表示しない」のチェックをはずしてください。

これで準備は出来ました。それでは以下の文字をテキストエディタで書いてみてください。
またはコピーしても大丈夫です。

<!-- ここから --> <html> <head> <title>Myホームページ</title> </head> <body> ようこそ。私のホームページへ。 </body> </html> <!-- ここまで --> ホームページ作成

[図1] ブラウザでの表示画面

書けたら、「index.html」という名前を付けて保存をしてください。保存したファイルをInternetExploler等のブラウザで開くと、[図1]のように表示されていると思います。このように<body> 〜 </body>で囲まれている部分に公開したい文章等を書いていきます。これがホームページの基本形です。ホームページは先程記述した、HTMLという文書で出来ています。

【解説】

・<html> 〜 </html>
「ここからHTMLが初まり、ここでHTMLが終わります」という意味です。

・<head> 〜 </head>
ヘッダと呼ばれる部分で、<title>等が入ります。

・<title> 〜 </title>
ページのタイトルです。ブラウザのバーのところに表示されます。

・<body> 〜 </body>
本文の部分です。ブラウザのメインのところに表示されます。


上に記述されている< >で囲まれているようなものを「タグ」といいます。このタグを組み合わせることで、ホームページを見やすいようにしたり、色を付けたり画像を表示したりすることが出来るようになります。次回からは、この様々なタグを紹介していきます。



2005年5月8日(日)

■ホームページ作成講座 第2回 〜文字の装飾など〜

前回はホームページの基本形を作りました。今回は「背景」と「文字」に関するタグを使ってページに強弱をつけてみましょう。

内容 ページの背景に色をつける
タグ <body>
構文 <body bgcolor="○○○"> 〜 </body>

※○○○には色の指定が入ります。 (例 #cccccc)

【解説】
ページに関するタグの<body>に「bgcolor」を指定することで、ページの背景に色をつけます。色の指定は、例えば白なら「#ffffff」、黒なら「#000000」です。これは分解すると、「#RGB(赤青緑)」となっています。それぞれの最小値は0で最高値はff(255)で「#0〜ff(255)、0〜ff(255)、0〜ff(255)」です(ffは16進数)。ですので、赤なら「#ff0000」、緑なら「#00ff00」、青なら「#0000ff」となります。色に関しては次のホームページで紹介されていますので、参考にしてみてください。(WEBカラーリファレンス

<!-- ここから --> <html> <head> <title>Myホームページ</title> </head> <body bgcolor="#bbd6ff"> ようこそ。私のホームページへ。 </body> </html> <!-- ここまで --> ページの背景に色をつける

[図2] ブラウザでの表示画面


内容 ページの背景に画像を表示する
タグ <body>
構文 <body background="○○○"> 〜 </body>

※○○○には画像のパスが入ります。 (例 img/back.gif)

【解説】
ページに関するタグの<body>に「background」を指定することで、ページの背景に画像を表示します。画像のパスは、例えば画像を読み込むHTMLと同じ階層に画像がある場合は、そのまま画像名を書きます。「img」というフォルダの中に画像がある場合は、「img/画像名」となります。画像は小さな画像でも繰り返されて表示されるようになっています。

<!-- ここから --> <html> <head> <title>Myホームページ</title> </head> <body background="img/bg.gif"> ようこそ。私のホームページへ。 </body> </html> <!-- ここまで --> ページの背景に画像を表示する

[図3] ブラウザでの表示画面


内容 文字のサイズと色を指定する
タグ <font>
構文 <font size="○○○" color="△△△"> 〜 </font>

※○○○には 1 〜 7 または -7 〜 +7 の数字が入ります。 (例 <font size="3">作成</font>)
※△△△には色の指定が入ります。 (例 #cccccc)

【解説】
文字に関するタグの<font>に「size」を指定することで、文字のサイズを指定出来ます。指定する数字は1(小)〜7(大)までの数字か、-7(小)〜+7(大)までの相対の数字のどちらかです。「color」を指定すると色の指定が出来ます。

<!-- ここから --> <body> <font size="2">サイズは2です。</font><br> <font size="5">サイズは5です。</font><br> <font size="+1">サイズは+1です。</font><br> <font color="#cc0000">色は#cc0000です。</font><br> <font size="+2" color="#006600">サイズは+2で 色は#006600です。</font><br> </body> <!-- ここまで --> サイズは2です。
サイズは5です。
サイズは+1です。
色は#cc0000です。
サイズは+2で色は#006600です。

※ 実際の表示画面


内容 文字を改行する
タグ <br>
構文 <br>

【解説】
文字を改行する際には<br>を書きます。HTMLの方で、ただ改行しただけでは、ブラウザ上では改行されていません。

<!-- ここから --> <body> <font>改行<br>します。</font><br> <br> <font>これでは 改行しません。</font><br> </body> <!-- ここまで --> 改行
します。


これでは 改行しません。


※ 実際の表示画面


内容 文字の書体を指定する
タグ <font>
構文 <font face="○○○">

※○○○には書体名が入ります。 (例 <font face="MS ゴシック">書体指定</font>)

【解説】
文字に関するタグの<font>に「face」を指定することで、文字の書体を指定出来ます。ただし、見ている人のパソコンに入っていないフォントは指定しても無効になりますので、なるべく最初からパソコンに入っているフォントを指定しましょう。下の例ではWindowsでは「Arial」が、Macでは「Helvetica」が最初から入っている為、それぞれ入っている文字で表示されます。

<!-- ここから --> <body> <font size="2" face="Arial, Helvetica"> Windows : Arial<br> Mac : Helvetica</font><br> <br> <font size="2" face="MS 明朝"> Windowsでは明朝体</font><br> </body> <!-- ここまで --> Windows : Arial
Mac : Helvetica


Windowsでは明朝体


※ 実際の表示画面


内容 文字を太字または斜体にする
タグ <b>または<i>
構文 <b> 〜 </b>または<i> 〜 </i>

【解説】
文字を太字する際には<b>、文字を斜体にする際には<i>で囲います。

<!-- ここから --> <body> <b>太字になります。</b><br> <br> <i>斜体になります。</i><br> </body> <!-- ここまで --> 太字になります。

斜体になります。


※ 実際の表示画面


内容 その他の文字の装飾
タグ <sup>、<sub>、<u>、<s>
構文 それぞれ指定する文字を囲います。

【解説】
文字を上付文字にする際には<sup>、文字を下付文字にする際には<sub>、文字に取り消し線を引く際には<u>、文字に下線を引く際には<s>、で囲います。

<!-- ここから --> <body> 上付文字 10<sup>6</sup><br> <br> 下付文字 10<sub>6</sub><br> <br> <u>下線</u><br> <br> <s>取り消し線</s><br> </body> <!-- ここまで --> 上付文字 106

下付文字 106

下線

取り消し線


※ 実際の表示画面


2005年5月24日(火)

■ホームページ作成講座 第3回 〜画像の表示など〜

前回はページの背景色やテキストの指定等を使って、ページにめりはりをつけました。今回は「画像」に関するタグを使ってページに画像を表示させてみましょう。

内容 画像を表示させる
タグ <img>
構文 <img src="○○○">

※○○○には画像のパスが入ります。 (例 img/title.gif)

【解説】
画像に関するタグの<img>に「src」を指定することで、ホームページに画像を表示させることが出来ます。表示させることの出来る画像の種類としては、GIF形式やJPEG形式、PNG形式(古いブラウザでは未対応)等が挙げられます。また、<img>には閉じタグ(</img>)は必要ありません。

<!-- ここから --> <body> <img src="img/photo.jpg"> </body> <!-- ここまで --> 画像を表示させる

※実際に写真を読み込んだもの


内容 画像を表示出来ない場合の代替文字
タグ <img>
構文 <img src="○○○" alt="△△△">

※○○○には画像のパスが入ります。 (例 img/title.gif)
※△△△には画像が表示出来ない場合の表示させたい文字を入れます。

【解説】
画像に関するタグの<img>に「alt」を指定することで、何らかの原因で画像が読み込まれない場合に、代わりに文字を表示させることが出来ます。例えば、ブラウザが画像を読み込んでいる最中に、その場所に何という名前の画像が読み込まれるのかが分かったり、携帯電話のインターネットでパケット代の節約の為に画像を表示されないように設定されている場合などに有効です。

<!-- ここから --> <body> <img src="img/photo.jpg" alt="代わりに表示させたい文字を入れる"> </body> <!-- ここまで --> 代わりに表示させたい文字を入れる

※画像がない場合のテキスト


内容 画像のサイズを指定する
タグ <img>
構文 <img src="○○○" width="△△△" height="◇◇◇">

※○○○には画像のパスが入ります。 (例 img/title.gif)
※△△△には画像の横幅が入ります。
※◇◇◇には画像の縦幅が入ります。

【解説】
画像に関するタグの<img>に「width」や「height」を指定することで、画像の縦幅や横幅を指定することが出来ます。画像のサイズを変更することも出来ますが、画像が荒れてしまう為あまりおすすめは出来ません。きちんとした画像のサイズを入れることで、ブラウザが画像の領域を確保でき、ブラウザの表示速度が微妙ですが早くなると言われています。

<!-- ここから --> <body> <img src="img/photo.jpg" width="200" height="163"> </body> <!-- ここまで --> 画像のサイズを指定する

※上の画像を縮小


内容 画像のまわりにテキストを回りこませる
タグ <img>
構文 <img src="○○○" align="△△△">

※○○○には画像のパスが入ります。 (例 img/title.gif)
※△△△には位置が入ります。 (例 <img src="img/photo.jpg" align="left">)

(位置の部分に入るもの)
left 画像は左、文章は右に配置
right 画像は右、文章は左に配置
top 画像の上辺と文字の上を合わせる
middle 画像の上下中央と文字の中央を合わせる
bottom 画像の下辺と文字の下を合わせる

【解説】
画像に関するタグの<img>に「align」を指定することで、画像のまわりにテキストを回りこませることが出来ます。雑誌などの紙面のような画像の配置が出来ます。

<!-- ここから --> <body> <img src="img/photo.jpg" align="left"> <font class="f12" color="#333333">画像 に関するタグの&lt;img&gt;に「align」を 指定することで、画像のまわりにテキスト を回りこませることが出来ます。雑誌など の紙面のような画像の配置が出来ます。</font> </body> <!-- ここまで --> 画像のまわりにテキストを回りこませる画像に関するタグの<img>に「align」を指定することで、画像のまわりにテキストを回りこませることが出来ます。雑誌などの紙面のような画像の配置が出来ます。

<< 前月のまめ知識へ <2005年5月のまめ知識> 次月のまめ知識へ >>

サイト内検索



検索方法ヘルプ


文字の大きさ



まめ知識INDEX

パソコンまめ知識カテゴリ別一覧

2012年1月〜12月

情報ウィンドウを角丸に New
〜Google Maps API v3〜

ファイルの復元ソフト「Recuva」
〜フリーソフトなのに優秀〜

パソコン用メガネ
〜ブルーライトから目を守る〜

気軽に購入出来るAndroid端末
〜格安のAndroid端末のご紹介〜

かざぐるマウス
〜マウスをパワーアップ〜

2011年1月〜12月

Glary Utilities
〜パソコンメンテナンスツール〜

おすすめアプリ紹介
〜スマートフォンを活用〜

コンピュータグラス
〜目の疲れを軽減する〜

2010年4月〜12月

Windows7の高速化 vol.1
〜不要な効果をなくす〜

みんなで買ってお得に利用
〜クーポン共同購入〜

複数のメールを一箇所で管理
〜Gmailの活用〜

拡張子を表示する
〜ファイルの種類を確認する〜

2010年1月〜3月

Windows 7 機能一覧
〜知ってると便利な機能〜

ワンセグを閲覧する
〜パソコンで気軽にテレビを視聴〜

2009年10月〜12月

郵便年賀.jp
〜オンラインで年賀状作成〜

Office Live Workspace
〜オンラインでOffice〜

2009年7月〜9月

Security Essentials
〜無償ウイルス対策ソフト〜

Windows 7
〜Windowsの次世代OS〜

2009年4月〜6月

FLVファイルの再生
〜FLVP〜

YouTube等の動画のダウンロード・保存
〜Craving Explorer〜

Internet Explorer 8
〜高速化された最新版〜

2009年1月〜3月

IEの過去のバージョンで検証
〜Multiple IE〜

リアルタイムにHTML検証ツール
〜Firebug〜

ブログを設置する
〜システムの紹介〜

オンラインでウィルスチェック
〜VirusChief〜

2008年10月〜12月

パソコンを開けずにメモリを確認
〜メモリの増設等に重宝〜

パソコンのデータを完全消去
〜個人情報の保護〜

ケイサンワンコ
〜計算ゲームの紹介〜

2008年7月〜9月

IE6とIE7を共存させる
〜IE7 Standalone〜

WindowsでMacの圧縮形式を解凍
〜Aladdin Expander〜

悪意のあるソフトウェアの削除ツール
〜特定のウィルスを削除〜

2008年4月〜6月

逆順印刷、部単位で印刷
〜プリンターの印刷方法〜

単語登録、辞書ツールの活用
〜入力の手間を省く〜

読み方の分からない漢字を表示
〜言語バーの活用〜

2008年1月〜3月

ロリポップ
〜月額263円のレンタルサーバー〜

Windows Live スペース
〜無料のオンラインストレージサービス〜

Windows Live メッセンジャー
〜無料のコミュニケーションツール〜

タイピングピヨチ
〜タイピングゲームの紹介〜


それ以前のまめ知識
(パソコンまめ知識カテゴリ別一覧)

PC上手トップ  |  デスクトップ  |  ノートブック  |  周辺機器  |  用語集  |  カスタマイズ  |  パソコンまめ知識  |  パソコン購入ガイド


ページのTOPへ戻る

Copyright (C) 2004-2018 PC-JOZU. All Rights Reserved.