2016年8月6日

CSS右下にカテゴリ名や日付などを表示させたい時の方法・やり方。ボックス要素指定、positionを使う。

スポンサードリンク

 要素を右端にしたい時、htmlにコードを追加するだけで出来ます。

でも、CSSで指定したいという事もあるでしょう。
その方がスッキリするし。htmlが見やすくなるし。

要素の右寄せやり方・htmlコードバージョン


 まずはhtmlでどのように記入すれば良いかについて。
一応、知っておきましょう。

簡単です。


<div align="right">

要素

</div>

でOKです。
div が p でも span でもOKです。

class名を追加してもOK。
これが一番簡単なやり方ですね。

要素の右寄せ方法・CSS指定バージョン


 知っておくと便利なので、覚えておきましょう。
色々応用して使いこなしたいですね。


 例えば、サイドバーやトップページ等、
何かしらの1つのエリアがあるとします。

その中に、カテゴリ名を載せたいとします。

そして、カテゴリ名は『エリア内の』『右下』に載せたい。
こんな状況だとします。


 エリア名に oya-box というclass名をつけました。
右下に載せたい要素に ko-migiyose というclass名をつけました。


CSSはこちら。


.oya-box {
    position: relative;
}
.ko-migiyose {
    position: absolute;
    right: 0;
    bottom: 0;
}


以上です。


    right: 0;
    bottom: 0;


は、好きなpx数に変えて下さいね。


 ポイントは

親要素(エリア全体)に
position: relative; を追加して、

子要素(右下に載せたいもの)に
position: absolute; を追加した事。


 子要素の
position: absolute;は、

position: relative;
と指定されているもの=親要素を基準とします。

親要素内から右にどれくらい、
下からどれくらいの位置にするか決められます。

便利ですね。


参考にしたサイト

ボックス要素の右下端にボタンを配置する
http://html-coding.co.jp/knowhow/tips/000226/



 こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。


 当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。


 WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク