詳しい人求む！

このようなcssの作り方を教えてください

解決済

質問者：くぅの
質問日時：2016/11/06 12:58
回答数：4件

はじめましてこんにちは！
css初心者なのですが、下の写真のように常にサーバー上画面に固定して表示できるように設定することは出来ますか？できるのであれば教えていただけると助かります。

あともう一つ、ページを一気に１番上まで戻せるようにページの端に常に矢印アイコンを表示させたいのですが、わかるかたいらっしゃいましたら教えていただけると助かります。

よろしくお願いしますm(*_ _)m
自分のサイトをデザインして作ろうと思っているのですが…先駆者の方のお力を貸していただけると嬉しいです(>_<;)

ありがとうございます！！
写真追加しておきましたm(*_ _)m
この上のようなものが設置したくて^^;

補足日時：2016/11/06 22:37
通報する
このようなかんじ(伏せ)になりました！

補足日時：2016/11/08 06:39
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2016/11/08 09:20

＞最後にひとつだけ、ケータイサイズとWebサイズをかえる方法だけ分からなくて^^;

もしよろしければまたお願いしたいですm(*_ _)m

　前提として、素のHTMLにデザインのためのマークアップがされていない。
構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　ができていることが前提です。

先の私のサンプルは携帯電話（ガラケー）では、まったくデザインのない状態で表示されるはずです。なぜなら、携帯電話のmediaタイプは、handheldやttyだからです。
<style media="screen">
別途
<style media="handheld">
で、携帯用のスタイルを指定すればよい。

実際には共通なものは
<style media="screen,handheld,tv">
とかにして、異なるものだけ指定してもよいし
上書きしてもよい

またスマホは、PCと同じscreenですから、
mediaquery
という、CSS3から登場した拡張を使います。
mediaquery - Google 検索( https://www.google.co.jp/search?q=mediaquery&ie= … )

- 1
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2016/11/07 13:49

なら、先のスタイルシートの最後のほうが、その方法になります。

そのまえに、No.1、No.2のHTML/CSSを指示通り書いて動作させて、その仕組みをきちんと理解してください。
　特にセレクタの書き方、カスケーディングの仕組みといった基礎部分。
5 セレクター
6 プロパティ値とカスケーディング、継承の割り当て
　( https://momdo.github.io/css2/Overview.html#minitoc )
プロパティより先に説明がある、CSSを扱う上での基本ですから。

5.8 属性セレクター( https://momdo.github.io/css2/selector.html#attri … )
　をつかって、そのリンクを指定し、プロパティを書く。
プロパティは
text-indent:
overflow:
background-image:
position:
bottom:
right:
width:
height:
の七つを指定すればよいだけです。

- 2
- 件

通報する

この回答へのお礼

ありがとう

ありがとうございますm(*_ _)m
ｎａｎｏというサイトで初心者からスタートでしたが、上手くできました！！

少しだけレイアウトを変えましたが、教えていただけて本当に助かりました！
ありがとうございますm(*_ _)m

最後にひとつだけ、ケータイサイズとWebサイズをかえる方法だけ分からなくて^^;
もしよろしければまたお願いしたいですm(*_ _)m

通報する

お礼日時：2016/11/08 06:24

No.2

回答者： ORUKA1951
回答日時：2016/11/06 19:14

このようなHTMLがあったとして、その文書構造を見てスタイルを適用したい要素（タグでかまれたもの）をセレクタ（選択手）で指定してデザインしていきます。

いったんメモ帳などにコピーして、＿をタブに置換した後、一ブロックずつ書き足してごらんなさい。
一ブロックとは、
セレクタ{
　プロパティの指定
}
のこと

すなわち
最初に
<style media="screen">

</style>

次いで
<style media="screen">

</style>

さらに
<style media="screen">

</style>

というふうに、書き加えていくとスタイルシートの仕組みがわかるでしょう。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから

<style media="screen">

</style>

- 1
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2016/11/06 16:55

写真がありませんが、言われたいことはおおむねわかる。

問題点が一つ・・・
＞常にサーバー上画面に固定して表示
　サーバーとは、いろいろなサービスを行う人･モノ・ぷグラム
コーヒーサーバーとか、HTTPサーバーとか。　

　たぶん言いたいのは、ヘージのトップに固定ということ

　この場合、問題になるのは、ヘージ内リンクをしたときに、その部分が隠れてしまうという大きな問題がありますので、通常は使われことはない。・・とても不便になります。
　左右いずれかのスペース、あるいはヘージ最下段がおすすめです。
　最上部にするときは、ヘージ内リンクに対して手の込んだ細工をしないとならないです。

　CSSに挑戦されるとのことですので、ご存知だと思いますが、プレゼンテーション（表現）をCSSに任せる場合は、HTMLには文書構造だけを記述します。プレゼンテーションにかかわることは一切書かない。そのためのCSSの導入ですからね。

【重要】
構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

＞できるのであれば教えていただけると助かります。
　あなたのHTMLがわからないので、教えることは不可能なのです。
　そこで、サンプルとして、下記のようなHTMLがあるとします。
　この、<header><header>内のナビゲーションをトップに、<footer>内のトップへのリンクをページ下右に配置するとします。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済みのHTML5です。(右上のDATAをクリックして貼り付け)
　CSSを期待通り動作させるためには正当なHTMLが必要なので。
　チェックしておくこと

★タブは＿に置換してあるので戻すこと。

今から出かけますので、後日になる

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body id="TOP">
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="/">Top</a></li>
＿＿＿＿<li><a href="#Q">質問</a></li>
＿＿＿＿<li><a href="#A">回答</a>
＿＿＿＿<li><a href="/">Products</a></li>
＿＿＿＿<li><a href="/">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<section>
＿＿＿<h3>質問</h3>
＿＿＿<p>
＿＿＿＿はじめましてこんにちは！
＿＿＿</p>
＿＿＿<p>
＿＿＿＿css初心者なのですが、下の写真のように常にサーバー上画面に固定して表示できるように設定することは出来ますか？できるのであれば教えていただけると助かります。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿あともう一つ、ページを一気に１番上まで戻せるようにページの端に常に矢印アイコンを表示させたいのですが、わかるかたいらっしゃいましたら教えていただけると助かります。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿よろしくお願いしますm(*_ _)m
自分のサイトをデザインして作ろうと思っているのですが…先駆者の方のお力を貸していただけると嬉しいです(>_<;)
＿＿＿</p>
＿＿</section>
＿＿<section id="A">
＿＿＿<h3>回答</h3>
＿＿＿<p>
＿＿＿＿この場合、問題になるのは、ヘージ内リンクをしたときに、その部分が隠れてしまうという大きな問題がありますので、通常は使われことはない。・・とても不便になります。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿左右いずれかのスペース、あるいはヘージ最下段がおすすめです。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿最上部にするときは、ヘージ内リンクに対して手の込んだ細工をしないとならないです。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿CSSに挑戦されるとのことですので、ご存知だと思いますが、プレゼンテーション（表現）をCSSに任せる場合は、HTMLには文書構造だけを記述します。プレゼンテーションにかかわることは一切書かない。そのためのCSSの導入ですからね。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿<strong>【重要】</strong>構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
＿＿＿</p>
＿＿＿<p>
＿＿＿＿サンプルとして、下記のようなHTMLがあるとします。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿この、<header><header>内のナビゲーションをトップに、<footer>内のトップへのリンクをページ下右に配置するとします。
＿＿＿</p>
＿＿</section>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿＿<p>
＿＿＿＿ここは本文と直接関係ない(asideな)記事
＿＿＿</p>
＿＿</aside>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="/">Top</a></li>
＿＿＿＿<li><a href="#Q">質問</a></li>
＿＿＿＿<li><a href="#A">回答</a>
＿＿＿＿<li><a href="/">Products</a></li>
＿＿＿＿<li><a href="/">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿＿<p><a href="#TOP">このページのトップへ</a></p>
＿</footer>
</body>
</html>