でも、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ヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク