CSSを使ってソースを記述する場合に、ブラウザでは上部に表示されるが、ソースを見ると下に記述されている。ということは可能ですか?

このテクニックについて説明しているサイト、または実際にこのようなテクニックを用いているサイトがありましたら教えてください。宜しくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:--
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答5件)

id:snowland No.1

回答回数168ベストアンサー獲得回数4

ポイント18pt

http://allabout.co.jp/computer/hpcreate/closeup/CU20041115A/

常にメインコンテンツを先に記述できる!? スタイルシートの段組のメリット - [ホームページ作成]All About

こちらのページがまさにそのことについて書いてあります。

id:suzukima

参考にさせていただきます。

ありがとうございます。

2005/11/21 14:50:08
id:kana-kana_ceo No.2

回答回数3ベストアンサー獲得回数0

ポイント18pt

http://www.aboutworks.com/shokodei/diary/doc/Navigation/

ナビゲーションに関する覚え書き

可能です。

上部に表示したい要素を、CSS の position プロパティ等で指定してやればオッケーでしょう。

id:suzukima

参考にさせていただきます。

ありがとうございます。

2005/11/21 14:50:15
id:pycol No.3

回答回数15ベストアンサー獲得回数0

ポイント18pt

可能です。

CSSの「position」を使えば、ブラウザ上で上部、ソースでは下部というのができます。


具体的に記述すると、

<div style=”position:absolute;top:0px;”>

上部に表示させたい文章

</div>

のようになるかと思います。

styleの中の、「position」はdivの中のポジショニングの仕方の記述で、「absolute」と記述することで絶対値でポジションを決めることができます。

「top」は上から、どれくらいの距離かということで、「0px」とあわせて、「上から0ピクセル」を示しています。

他にも細かい記述が必要になることありますが、このようにすることで、記述がソースのどこにあっても、上部に表示することはもちろん好きな場所に表示させることができます。


URLは見つけられなかったので、失礼いたします。

id:suzukima

参考にさせていただきます。

ありがとうございます。

2005/11/21 14:50:26
id:paihu No.4

回答回数31ベストアンサー獲得回数0

ポイント18pt

<html>

<head>

<style type=”text/css”>

<!--

body{

margin-top : 100px;

}


.top{

position : absolute;

top : 0;

-->

</style>

</head>

<body>

本文


本文


本文


本文


本文


本文


本文


本文


本文


本文


本文


本文


本文


本文


本文


<div class=”top”>

上部用テキスト

</div>

</body>

</html>


このような感じでできます.

bodyの

margin-top : 100px;

というところが上部に開くスペースとなりますので

ここを調整すれば任意の広さの領域を作り出せます.

id:suzukima

参考にさせていただきます。

ありがとうございます。

2005/11/21 14:50:32
id:windfall No.5

回答回数10ベストアンサー獲得回数0

ポイント18pt

http://www.htmq.com/style/indexa.shtml

スタイルシートリファレンス(ABC順)

下記のソースを試してみてください。#Cで指定した部分はソースとしては一番下にかかれていますが、実際には一番上に表示されています。自分自身もこのようにしてページを作成しています。


もっと良い方法があるのかもしれませんが、単純に絶対値で縦方向の位置を指定すれば、ソースを一番後ろに書いていてもブラウザ上で上部に表示させることが出来ます。


<!-- 以下、サンプルタグ


<html>

<head>

<title>テスト</title>


<STYLE TYPE=”text/css”>

<!--


#A {

position: absolute;

top: 150px;

width: 200px;

background-color: #333333;

}


#B {

position: absolute;

top: 150px;

right: 220px;

width: 200px;

  background-color: #666666;

}


#C {


top: 10px;

right: 0px;

width: 440px;

background-color: #999999;

}


-->

</STYLE>


</head>


<body>

<div id=”A”>左下</div>


<div id=”B”>右下</div>


<div id=”C”>ページのトップ</div>


</body>


<html>


サンプル、ここまで-->


CSSタグについてはURLを参照

id:suzukima

参考にさせていただきます。

ありがとうございます。

2005/11/21 14:50:44

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません