カウンセリング[CSS]隣接セレクタ
投稿日時：2014年9月18日
今日から、東京ゲームショウが始まりますね。 私自身、大のゲーム好きというわけではありませんが、好きなタイトルの新作がお披露目になるようで、楽しみです。 ゲームはだんぜんRPG派のスタッフ「ほ」です。 さて、ここのところ、このブログがWebネタで埋まりつつありますが、きっと「の」が挽回してくれるはずなので、私は空気を読まずにCSSネタでいきます。 セレクタ祭りはまだまだ続きます。 今回は「隣接セレクタ」 自分が指定した２つの要素が隣り合った場合に装飾を行います。 【HTML】 <h2>見出し</h2> <p>リード文リード文リード文</p> <…
[CSS]子セレクタ
投稿日時：2014年9月12日
今年もたくさんのチョコミントを食べたチョコミント好きのスタッフ「ほ」です。 一年中コンスタントに売ってればいいのになぁ、と思いつつ、そろそろ中華まんのおいしい時期がやってくるなぁ、と食べ物のことばかり考えております。 食欲の秋！ さて、CSSネタでいきましょー。 本日ご紹介は「子セレクタ」です。 これを説明するために、HTMLソースの親子関係を説明する必要があります。 例をあげます。 【HTML】 <div id=”navi”> <ul> <li>オレンジ</li> <li>バナナ</li> <li>ぶどう&l…
[CSS]:nth-last-child擬似クラスと:nth-last-of-type擬似クラス
投稿日時：2014年9月8日
ここ数日は涼しいを通り越して少し肌寒いような…… 季節の変わり目、皆様体調にお気をつけください。スタッフ「ほ」です。 イラストレーターのツール紹介は「の」ががんばってくれていますので、私はもうちょっとWebネタで引っ張ります。 最近、ずっとfirstやらlastやらの擬似クラスをご紹介していますが、このfirst／lastシリーズは今回でとりあえずおしまいです。 今日ネタにするのは「nth-last-child」と「nth-last-of-type」という２つの擬似クラスです。 例をあげていきましょう。 【HTML】 <div id=”footer”> （省略） <p>…
[CSS]擬似クラス４つ「:first-child」「:last-child」「:first-of-type」「:last-of-type」
投稿日時：2014年9月4日
ここ最近は、残暑も鳴りを潜めて気持ちのよい秋風を感じますね。少ししたら暑さがぶり返すんでしょうけれど… 私は秋が一番好きな季節なので、わくわくしています。 スタッフ「ほ」です。 さて、前回、前々回と擬似クラスをご紹介していますが、忘れちゃわないうちに、さらに畳み掛けていきます。 今回は、使い方が似ていることもあり、４つの擬似クラスを一気にご紹介していきます。 :first-child :last-child :first-of-type :last-of-type ひとつずつ見ていきましょう :first-child 擬似クラス :first-child擬似クラスは、一番最初の子要素が指定した…
[CSS]:nth-of-type疑似クラス
投稿日時：2014年9月1日
9月になりました！ 我が家の息子も、今日から張り切って幼稚園に行き出しました。幼稚園児は宿題が無くていいですね。これが小学生になったら、9月1日の様子も変わるのでしょうか。 スタッフ「ほ」です。 さて、前回に続き、今回もCSSネタでいってみたいと思います。 前回ご紹介した「nth-child疑似クラス」は、●番目の特定の要素に装飾をすることができるスグレモノでした。 が、この疑似クラスにはひとつ弱点があるのです。 例えば、以下のようなHTMLソースがあった場合 【HTML】 <div id=”content”> <h2>１つめの中見出し</h2> <p…