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

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

RSS


メルマガの登録・解除

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



HTMLの基礎 Vol.61 FAQ「スタイルシートでの背景画像の設定」

発行日:8/26

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

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

      2005/08/26(Fri) Vol.61       執筆:ykr
              http://ykr.main.jp/html/index.html

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

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

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

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


  ようやく休みも終わり、通常のペースを取り戻された方も多いのではな
  いのでしょうか?といっても私は休みが無かったのですが、周りが休ん
  でいるときに自分だけが働いているというのは、なんとも微妙です。

  今回もお便りを頂いたのですが、基本的な質問・又スタイルシートにつ
  いての質問もあったため、その中から選んで紹介する事にします。

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


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

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


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


  今回解説するのは以下のものです。読まなくてもわかっているという方
  もいると思うのですが、割と多い質問です。


   ▼ 背景画像の表示の設定方法(スタイルシート)


  HTMLだけを使用してできる事というのは限られている為、やはりス
  タイルシートを使用して行う表現方法についての質問が非常に多いです。


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


1.背景画像の表示の設定方法(スタイルシート)

  背景に画像を指定して背景画像を表示させる為の設定ですが、通常HT
  MLでの指定方法は以下のようになります。


 ■画像「haikei.jpg」を背景画像に指定したい

  <body background="haikei.jpg">

  このように記述すれば背景に、「haikei.jpg」を表示させる事が可能と
  なります。しかし、この指定方法だけだと、背景画像がウィンドウより
  も小さかった場合、背景一杯に敷き詰められて表示される事になるため、
  場合によっては非常にみにくいページになってしまうこともあります。

  そこで、背景画像を背景に1点だけ表示させたい、背景画像を表示する
  位置を指定するにはどうすれば良いのか、という事になってきます。
  勿論これにはスタイルシート(カスケーディングスタイルシート)を使
  用します。


  スタイルシートの設定方法にはいくつかあり、ページごとに設定するも
  の、また外部のファイルとして作成し、ページに読み込むもの、そして
  個別のタグに設定するものがあります。

  用途や適用範囲によって使い分けるのが良いのですが、余り多くを説明
  するとややこしくなるので、ここではページごとに設定する方法「
  head内にスタイルシートを記述する方法」での説明を行います。

  以下をご覧下さい。


  <head>
  ・
  ・ここにはメタ情報等を書き込む
  ・
  <style type="text/css">
  <!--
  body{background-image:url('haikei.jpg');
  background-repeat:no-repeat;
  background-position:0% 0%}
  -->
  </style>
  </head>


  とりあえず余計な物は省略してスタイルシートの部分だけ記述しました。
  上記のソースでは、bodyに対して背景画像の設定等を指定しています。
  一つずつ見ていくことにします。


  ▼background-image:url('haikei.jpg');

   背景画像を指定します。url('この部分に')背景画像のパスを記述します。
   この場合だと表示させたいファイルと同じフォルダ内に画像があることに
   なります。

  ▼background-repeat:no-repeat;

   背景画像の繰り返し方法を指定します。「background-repeat:」の後に、
   どのように繰り返しするのかを指定する値を記述するのですが、例のよ
   うな記述だと、「no-repeat 繰り返しなし」という事になり、背景画像
   が1点だけ表示されるようになります。他には以下のような指定方法
   があります。

   ・repeat-y  縦方向にのみ敷き詰めて表示
   ・repeat-x  横方向にのみ敷き詰めて表示
   ・repeat   画面いっぱいに敷き詰めて表示(通常)

   値が repeat の場合は、このスタイルシートを指定する必要はありま
   せん。


  ▼background-position:0% 0%

  背景画像を表示させる位置を指定します。「background-position:」の後
  に指定する位置の値を記述します。例のような指定方法だと、ウィンドウ
  の左上に表示されます。「0% 0%」というのは左から0パーセント、上か
  ら0パーセントの位置を指定、ということになります。他の単位での指定
  方法もあるのですが、ここでは割愛します。

  ちなみにbackground-positionで背景画像を1点だけ指定した位置に表示さ
  せるためには、同時に「background-repeat:no-repeat」も指定するよう
  にして下さい。


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


  最近ではこのようなスタイルシートを使用したページをよく見かけますが、
  意外と設定の仕方がわからないという方も多いようです。

  なんだか、「スタイルシートの基礎」のような感じになってきましたが、
  どちらにせよ最近では、これら(HTMLとCSS)は組み合わせて使用
  する事が当然になってきているので、覚えておいて損は無いと思います。


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


来週は・・・

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

    1.FAQ

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

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


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


  今回も最後まで付き合ってくださった方、お疲れ様でした。
  する事を思いつかないというところから、とりあえずこのような内容にな
  ってしまっているのですが、疑問に思っていること・わからない事に対し
  て答える、というやり方は効率が良いように感じます。

  あと、以前質問頂いた中に、「掲示板などは設置しないのですか?」とい
  うものがありました。一時期考えた事もあったのですが、掲示板を設置す
  ると多少管理が必要になってきます。多分今の自分では、そこまで手がま
  わらないので、今のところは考えていないとお答えしました。

  もう少し時間があればやりたいことが山ほどあるのですが、少しずつ消化
  させていくしかありません。
  さて来週ですが、再度お便りを募集します。質問以外にも「この説明をし
  て欲しい・・」などのご要望がございましたらお便り下さい。但し、HT
  MLに関する事でお願い致します。(いつもお便りしてくださる方どうも
  ありがとうございます。)

  というわけで、次回のメルマガもどうぞ宜しくお願いいたします。


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

■■■「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/06/22
    読者数:
    1131人

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

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

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

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

発行者プロフィール

過去の発行記事