CSS 【CSS】classやidのセレクタ名を付ける時に注意すべきことって何? 2018年11月23日 HTMLの一部のデザインを変更したい時によく使う class="~"や id=”~”。 CSSの記述の時は .~{}のやつね。 その~(これ、セレクタって名前ね)の名前を付ける時は注意すべきことがある。 使えるものが制限されているからだ。 セレクタ名(class="~"の~の部分のことね)で使えるのは 半角アルファベッ...
CSS 【CSS】疑似クラスって一体なんだ? 2018年11月19日 CSSを勉強している時に出てくる疑似クラス。 なんてわかりにくい用語なんだろう(笑) 絶対用語の難しさが理解を妨げている気がする、、、 って文句はこれぐらいにしておいて、 「疑似クラスとはなんじゃい?」 ってことで簡単に…...
CSS 【CSS】セレクタの種類ごとの優先順位は? 2018年11月12日 CSSでよく使う、IDセレクタ、classセレクタ、要素型セレクタ(タイプセレクタ)には優先順位がある。 IDセレクタ>classセレクタ>要素型セレクタ、の順だ。 ちなみに要素型セレクタというのは、HTMLのタグを指定するセレクタのことね。 例えば、h2{ color : red;}って感じのやつ。 この優先順位をし...
CSS 【CSS】classセレクタとIDセレクタの記述方法とは? 2018年11月5日 CSSのセレクタの基本はHTMLタグ(h2とかpタグとか)だけど、同じタグのデザインが全て同じだと困る。 ということでオリジナルのセレクタがCSSには用意されていて、それが classセレクタ IDセレクタ の2つだ。 classセレクタ classセレクタは、 <div class="skill">~~&...
CSS 【CSS】超基本のCSS記述のルール:セレクタ・プロパティ・バリューの関係を整理 2018年11月1日 CSSの記述のルールってよく忘れがちなので、備忘録で整理しておく。 CSSには セレクタ(基本はHTMLのタグ:h2とかpとか) プロパティ バリュー という3つの設定がある。 この名称がCSSをわかりにくくしているとプ…...
CSS 【CSS】!important ってどういう意味?何のために使う?? 2018年10月6日 CSSのコードを見ていて、よくわからないやつがあった。 #wrapper { width: 100% !important; } ってやつだ。 「なんだこの !important ってやつは??」 ってことで調べてみた。 !important とは? !importantはスタイルを優先させることが出来るらしい。 ただ...
CSS 【WordPress】Breadcrumb NavXTプラグインを有効化して実際にパンくずリストを表示させるには? 2018年10月3日 パンくずリストなるものをサイトに追加してみた。 前から「パンくずリストって何??」 ってずっと思っていたけど、 サイト内での現在位置を表示するための道しるべみたいなものだってことがわかった。 ワードプレスでは、Breadcrumb NavXTってプラグインを使えばすごく簡単にパンくずリストを入れられる。 SEO的にもど...
CSS 【CSS】link rel="stylesheet" media="screen" href="~"で、media="screen"ってどういう意味?? 2018年10月3日 最近勉強のために、色々なWEBサイトのコードを見ている。 その中で、<head>タグ内に link rel="stylesheet" media="screen" href="~" ってコードをよく見るけど、 このmedia="screen"って 「一体なんだ?」 って思ったので簡単に調べてみた。 どうやら...
CSS 【CSS】メディアクエリとは何者なのだ?? 2018年10月3日 メディアクエリって用語をたまに(プログラミング小僧にとっては本当にたまにだ)聞くようになった。 これはどうやらレスポンシブWEBデザインに必要なもののようだ。 必要というか、レスポンシブデザインに不可欠なのがMedia Queries(メディアクエリ)らしい。 このメディアクエリっていうのは、ブラウザのウィンドウサイズ...
CSS 【WordPress】the_search_query() をvalue属性に入れる意味とは? 2018年10月1日 the_search_query() というテンプレートタグは、formタグ内におけるinputタグのvalue属性に記述されることがある。 サイト内検索のボックスを作っている場合、 <form action="<?php echo home_url('/');?>" method="get" cla...