人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSを使ってソースを記述する場合に、ブラウザでは上部に表示されるが、ソースを見ると下に記述されている。ということは可能ですか?
このテクニックについて説明しているサイト、または実際にこのようなテクニックを用いているサイトがありましたら教えてください。宜しくお願いします。

●質問者: suzukima
●カテゴリ:ウェブ制作
✍キーワード:CSS サイト ソース ブラウザ 記述
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● snowland
●18ポイント

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

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

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

◎質問者からの返答

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

ありがとうございます。


2 ● カナかな団首領
●18ポイント

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

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

可能です。

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

◎質問者からの返答

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

ありがとうございます。


3 ● pycol
●18ポイント

可能です。

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


具体的に記述すると、

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

上部に表示させたい文章

</div>

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

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

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

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


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

◎質問者からの返答

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

ありがとうございます。


4 ● paihu
●18ポイント

<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;

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

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

◎質問者からの返答

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

ありがとうございます。


5 ● windfall
●18ポイント

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を参照

◎質問者からの返答

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

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ