PSO2魔法戦士研究レポート。と、テキトーな日記。

魔法戦士が行く!

【魔法戦士ブログ入門3】セレクタ基礎知識とCSSの実践。

というわけで、今回のブログ講座は、セレクタの基礎知識とCSSの実践です。

合言葉は、魔法戦士ブログ増えろ!








1 セレクタとは?


一言で言えば、目印です。

例えば、学校の1クラスが40人。
この中で、アークスやってる人手を挙げてー!
はーい!
手を挙げた人に、青いリボンを渡しましょう。
こうすると、クラスで誰が何人PSO2をやっているか一目でわかります。
じゃあ、その中で、魔法戦士やってる人、もう一回手を挙げてー!
はーい!
まあ、こんなにたくさんいたのね!(夢)
じゃあ、魔法戦士の人には赤いリボンもプレゼント。
PSO2以外で魔法戦士やってる人は?
よしよし、じゃあキミたちにはこの緑のリボンをあげやう。

そんじゃあね、青いリボンの人はリボンのついてない人と二人一組になってね。
緑のリボンの人は、赤いリボンの人と二人組になりましょう。
それじゃあ始めるぞッ!
クイズ! 魔法戦士が行く!



……。
…………。

ま、セレクタってのはこういうことです。
もっとも、HTMLの場合、目印を付けて見やすくすると言うよりは、目印を付けたものだけに特別に命令を出すって感じの使い方がメインになると思います。
さっきの妙なたとえ話で言えば、「青いリボンの人はリボンのない人と二人一組になってね」みたいな指示がそれに当たります。
クラスの生徒の名前をいちいち呼ばなくても、目印のおかげで指示を出しやすくなってますね。

セレクタってのは、そういうものです。
まあ、最初はちんぷんかんぷんでもいいです。
実際に使ううちに理解できるようになりますから。





2 セレクタの基礎知識


具体的には、id属性とclass属性を使った記述を主に、セレクタと呼びます。
もうちょっと広い意味で「セレクタ」という言葉を使うこともありますが、とりあえずはid属性とclass属性のことだと思ってください。

細かい説明は後回しにして、実際に使ってみましょう。
サンプルソース、書きます。

<html>
<head>
<title>魔法戦士が行く! ブログ講座</title>
<style type="text/css">
p {font-weight: bold;}
p.kyouchou1 {font-size: x-large;}
p.kyouchou2 {color: blue;}
</style>
</head>
<body>
<p>オレのニャッキが光ってウナギ!</p>
<p class="kyouchou1">オレのニャッキが光ってウナギ!</p>
<p class="kyouchou2">オレのニャッキが光ってウナギ!</p>
</body>
</html>


これが、どんな感じでレンダリング(表示)されるかと言うと。

オレのニャッキが光ってウナギ!
オレのニャッキが光ってウナギ!
オレのニャッキが光ってウナギ!


順番に見ていきましょう。
赤い字で表示している部分が、セレクタに関する記述です。

まず、ヘッダのスタイルシート。
<p>要素に対して、太字指定をしていますね。
こうすることで、<p>で括った部分が全て太字になります。

次に、kyouchou1となっている部分のスタイルシート。
これは、class属性によって属性値kyouchou1とされた<p>要素に対して適用されるスタイルです
全ての<p>要素に対して適用されるわけではありません。
あくまで、kyouchou1という目印が付いたものに対してだけです。

三つめは、kypuchou2の部分。
これもkypuchou1と同様で、kyouchou2という目印がついた<p>要素に対してのみ適用されます。

この時、太字という指定はセレクタ如何にかかわらず、すべて適用されます。
なので、セレクタを使用していない<p>要素では文字は太字になるだけ。
強調1では、太字+サイズ変更。
強調2では、太字+色変更、というレンダリングになっています。



まだ多分わかりにくいと思うので、この辺で実際に私がやっているセレクタの運用を例としてお話しします。

まず、em1、em2というセレクタを用意ます。
ちなみに、セレクタとして、と言うか、id属性やclass属性の属性値として使う文字列は、自分で勝手に決めてOK。
ただし、半角英数字と、一部を除く記号に限った方が良いでしょう。
当然のことながら、HTMLの記述に必要な記号、<>"などの記号は使っちゃダメです。
なので、em1・em2というのも私が勝手に決めた文字列です。

で、次のようにスタイルシートを書きます。

.em1 {font-weight: bold;
color: red;}
.em2 {font-weight: bold;
color: blue;}


主にテキストに使うスタイルですね。
em1を使えば、文字を赤くして、em2なら青くなるようにしてます。
太字にしているのも、文字をくっきり浮かせるためです。
色変えるだけだと、いまいち強調が足らない気がしたので。

さて、さっきの「オレのニャッキ」の例文の時と、少し違うのがお分かりいただけたでしょうか。
さっきのは<p>要素に対してセレクタを指定してるのに対し、私の使っているものは特定の要素を指定していません。
こういう書き方をすると、ほとんどの要素に対してセレクタを適用できます。

これも、実際に使ってみましょう。
サンプルソース、書きます。

<p>オレの<span class="em1">ニャッキ</span>が光って<span class="em2">ウナギ</span>!</p>
<p class="em1">オレのニャッキが光ってウナギ!</p>
<p class="em2">オレのニャッキが光ってウナギ!</p>

↓↓↓

オレのニャッキが光ってウナギ
オレのニャッキが光ってウナギ!
オレのニャッキが光ってウナギ!


<span>要素でも<p>要素でも、どちらでも同じスタイルが適用されます。
これ、便利なので覚えておくとよいでしょう。



じゃあ、実際、セレクタの何がどう便利なのか?
その辺も少し話しておきます。

ブログを既にやっている方ならご存知かもしれませんが、テキスト入力のためのエディタには、色を変えるためのボタンや大きさを変えるためのボタンがありますね。
HTMLがわからなくても大抵のことができる、というのはこのためです。
本当に便利な世の中になりました。

このボタンを押すとどうなるか。
ブログ未経験の方もいるかもしれないので、実際にここでやってみます。

<span style="color:#FF0000">文字色</span>
<span style="font-size:x-large;">大きい文字</span>

こんなんがねえ、ぽーんと出てくるんですよ。
後は、「文字色」や「大きい文字」の部分を任意の文字列に変えればOK。
実に簡単です。

さて、ボタンを押した時に出てくるこのHTML、ここまで私の講座を読んでくれた貴方には大体意味がわかるでしょう。
ここまでの私の講座に出てきてないモノは、<span>要素と、CSSプロパティ「color」に対して指定されている値「#FF0000」じゃないですかね。

簡単な方から行きましょう。
#FF0000は、色コードです。
16進法で定義される色の指定方法ですね。
このコードの場合、この色と同じです。
色コードを指定しなくても、プロパティに指定する値としては「red」や「blue」のような色名も一部使えます。
ですが、微妙な色を使いたい時は色コードを指定した方がいいですね。
何? 色コードはどうやって知るのかって?
「色コード」ないしは「カラーコード」で検索かけると、丁度いいサイトが出てきます。
活用しましょう。

このカラーコード、文字色の指定以外にも様々な場面で使うことになります。
これも、よく覚えておいてください。



次に、<span>要素。
基本的には、HTMLの要素にはセマンティクスがあります。
しかし、この<span>要素にはセマンティクスらしいセマンティクスはありません。
特に意味のない要素です。
空箱みたいなものですね。
用途としては、今まさに勉強しているセレクタの入れ物、というのが一番多いでしょう。

同様の要素に<div>要素があります。
これも空箱。
<span>要素との違いは、<span>要素がインライン要素であるのに対し、<div>要素はブロック要素であるという点が挙げられます。

いやあ……次から次へと新単語が出てきてしまいますね。
ホント、講座って難しいよなあ。
インライン要素とブロック要素の違いは……全く知らない人に説明するのは意外と面倒なんですよね。
とりあえず今回の本筋とは直接関係ないからスルーしちゃおうかな……。

まあ、ごく簡単な説明にとどめます。

原則として、HTMLではテキストエディタ上の改行はレンダリングされません。
改行のためには<br>という要素を使います。
HTMLで改行と言ったら、<br>要素のことだと思ってください。

インライン要素とブロック要素の違いについて、物凄く乱暴な説明をしますね。

インライン要素は、改行を挟まずに並べると、そのまま横に並んだ状態でレンダリングされます。
ですが、ブロック要素は改行の有無にかかわらず、横に並んでレンダリングされることは、基本的にはないです。
もし、自分のブログやwebサイトがあるなら、試してみるといいです。
インライン要素でわかりやすいのは、画像を貼る<img>要素かな。
ブロック要素なら<p>要素が使いやすいでしょう。

以上。
今はそれだけでいい。

どんどん話が脱線しちゃうな。
前二回より、内容が高度になってきてるしな。
頑張らねば。



話を戻しますね。
ブログのエディタなどを使うと、<span>要素がぽーんと出てきてくれて、知識がなくても色を変えたり大きさを変えたりできるって話でした。

さて、ここで出てくる<span>要素には、しっかりスタイルシートが使われています。
前回の講座を思い出してください。
インラインスタイルシートです。
ブログのエディタで色を変えたりする時には、エディタが勝手にインラインスタイルシートを仕込んでくれるというわけ。
ただし、セレクタまでは使ってくれません。

前回の講座で、私は「CSSを覚えると、それまで赤い字だったものをいつでも別の色に変更できる」みたいなことを言いました。
これは、セレクタがあって初めてできることです。

ブログのエディタに任せていると、色を変えるのは楽ですが、後で変更することはできません。
できるんだけど、過去記事をいちいち編集し直すという膨大な手間になります。

じゃあもし、全てをセレクタを使って記述していたとしたら?

私のブログがそうです。
今まで使ってきた赤い文字青い文字は、全てセレクタを使っています。
実際の色指定や太字の指定、サイズの指定などはHTML文書ではなく、外部スタイルシートに記述しています。
さっきのサンプルCSS、もう一回書きますね。

.em1 {font-weight: bold;
color: red;}
.em2 {font-weight: bold;
color: blue;}


過去記事なんか、いじらなくていいんです。
外部スタイルシートを呼び出して、この部分をちょちょいとやるだけで、全部の色が変わります。
全部の色が。
もちろん、大きさを変えるのだって自由自在。

ただし、これまでの記事で、セレクタを使っていなければなりません。

プラス、ブログのエディタでは使いにくい要素に対しても、文字色を変えたり大きさを変えたりということが簡単にできるようになります。



まあ……色を変えるなんていう必要が出ればの話ですけどね。
でも、万が一ということはあるし、編集上の利便性が向上することは間違いないでしょう。

ブログはね、過去記事なんて埋まる一方だから気にならないかもしれないけど、ブログでなくてテキストサイトを運営してごらんなさい。
セレクタとスタイルシートのありがたみが嫌と言うほどわかるから。
と言うか、セレクタもCSSもなしでwebサイト運営とか、考えたくない。



おさらい&まとめ。

  • ヘッダ記述ないしは外部スタイルシートを使って、セレクタを設定する
  • 実際のHTML文書の編集で、class属性orid属性を使ってセレクタを記述、スタイルを呼び出し適用する
基本はこれだけ。とっても簡単。

使い方は簡単なんだけど、利便性を理解しないと使う気にならないと思う。
そこら辺の説明がうまくできてない気がするなあ。

おっと、書き方もまとめておくね。

<CSS>

セレクタ {プロパティ: 値;}
セレクタに該当するのは、各要素と、class属性やid属性で使用する任意の文字列。
セレクタの部分に要素のみを記述すれば、該当するページにある全ての指定の要素に対してスタイルが適用される。
要素+文字列の場合、セレクタを付けた指定の要素に対してのみスタイルが適用される。

要素.任意の文字列 {プロパティ: 値}
上記は、class属性の場合。

要素#任意の文字列 {プロパティ: 値}
これは、id属性の場合。
class属性とid属性の違いについては後述。

更に、要素を省略して記述することで、特定の要素以外にもセレクタを用いてスタイルを適用することができる。




<コラム class属性とid属性>

どちらも同じように使うセレクタです。
何が違うかって言うと……これの説明も難しいなあ。
例えるなら、class属性はグループ名、id属性は個人名だと思ってください。
グループっていうのは、そこに複数の人がいるからグループって言うでしょ?
一人しかいないのにグループとは言わないよね?
そゆこと。

id属性の属性値は、一つのHTML文書に対して一つだけです。
id属性自体は何回使ってもいいです。
ですが、同じ属性値は一度しか使いません。

これに対してclass属性は、その属性値を何度でも使うことができます。

なので、最初のたとえ話に即すなら。
classは複数あるからclassなのであって、一つしかないものをclassとは呼ばない。
それはidと呼ぶ……って言うか、一度しか使わないものならidで済ます。
そんな感じの感覚で、とりあえず大丈夫だと思うよ。






3 CSS実践編


想像以上に説明が難しい。
うーん。マジな話、他の親切なサイトを当たった方がいいんじゃないかって気がしてきたけど、今日はここからが本番なんだ。
そろそろ誰もついてこれなくなっているんじゃないかと思うが、めげずに頑張る。

ここからは、私が実際にやっていることの紹介になります。
さっきも文字の装飾に関して少し触れたけど、あんなものは初歩の初歩。
ここからは、もう少しグレードを上げるぜ。



<囲み記事>


これ、今回の講座でも既に多用してます。
どんなCSSを書いているかって言うと。

/* かこみ */
.kakomi {border: solid darkorange 2px;
padding: 10px;}


こんな感じ。
このページを見てもわかるように、何度も多用するスタイルです。
そのため、class属性で使用するための書き方になっています。
んで、セレクタの便利なことの一つなんだけど、CSSプロパティが一つしかない時はまだいいんだけど、それが三つ四つってなってくると、いちいち書くのが面倒なんだよね。
まして、この囲み記事、たくさん使ってるじゃん?
いちいちインラインでなんか書いてられないのよ。
それが、外部にセレクタの中身を設定しておくと、実際にHTML書く時は少しで済む。

<div class="kakomi">オレのニャッキが光ってウナギ!
いいからそのスプーン拾いなさいよ!</div>


プロパティが多く、使用頻度の高いスタイルほどセレクタの有用性が高くなると覚えておきましょう。


で、上のCSSの記述見てくれればわかると思うんだけど、要素に紐づいたセレクタではないのね。
なので、ほとんどのブロック要素に対して同じスタイルが使えるわけ。
CSSを書いた囲みだって、あれは理由があって<pre>っていう要素を使ってる。
だけど、その<pre>要素にセレクタを付けるだけで、同じような囲みができる。
便利なんだわ。
みなさんにも是非、この便利さを味わっていただきたい。



<仕切り線>


ブログの前書き部分と本文を仕切ってる線あるじゃん?
あれはスタイルなしでそのまま使ってるんだけど、たまにこういうのを使う時がある。

↓↓↓






これも、HTML的には

<hr class="middle">

としか書いてない。シンプルなもんでしょ。
けどCSSはもうちょっと複雑で、こんな感じになってる。

/* 中仕切り */
hr.middle {width: 80%;
color: darkgreen;
border-style: dashed;
margin-left: auto;
margin-right: auto;}


使われているプロパティと値については、各自調べておくこと。
こんなもん、私だって全部覚えて使ってるわけじゃない。
必要な時に本なり検索なりで調べりゃいいのさ。
調べてわかんなかったら、聞いて?






うん、疲れたから今日はここまでにしよう。
次回講座は、私の組んだCSSをもう少し詳しく見ていきたいと思います。
今日紹介したものも含めてね。さすがにちょっと不親切だと思うけど、私もそろそろ体力の限界。
どっちにしても、ちょっとわかりにくいよね。
改めて、人に教えることの難しさを痛感しています。
ま、もっとわかりやすいサイトは他にもあるから、そっちで基礎を学んでもいいと思うよ(無責任)



関連記事
スポンサーサイト

2016-06-11 : ファンタシースターオンライン2 : オンラインゲーム : ブログ講座 : コメント : 0 :
Pagetop
コメントの投稿
非公開コメント
 ※非公開コメントは受け付けておりません


 ※投稿されたコメントは、管理人の承認後に表示されます
 ※スパム、または誹謗中傷やその他不適切な内容を含むと管理人が判断したコメントは、承認せず削除することがあります

 ※現在、試験的に承認制を解除しているので、コメントは投稿後すぐに表示されます
 ※FC2ブログの仕様により、想定外の文言が禁止ワードに引っかかって投稿できない時があります

Pagetop
« next  ホーム  prev »

お知らせ & 独り言

貴方はもう、
独りなんかじゃない。
魔法戦士のたまり場
素敵な仲間が、
貴方を待っているよ。

学ラン、詰襟、ヒャッハー!


今のお気に入り。


せっかくのドゥドゥ弱体なので、ダガーとTマシ新調した上にスキル振り直してツインガンダガー完全リニューアルした。リミブレチェインから何をやるか考え中。暫定でシンフォ→ワルツ→ノクターン。どこまでチェインが乗ってるかはわからん。
尚、ダガーはサイカ・ヒョウリを使用。固有のメギバのおかげでガルミラなしでも空中回復できるぜヒャッハー!
あと、ツインガンダガーはやっぱりかっこよくて楽しいです。


どうもアイテムパックが窮屈だなと思って、ちょっと内訳を確認してみた。

武器:13
ユニット:3
リング:2
コス:38(パーツ含む)
武器迷彩:13
ギャザ消耗品:4
雑貨(ムーンその他):9
合計:82/150

所持品の半分以上がオシャレ用品(コス+迷彩)であると判明。最大値の150から比較しても、3分の1がオシャレ用品。だって、女の子だもんっ!(ぶりっ子訓練中)
地味に武器の多さも見逃せないが、これくらいはアークスの嗜みとしては普通だよね。


やっとBrのクラスキューブ終わったー! 次はBoだぜ。武器も新調したし、久しぶりだから少し楽しみなのです。


健康って大事だなって、ホント思う。身体壊したら何にもできないからね。この身体さえ回復してくれれば、ブログの再開だってできるのに。


引退宣言みたいな感じの記事書いてますが、ゲームは細々と続けてます。
しかし、ツイッター封印しただけでもブログ書きたい気分が急上昇するね。いや、元々やる気だけは充分あったのよ。ホント、時間と体力の問題だけ。


ドゥドゥが弱ってたから、新しいブーツとDB買って叩いた。
無心の型がウチの子のプレイスタイルにハマりすぎてて笑うしかない。
リンドクレイの第二潜在とかが無心になったら、ガチで悩むレベル。


リンクページに友の会メンバーnanabachさんのブログを追加しました。

現在、試験的にコメント承認制を解除しています。
ついでに、左側のプラグインエリアに「最新コメント」を追加しました。

リンクページ新設。
それに伴い、グローバルナビゲーションに「リンク」を追加。

サイトをちょっぴり改装。
こういうタイトル画像、やってみたかったんだよね。

「法撃付き武器一覧」
を更新しました。

「法撃付き武器一覧」
を更新しました。

「法撃付き武器一覧」
を更新しました。

「コメント」をクリックしてもコメント欄にジャンプしない不具合を修正。

重たい記事が下がったので、記事の表示件数を元に戻しました。

「法撃付き武器一覧」
を更新しました。

魔法戦士まとめ(EP2)
脱稿しました。
ページが妙に重いので、記事の表示件数を減らしました。

魔法戦士まとめ(EP2)
の執筆中です。

「法撃付き武器一覧」
を更新しました。

「法撃付き武器一覧」
を更新しました。

IEでレイアウトが大幅に崩れていた不具合を修正。
カテゴリリンク、メニューバーに
「魔法戦士と弟子S」を追加。

「魔法戦士と弟子S」第三回
の製作に入りました。
ということを、更新停滞の言い訳にしてみる。
まあ、誰も待ってないけど。

新コンテンツ
「魔法戦士と弟子S」
始めました。
会話文形式の日記になっています。

新しいコンテンツの準備中につき
更新が停滞しております。
ちなみに、予定している新コンテンツは 役に立つものではありません。

「おすすめ記事」
を設置してみたよ。
下↓にあります。

「法撃付き武器一覧」
を更新しました。

ちょっとずつ進めてちょっとずつ更新する予定だった
「ダルスソレイド強化計画」
が完了してしまったので更新。

「ダルスソレイド強化計画」
を、
進行状況に合わせて更新中。

PSO2小説
「モニカにお仕置き」
を掲載。
私の笑いのセンスは
少しズレている、ということを
久々に思い出した。

.
.

ゆっくりしていってね。

初めての方は、
このブログについて
からご覧ください。

このブログで使われているゲーム画像の著作権は、以下に帰属します。 (c)SEGA PANTSYSTAR ONLINE2
ブログパーツ
-法務省 ネットによる人権侵害に関する広告

プロフィール

刃渡まつり@PSO2

name : REIKA
class : 魔法戦士(Hu/Te)
ship : 6
team : 劇団ロンリースター
ブログ管理人 : 刃渡まつり

PSO2で魔法戦士やってます。

みんなの最新記事

法撃と双刃剣

    ドゥドゥモア6号店

      TeBrでぶらりPSO2