トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



HTMLの基礎 Vol.62 HTML・スタイルシートに関するFAQ 2

発行日:9/2

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/09/02(Fri) Vol.62       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.HTML・スタイルシートに関するFAQ 2

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  あっという間に時間がたってしまい、もう9月です。学生の頃は学校へ
  行く事が好きだったので、9月もそれほど嫌では無かったな・・なんて
  思い出します。

  さて、先週に引き続き、今回も質問のメールへの回答を行おうと思うの
  ですが、今回の質問は殆どが基礎的な事でしたので、中からいくつか順
  番に説明していきます。

  それでは今回も最後までどうぞ宜しくお付き合いお願い致します。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。

       ここで言う「スタイルシート」とはCSS(カスケーディン
       グスタイルシート)の事を指しています。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  今回解説するのは以下のものです。読まなくてもわかっているという方
  もいると思うので、そういう方は飛ばして下さい。


   1.リンクの下線を消したい
   2.フレームの境界線を動かなくする事はできませんか?
   3.テーブルのセル内の文字位置の指定


  以上の3点の説明をします。簡単なものなので多分すぐに終わると思い
  ます。


----------------------------------------------------------------------


1.リンクの下線を消したい


  リンクの下線を消すには、スタイルシートを使用します。
  以下のスタイルに関する設定を、<head>〜</head>内に記述する事により
  リンクの下線を消す事ができます。

  a{text-decoration:none}

  このプロパティはテキストの装飾に関する設定です。
  上記のプロパティの値「none」は装飾なしという意味です。値には他に
  以下のようなものがあります。

  underline    下線
  overline    上線
  line-through  取り消し線

  「blink」という値もあるのですが(点滅)対応していないブラウザが
  多いので余り指定しても意味がないと思います。


----------------------------------------------------------------------


2.フレームの境界線を動かなくする事はできませんか?


  できます。フレーム領域などを設定するページの<frame>内に、
  「noresize」属性を設定する事で、領域の境界線を動かなくする事が可能
  です。

  <frameset cols="20%,80%">
  <frame src="sample.html" noresize>
  <frame src="sample2.html" noresize>
  </frameset>


----------------------------------------------------------------------


3.テーブルのセル内の文字位置の指定


  お便りから抜粋します。

> <TABLE width="200"height="100" >
> <TR>
> <TD>
> 文字の挿入
> </TD>
> </TR>
> </TABLE>
>
> tableサイズを指定した場合文字は必ずど真ん中にきてしまいます。
> そうでなくtebleサイズはそのままで文字がちゃんと一列目から表示され
> る方法はありますか?


  この場合、テーブルに高さを指定している為、セル内の文字は中央に表示
  されてしまうということですね。それをセルの上揃えで表示させたい、
  という事ですが、HTMLならば以下のように指定します。

  <td valign="top">

  valingとはセル中の文字の縦位置を指定する属性です。値には

  top    上側
  middle  中央
  bottom  下側

  を指定する事ができ、ここではtopを指定しています。
  これでセルの上部に配置させる事が可能となるでしょう。


  ただ、余談ですが、テーブルに設定する「height(高さの設定)」は特定
  のブラウザの独自拡張の属性である為、余り頻繁に使用しないほうが良い
  のではないかと思います。セル内に何もない場合、高さの指定は無視され
  るためにテーブルが潰れて表示されるブラウザもあるのだということを、
  頭に留めて置いて下さい。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.簡単なjavascriptを使用する

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。

  最近ずっと忙しくしていたため、友人にも親にもあまり連絡をとらず、
  一応頭の隅で気にしながらもそのままになっていました。で、やはり
  最近その事を指摘されてしまいました。(友人にも親にも)
  確かにオーバーワーク気味だと思います。嫌ではないのですが・・
  でも近いうち遊びに行きたいです。

  最近「HTML簡易タグ生成ツール」という非常に使い勝手の悪い物を
  アップしました。打つのも量が多くなると非常に疲れますし、非効率的
  だという事で、かなり前に自分の為に作り、ローカル上で時々使用して
  いました。で、なんとなく思い立ってウェブへ上げたのですが・・

  http://ykr414.com/htmlcode/htmlcode.shtml

  非常に見づらいのと自分がよく使用するパターンのソースしか作成して
  いなかった為、今少しづつ打ち直しています。最終的には全てのタグを
  ボタンを押せば自動コピーできるようにします。(簡単な事なのですが
  時間がなく手がつけられません)手打ちでやっており、ソフトを使用し
  ない方なら、ある程度の作業短縮になるのでは・・と思うのと、タグの
  使用法を最低限わかっている方なら、中には便利だといってくれる方も
  一人くらいいるかもしれない・・なんて思ってあげたのですが、
  もしかしたら打ち直す時間がないかもしれないので、消してしまうかも
  しれません。まだ存在しているうちに一度覗いてみて下さい。

  というわけで、次は非常に簡単なjavascriptについて触れてみます。
  次回のメルマガもどうぞ宜しくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・MAKERS     http://ykr414.net/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。

・YKR GALLERY   http://ykr414.com/gallery/
         CG、また実際に描いた絵を紹介するギャラリー。
         趣味で運営の為かなり更新が遅め。
         ・・・というか時間がなくて全く更新してません(汗)


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther    YKR
  Mail     ykr414@yahoo.co.jp
  URL      http://ykr.main.jp/html/index.html
         http://ykr414.com/
  Copyright   (C)2004 ykr414. All rights reserved.
  Attention   掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

規約に同意してこのメルマガに登録/解除する

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。
コメントの投稿時は投稿者規約への同意が必要です。

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4068人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4680人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4880人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/05/25
    読者数:
    1130人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2017/03/04
    読者数:
    972人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事