はじめてのHTML&CSS入門

positionについて

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
positionプロパティを使うことで、柔軟なレイアウトが可能になります。2種のpositionを学びましょう。
講師:
08:22

字幕

このレッスンでは、CSS によるposition プロパティを使ったレイアウトについて学びます。それでは、チャプター 03レッスン 13 のファイルをブラウザで見てみましょう。このとおり final のファイルを開くと写真があって1 と、この「三重県」がちょっと重なっているようになっていたり、見出しであるオレンジ色の「伊勢神宮」の見出しが写真にかぶっていたりしています。begin と見比べてみましょう。begin がこちら。そして final は、こちらです。それでは Sublime Text でCSS を変えて、実現してみましょう。Sublime Text でbegin の CSS を開きまず、「伊勢神宮」のオレンジ色の見出しから動かしたいと思いますので、この place の h1 の見出しを選びpositionそして relativeこれは「相対的」という意味です。position プロパティを使う時はまず relative なのかabsolute なのかを実は、決める必要があります。そして top というシンプルなプロパティに-(マイナス)60pxそして left というプロパティに0 (ゼロ)と入れましょう。 0 の場合は、単位が無くても大丈夫です。ただ、数字が 1 などの正数だとpx といった単位が必要になります。それでは、上書き保存をしてアプリケーションを切り替えてブラウザを更新してみましょう。begin のファイルを更新してみます。更新。そうすると、元あった場所からこの様に、写真の上の方に移動しました。実は、この - (マイナス)という値は「上に上がる」という状態なんですね。top にプラスの値が入れば「上から」という意味になるので、top 60px だと下に下がってしまいます。この様に position を使うと何かのものに何かを重ねるというシールの様な使い方が出来るようになります。それでは、この 1そして「三重県」というものも動かしていきたいと思います。それでは Sublime Text に戻ります。では HTML を一度、見てみましょう。HTML には、見出し、文章そして ranking 1 と「三重県」という状態になっていますね。実は position を使うとある程度、このマークアップの位置がズレていてもposition で動かすことが可能です。では、この ranking というクラスが付いているので、スタイルシートでは. (ドット)がクラスを表していますのでこの「クラス ranking の内側」ということになります。 既に、幅や高さ、色味などが指定していてあのような見た目になっています。それでは、位置を動かしてみましょう。まず positionそして absoluteそして top: 0そして left: 0relative と absolute の違いはブラウザで見てみると分かります。上書き保存そして、ブラウザに移動して、更新。なんと! さっきまでここにいた 1 が左上に移動しました。つまり position absolute の場合はウィンドウの左上が座標 (0, 0) と認識されていて、もしも、ここに top: 60px と入れてあげると上から 60 なのでちょっと下に動くだけです。なので、この位置に持って行くためにはleft を計算しなくてはならないかというと、実は CSS で、便利に場所を特定する方法があります。それでは Sublime に戻ります。では、この ranking を包んでいる親の箱はplace という箱になっています。その親の箱にposition: relative と指定してみましょう。そして、上書き保存をします。そして、ブラウザで確認をします。更新です。そうすると、なんと!親の箱の左上に納まりました。 これは、親の箱にrelative を指定することで相対的に、この位置が次の absolute の基点になる基準点になるという効果を持っています。なので「position: absolute を使う時は親に pisition: relative をかける」とセットに考えておけば非常にものを置きやすくなります。同様に、この「三重県」の方にもposition を指定してあげましょう。Sublime Text に戻りこの area という部分になりますので、同様に、まず position を指定してあげます。position: absolute;そして、座標です。top: 0;そして left: 0;そして、上書き保存をしてブラウザで確認します。更新。そうすると、無事に左上に移動したのですが、先ほどのランキングの 1 が下に隠れてしまいました。この時に、 1 を上に出したい時や「三重県」の部分との重ね順を制御するプロパティがあります。それでは Sublime Text に戻りまして上にしたいものつまり ranking のクラスを選んでプロパティを追記します。z-indexこれは z は奥行きを表すz 軸の制御ができます。 そして、ここに数字が入ります。数字 2 を打ってみましょう。この z-index の値が大きければ大きいほど重ね順が前になります。そして、上書き保存をしてブラウザに行きましょう。そして、ブラウザを更新します。更新すると、下に隠れていた 1 が表に出て来ました。しかし、このままでは「三重県」も見えなくなってしまいますので、「三重県」の座標をちょっと調整しましょう。Sublime Text に戻ってarea のクラスの中の座標ですね。座標を上から 20px左から 20px と入れまして上書き保存。そして、アプリケーションの切り替えでブラウザへそして、更新することでこの 1 の左上の親のボックスの基点から右に 20そして、下に 20言い換えると、左から 20上から 20 の位置にこの「三重県」の位置が移動してこの様に納まったということになります。このレッスンではposition プロパティを利用したレイアウトの仕方を学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。