ワードプレスのCSSスタイルのその他よく使われるスタイルコード

タグに直接記載するCSS　style=”font-size:20px;color:red…”

スタイルシートは、普通はHTMLの＜Head>の間に記載されますが、タグに直接記載することも可能です。
この記載方法は、ページの中のごく一部のみのスタイル変えるのに便利な指定方法になります。
書式は下記のようになります。

<タグ　style="font-size:20px;color:red;"></閉じタグ>

width:100%;clear:both;

<div style="width:100%;clear:both;"></div>

というスタイルの指定されたブロック要素は、それ以降の回り込みをすべて強制的に解除します。この書式は画像の回り込みを解除するのにレイアウトの調整のためによく使われます。

text-align: center;

text-align: center;はあるＤＩＶ要素の中のテキストや、画像、そのほかブロック要素を中央寄せするのによく使われます。

margin: 0 auto;

０は上下のマージンをＡｕｔｏは左右のマージンを意味します。左右のマージンをＡＵＴＯ(自動)に指定するとブラウザーはその要素を中央寄せします。ただ、この指定方法で中央によるのはブロック要素(自動で改行の入るタグ)のみとなります。

float:left;

この指定を、ブラウザーの幅以下の要素に連続して適応すると、その要素を横に並べることができます。また、ブラウザーの幅が細くなって要素がはみ出す場合その要素は自動的に下に回り込んでくれるようになりますので、レスポンシブレイアウトには欠かせない指定となります。

box-sizing: border-box;

スタイルシートで余白を指定したとき、その余白は要素の枠の外側に作られます。

この場合前述のＦｌｏａｔ　Ｌｅｆｔで指定した要素の幅が１００％超えてしまうことがあり、横並びにならなくなってしまうため、box-sizing: border-box;を指定して余白を要素の内側に作るように指定・強制します。

display:none;

このスタイルが指定された要素は、ＨＴＭＬで表示されません(レイアウト上無視されます)。子メニューがマウスオーバーで表示されるような仕組みはこのスタイル指定で実現されています。

よく似た指定にvisibility:noneというものもございます。この指定でも要素は見えなくなりますが本来その要素がある部分が透明になる形になりレイアウト上は存在する形での非表示をします。

※display:none;の要素であってもフォーム部品は送信等の機能はいたします。

position:absolute;

position:absolute;はその要素が入っている親の左上からの絶対位置により位置が指定される要素という意味になります。

.aaa{
position:absolute;
top: 10px;
left: 0px;
}

上記例ではクラスａａａというブロック要素は、親の要素の絶対値上から１０ＰＸ左から０の位置に配置されます。画像の上に、カテゴリー名を重ねたりするリスト表示でよく利用されます。

!important

要素のスタイル指定の後に!importantと記載してあると、ブラウザーはその指定をどこにこのスタイルが記載されてあろうと(通常は最後に書かれているスタイルを優先します)優先的に適応します。

.aaa{
color:red !important;
}

上記の例ではクラスａａａに含まれるテキストの色は必ず赤になります。
※ただしもしほかに !importantが同じクラスに、より下に記載されているとそちらがより優先されます。

:before

Ｂｅｆｏｒｅはそのタグ内の最初に任意のコンテンツやそのコンテンツのスタイルをしてします。見出しリストすべてにアイコンを最初に表示するような用途でよく使われます。

h2:before {content:"■";color:red;}

上記の例ではh2タグのテキストの直前に全て赤い■が追加されます。

max-width

この指定は要素の最大幅を指定します。例えば下記のようなＤＩＶは、大きな画像や分量の多いテキストが挿入されても２００ＰＸを超えませんが、それ以下の内部コンテンツの場合はどこまでも小さくなれるＤＩＶになります。

<div style="max-width:200px;">内容</div>

下記の例の画像では、この画像が必ず縦横比を保ったまま、ブラウザーの最大幅の内側に表示されるようになり、また、もし画像の最大幅がブラウザーの横幅より小さい場合は、引き延ばしはされない形になります。レスポンシブルなテーマでは画像のサイズ指定などによく使われる指定方法です。

<img src style="max-width: 100%;height: auto;">

\ 　他社の制作したワードプレスサイトもOK ! 　/
ワードプレスの制作・復旧・修正・カスタマイズのご相談・ご依頼はこちらから