サイトのコーディングをしていると「先頭や最後の要素のみに対して指定がしたい場合があります。
そんな時に便利な
nth-childとnth-of-typeですが使い分けとしては
nth-child(n)
ｎ番目の指定された要素に適用
指定された要素でなければ未適用
nth-of-type(n)
指定した要素のｎ番目に適用
上記となりますが、
【例】
タイトル
文言
サブタイトル
上記の例で使用すると
h2:nth-child(1)では
最初の要素はh1のため適用はされません
h2:nth-of-type(1)
間にほかの要素を挟んでも初めのh2に適用されます。
nth-childを主に使う人も多いと思いますが、
nth-of-typeも知っておくとコーディングで役に立ちます。
プロパティcounter-incrementを使うと、
liなどの要素に番号を自動的に付与することができます。
リスト（list-style-type: decimal）のような感じです。
counterを適用する要素に対しbeforeやafter要素を付け
プロパティでカウンタ名を指定することで連番をつけることができます。
ol {
counter-reset: li;
list-style: none;
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
横並びにしたい要素にdisplay:flexを指定すると、その子要素が並列になります。
簡単に導入するならば、CSSで「display:flex」というスタイルを指定するだけです。
■html
また、上下左右中央寄せは
.flexBox {
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
で指定します。
横並びにするならば、inline-blockやfloatなど選択肢はありますが、
flex-directionプロパティを使うと、HTMLはそのまま要素の順番の変更が可能です。
.flexBox {
display: -webkit-flex;
display: flex;
}
.flexBox li:nth-child(3) {
-webkit-order: -1;
order: -1;
}
Androidで©の色が変更できないといった場合の対処法です。
タグにlang=”ja”が入っている場合、スマホで見たときに色が変更できていない問題に遭遇する場合があります。
lang=”ja”を省いたりlang=”en”に変更したりなどで対処できますが、
©テスト
.copyright {
color: #ffffff;
font-family: Verdana;
font-family: "Droid Sans";
}
Androidでのフォントをfont-familyで指定することで対応できます。
IE9以降では擬似要素が表示されているにもかかわらず、IE8では表示されていないというときの対象法です。
contentプロパティの値を空白文字を挿入することで表示される場合があります。
.test {
position: relative;
}
.test:after {
background: #ccc;
content: ' '; //空白文字を挿入
position: absolute;
top: 0;
right: 0;
width:50px;
height:50px;
}
}
tableタグのthやtdは内包する要素や親要素の画面幅によって横幅が決まります。
では、3カラムレイアウトのテーブルの場合に、均等配置すれば良いでしょうか。
答えは、tableタグに対して「table-layout: fixed;」を設定すると、均等配置になってくれます。
tableのデフォルトは「table-layout: auto;」で、レスポンシブサイトで、
スマートフォンのサイズになった時に戻したいというときはautoを指定してください。
table.equalityTable{
table-layout: fixed;
}
コーディングする際、marginは必須といってもいいくらいよく使用します。
ですがmarginに負の値（マイナス値）を付けるにあたっては、それぞれ意見が分かれるところです。
ネガティブマージンは多くののモダンブラウザで完全にサポートされています。
ですが、ネガティブマージンは多用するものではありません。注意深く使用したほうが良いでしょう
ブラウザではサポートされていますが、Dreamweaverでは、正式な値として認識されず。
ネガティブマージンはDwのデザインビューで反映はされません。
中央配置したいブロック要素の幅が決まっているとき、ネガティブマージンを活用することでセンタリングする方法があります。
.center{
position:relative;
width:300px;
height:200px;
}
.box{
position:absolute;
width:100px;
height:100px;
margin-left: -50px;
left:50%;
}[/css]
nth-childはリスト構造など、同じ要素が多く連なる場合、5番目の要素に指定したり3の倍数の要素に、
cssの指定をしたりなど、多くの場面で活用できる擬似要素です。
実は、nth-childにはネガティブな値も指定できます。
上記では、最初から5番目の要素までフォントの色が緑になります。
Emmetは、HTML・CSSのコーディングを効率適にしてくれるプラグインです。
Emmetの省略記法を使用すれば、下記を入力してTabキーを押すだけで展開がされます。
#test>ul>li*5>a
↓
Dreamweaver CC 2017ではEmmetが標準搭載されています。また、個人ででDw用の拡張機能として追加も可能です。
Emmetのcheat-sheetを見ると沢山の省略記法があり、イロイロ調べてみると便利な機能存在するので、調べてみるといいですね。
WordPressでテキストエディタで文章を記述すると、文章の行が改行されるところに、自動的にpタグを付加されます。
投稿などでは、便利な機能ですが、オリジナルテーマで、固定ページを作るとき、Pタグが挿入されることでレイアウトが崩れるなど、不便な時もあります。
そんな場合、自動整形機能を無効にするPHPコードを、テンプレートファイルに書き込みます。
/**
* 固定ページのみ自動整形機能を無効化
*/
function disable_page_wpautop() {
if ( is_page() ) remove_filter( 'the_content', 'wpautop' );
}
add_action( 'wp', 'disable_page_wpautop' );
上記では固定ページのみ自動整形機能を無効にするPHPコードです。