似て非なる疑似クラス!:nth-child(n)と:nth-of-type(n)の違い

こんにちは、初めまして。らび太と申します。
初めての投稿です。これからよろしくお願いします。

(こうやって書くと90年代のWeb掲示板みたいですね。。)

さて今日は、疑似クラス「:nth-child(n)」と「:nth-of-type(n)」について書いていこうかと思います。
どちらも「上からn番目の要素」を選択するのですが、childとtypeで選択する基準が異なります。

それではまず:nth-child(n)からー。
以下のhtmlをもとに話を進めていきます。

:nth-child(n)は、親要素から数えてn番目の子要素を選択することになります。
記述はこのような感じです。

親要素(ここではsection要素)には、divとp合わせて6つの子要素があり、p要素は2,3,5,6番目にあります。
上記cssは「親要素内にある子要素で、3番目と4番目がp要素だったらそいつの背景色を変えてね」という意味です。
しかし、4番目にはdiv要素があるため、実際に適用されるのは親要素から数えて3番目の子要素(p要素)のみとなるのです。

結果は以下のような感じです

対して:nth-of-type(n)はというと

:nth-of-type(n)は、親要素内にある同一の子要素のn番目を選択することになります。
先述のchildだと親要素内のすべての子要素が対象だったのに対し、
of-typeの場合だと「親要素内にあるp要素から3番目と4番目の背景色を変えてね」という意味の記述になるのです。
上記のhtmlではp要素が4つあるので、その中から3番目と4番目の背景色が変わります。

結果は以下のような感じです

まとめると、

  • 「指定した要素が親要素からn番目にあればスタイルを適用」するのが:nth-child(n)
  • 「指定した同一の要素が親要素からn番目にあればスタイルを適用」するのが:nth-of-type(n)

ということになるわけです。

この違いがややこしい、というか、初めてhtml/cssを勉強する人にとってはなかなか理解しにくいものがあるのではないでしょうか。
まさに自分がそうでした。。笑
なので、自分自身の復習もかねてこれを記事にしようと思いました。

ちなみにこの2つの疑似クラス、(n)の部分は数値のほかにも
even = 偶数番目の子要素
odd = 奇数番目の子要素
3n = 3の倍数の子要素
などといったキーワードや数値を入力することもできます。

1段ごとの写真配置を左右交互にレイアウトしたい時などに非常に有用です!
クラスやidを使わずにスタイルの使い分けができるこの疑似クラスたち、うまく使いこなせれば様々なレイアウトに応用ができると思うので試してみてくださいねー。

それではまた!

ちょっぴり差をつけよう!斜め背景のデザイン

こんにちは!bibiです。風邪が流行ってますねー
自分もその流行に乗りいまだに喉がつらいのと鼻が利かない後遺症に悩まされております。

鼻が利かないと味がよくわからないんですよね!
食事が美味しく摂れないことが風邪ひいたことより凹んでおります。。
まあ風邪には恨みはありませんよ!!むしろ少し休めてよかっ(略)

皆さんも風邪、気を付けてくださいねー! 風邪にはビタミンCと、身体を温かくして
さっさと寝ちまうのが一番ですよ★ミ

それじゃあ!快適なWEBライフを☆彡

 

 

 

 

 

 

 

 

おっと忘れてた・・・

 

 

 

 

 

 

 

 

記事ですよ記事!

誰も書かないなんて言ってないじゃないですか!!(逆ギレ)

 

 

 

 

えーと・・・

 

 

今回は・・・

 

 

誰にでも簡単にできます!背景を斜めにするデザインです!

 

htmlはまずこちら。

おっと心の声がだだ洩れ。。まあ事実ですからねしょうがないね。

 

CSSは以下を書いてください。背景の色は僕の怒りを表しています。

これで準備完了!カンタンでしょ。。

 

 

ポイントは、背景に色を付けて、

 

ここで角度をつける。

 

斜めデザインだと初見で「おおっ!」って思われること請け合いです!

CSSのみで意外と簡単にできるので、皆さまお試しあれ!光あれ!

HTMLのみの記述でアコーディオンを設置する。

お久しぶりですsu-sanです。

長すぎる文章だったり、補足項目だったりにちょっとした部分に折りたたみ(アコーディオン)が欲しい時ってありますよね?

今回はHTMLの記述のみでそうしたちょっとした部分にアコーディオンを追加する方法を書いていきたいと思います。

下記が実行結果。

 

 

ここが開くよ
この要素が出ますよ

 

 

 

いかがでしょうか?かなり簡単にアコーディオンの実装ができたのではないでしょうか。

の部分で矢印がデフォルトで出てしまいますがcssに下記記述をすれば消すことができます。

以上!良いWEBライフを!

2017年四半期に思うこれからのWEB開発

2017年四半期に思うこれからのWEB開発

こんにちは。セリーナです。

IT技術の進歩は著しいものがあり、昨年使った技術でもすでに古いということが良くあります。しかしながら、基本は全く変わっていないということも事実です。

現在、サプライドではWEB受託の案件を受託しており、打ち合わせ時にはお客様といろんなお話をします。その中で、○○のサイトのようにしたいご希望や、○○したときに○○するエフェクトを入れたい。というお話もあります。
基本的には、WEBでできている表現はすべてできるのですが、コストや飽きが来ないか、納期なども重要になり、そのあたりもお打ち合わせしながら、ご希望のデザインに仕上げていきます。

現在、ホームページを作るためには、
下記、方法が挙げられます。
・各サーバー屋さんから出ている簡易作成サービスを利用する
・自分自身でHTML,CSSを勉強してレンタルサーバーにあげる。
・詳しい友達に頼む。
・WEBページ制作会社に依頼する。
・Wixなどのホームページを簡単に作れるサービスを使う。
・楽天などのショップページ作成で簡易的にページを作る。
・Blogサービスを使い、それ自身をホームページ化する。
・Wordpress.comのサービスを使い、それを活用する(ページ+ブログが同時にできる。)
・自分自身で勉強して、レンタルサーバーにWordpressをインストールする。
・ページは作らずSNS内のfacebookなどでお店ページを作る。

上記のように、現在では、ホームページを言っても色々な形で作成することがあります。
デザイン良くページを作ることに加え、今は検索エンジンでの結果表示、つまりSEO(Search Engine Optimization)を気にしたり、SNSに投稿するためのOGP(Open Graph protocol)を気にしたり、ページの読み込み早さを気にしたり(PageSpeed Insights)、ページを作るだけでなく、様々なことを考えなければいけません。
もちろん、制作時にはすべてを考えます。

ですが、
一番重要なのは、


HTML
(HyperText Markup Language)とCSS(Cascading Style Sheets)です。
厳密にいうとHTML5とCSS3ですね。

これさえきちんとわかれば、どんなものにも応用ができます。

つまり、様々なサービスを使ってWEBサイトを作ることは可能ですが、
HTMLとCSSの基本を知らないと、ただ誰かのシステムの上に乗っかって作業する人になってしまいます。それでは、サービスが変わるために、またそれを覚えなくてはいけません。
これは、他のサービスにも言えますね。
C言語やC++,Java,JavaScript,Ruby,Python…など、基本の言語を学ぶと良いでしょう。

つまり、これからのWEB開発をするために重要なことは、
さまざまなサービスがあるが、

基本を覚えよう!

です。
そして、それから自分の好きなサービスを使うのが良いと思います。

「初心忘れずべからず。」ですかね^^

新しい情報を期待した方、すみません。

初心者でも安心!マウスホバーエフェクトが100種類も!?超絶使えるhover.cssのご紹介!

こんにちは!bibiです。

今回は、ホバーするだけでいろいろと動きを出し、
リニューアルなどに超絶使えるhover.cssの使い方です。
今回は、ボタンを作って、動かしてみましょう。

行程はわずかにこの4つだけ。

1.をダウンロードして所定の場所に設置
こちらのサイトで、一括ダウンロードから直接ダウンロードします。
使用するのはhover.cssだけで大丈夫です。
ダウンロードしたら、cssフォルダに置けばOK!

2.hover.cssのリンクをhtmlに記述
続いてこの記述を、htmlの所定の位置に記述します。簡単ですね!

3.hover.css用のタグを設置
次に、ボタンを作るコードを、所定のcssに記述します。

4.htmlに、ボタンを設置する
最後に、このコードをボタンに記述します。

これで準備はOK!あとはclassの部分に動きのクラスを付与するだけで、簡単に動かすことができます。

hover時に”震える”ボタン

hover時に”左から右に色がつく”ボタン

このクラスは複数記述することもできます。ちなみに最後のコードは、ボタンではなくてもimgやh1、pタグなどにもつけることはできるので、簡単に動きを出すことができます!

こんな感じですね。

いかがでしょうか?JavaScriptを使わないので、シンプルにできますよ。
動的なWeb作成ライフを満喫しましょう!