viewsカスタマイズ初心者の方は、この記事を読む前に下記の記事を読まれることをオススメします。ToolsでCSSを確認それでは本題のカスタマイズで覚えておきたいCSSのpositionを説明していきます。absolute上手く使ってカスタマイズする事があるんですが、理解するまでが難しいです。CSSを使ったテクニックの中では高度な事を行っているので、基本をじっくり理解して覚えていきましょう。positionを使った配置方法の指定positionには4つの値があり、それにより配置方法を決めることが出来ます。配置方法を簡単に説明しますが、ここでは何となく分かれば大丈夫です。static通常の配置で表示します。この値のみtop,right,bottom,leftの各プロパティは適用されません。relative通常表示される位置から相対的な位置に配置します。この中にあるボックスでabsoluteを使った場合は、このブロックが基準になります。absolute絶対的な配置です。通常はウィンドウ全体の左上が基準位置となります。親ブロックにrelativeが使っている場合にはそこが基準に配置されます。fixedウィンドウ全体の左上が基準位置となりスクロールしても移動しなくなります。以上がpositionの4つの値です。ここではrelativeとabsoluteを使っていくんですが、それにはhtml内にある親子関係を知っておく必要があります。absoluteを使ったカスタマイズを行うにはhtmlコードの親子関係を知っておく必要があります。以前紹介した記事「カスタマイズする時に理解しておきたいdiv要素」で紹介したかなり短縮したコードで親子関係を説明していきます。※下記のコードはアメブロのソースをかなり短縮したようなコードです。これを親子関係が分かりやすいように家系図風にしてみます。このコード及び親子関係で出来上がったレイアウトは下記のような感じになります。これを立体的な箱として表して見ると下記図のような感じになります。box1,2に対する親要素を分かりやすくする為に親要素以外のブロックを除いてみます。残っているブロックがbox1,2に対する親要素になります。上記図のようにbox1はこのようなブロックで囲まれていて、残ったブロックがbox1の親ブロックになります。absoluteの絶対配置イメージは下記図のような感じになります。relativeを使いbox1を絶対配置してみます。absoluteで絶対配置するbox1の親要素の一つであるコンテンツブロック(.skinContentsArea)を基準にbox1を絶対配置してみます。cssのコードは下記のような感じになります。}box1はコンテンツブロック(.skinContentsArea)を基準に上から30px、左から50pxの位置に絶対配置されます。下記図はそのイメージになります。ここまでがカスタマイズで覚えておきたいCSSのpositionの説明になります。absoluteを使いこなすには、まずはhtmlコードの親子関係を理解しておかないといけません。ここでは短縮したコードで説明しましたが、実際はもっと長いコードでブログは作成されてます。Toolsで要素を確認」を利用すれば親子の要素関係は簡単に分かります。absoluteが理解できれば、カスタマイズの幅もかなり広がってきます。カスタマイズするなら必ず覚えておきたい大事なcssコードなので、この記事を読まれて少しでも理解できればと思ってます。コメントをキャンセルメールアドレスが公開されることはありません。素材ホームページを簡単に無料で作るならホームページをはじめよう!FC2なら初心者でも簡単に無料作成!FC2ブログ初心者でも無料で簡単にブログ作成FC2無料ブログテンプレートの種類350以上!画像容量は1G!カスタマイズ可能です。