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

魔法戦士が行く!

【魔法戦士ブログ入門2】CSSの基礎を学ぶ。

はい。魔法戦士が行く!ポータル化計画、まだまだ進めていきますよ。
前回に引き続き、ブログ講座です。
今回のお話は、webデザインには欠かせないCSS(スタイルシート)のお話です。

PSO2魔法戦士ブログ、増えろ!








1 スタイルシートとは?


ごく簡単に言えば、見た目のデザインをいじるための仕組み、技術です。
現在のwebデザインの世界では、文書(webページ)の構造を記述するのがHTML、見た目をデザインするのがスタイルシートという考え方が一般的です。

いきなりわかりにくいですね。
この辺の話を詳しくやり始めるとキリがないんですが……できる限り手短にまとめる努力をしてみます。
が、まあ、この節は読み飛ばしてしまっても構いません。
ちょっと読んでみて「面倒だな」「わかりにくいな」と感じたら、さっさと次節に行きましょう。
大事な話ではあるけど、知らなかったとしても実務面では大きな影響ないと思います。



とりあえず、私なりの言葉で話していきます。

まず、前回の講座の最後に宿題を出しましたね。
念のため、もう一回リンクを引っ張っておきます。

 ⇒ ゼロから始めるホームページ[pixiv]

HTMLの知識に自信がない方、読んでいただけましたでしょうか。
これを一通り読むだけで、HTMLの初歩は大体わかるかと思います。
この中で私は、セマンティクスとう話をしました。
おさらいすると、セマンティクスとは、webマスター側からブラウザへの指示、即ちHTMLタグの意味を定義するもの、です。
ここに、レンダリングは関係ありません。
<p>というタグは段落という意味であり、前後に空白行を一行作るためのタグではない、というたとえ話をしましたね。
この「段落という意味」がセマンティクスです。
レンダリングとしては前後に空白行を作るという挙動になるかもしれませんが、それはブラウザがそのように表示してくれているだけの話で、<p>というタグに「空白行を作る」という意味があるわけではないです。
大事なのはセマンティクスであり、「空白行を作る」というレンダリングにはあまり意味がないものと思ってください。

なんで意味がないかと言いますと、これは、webマスターがいくらでも変更することができるからです。
そのまま使えば、ブラウザが勝手に空白行を作るんですよ。
でも、もっと大きな幅が欲しいなとか、むしろこんなスペースはいらないなって感じることも出てきます。

ここで、ブラウザが勝手に作ってしまうスペースを変更するために必要なのが、スタイルシートです。



私は「構造を記述するのがHTML、見た目をデザインするのがスタイルシート」と言いました。
この言葉の中の「構造を記述」がセマンティクスです。
<p>というタグが空白行を表示するのは見た目の問題でしかありません。
その見た目を変更するのが、スタイルシート。

とりわけ、webデザインでは、スタイルシート言語として主流なのがCSSです。
厳密に言えば、スタイルシートとCSSという言葉の間にはこのような違いがあります。
ですが、webデザインの話をする限りは、スタイルシート=CSSという認識で問題ありません。



さあ、とてもわかりやすいとは言えない説明になってしまいました。
細かい話は端折って、結論だけをシンプルに言いましょう。

大きさを変えたり色を変えたりというような、見た目に関わることは全てCSSでやる。

とりあえず、そういう認識でいいと思います。





2 スタイルシートの利便性


餌をぶら下げてみましょう。
CSSを理解して扱えるようになると、こんなにいいことがあるよ!
って話をします。

まず、webサイトの管理運営が劇的に楽になります。
更新作業なんかも含まれますね。

例えば、ブログなどでは強調したい文字を大きくしたり色を変えたりします。
ブロガーなら誰でも当たり前にやってることと思います。

ブログを更新していく中で、もしも、協調の仕方を変えたいと思ったら、どうしますか?
これまで赤い字で強調してきたけど、もう少し薄めの色にしたい。
強調する時に、もっと大きくしたい。
色々出てくると思うんですよね。

CSSを知らない場合、「じゃあ、次の記事から違う色を使おう」くらいでしょうか。
あるいは、記事を一つ二つ遡って直すくらいはするでしょうか。

CSSを使える人は、これからの記事だけでなく、過去記事全てに関して、一括して文字色の変更やサイズの変更ができます

例えば私のこのブログ、主に赤い字と青い字、大きな赤い字、時々紫とか緑で文字を装飾してますね。
この赤い字だけを、過去記事全てひっくるめて全部ピンクに変更する。
なんてことができます。
大きく強調している字を、全て小さくすることもできます。

はっきり言って、その辺は自由自在です。

ま、厳密に言えば、このような作業を実現するためにはスタイルシートだけではなく、HTMLのセレクタを使う必要があるんですけどね。
とりあえず今回のところはセレクタの話はしないでおきます。


他には。
四角で囲った枠線、使ったことないですか?
あれを<table>要素で作る人もいますが、CSSができれば<table>を使わなくても箱くらい作れます。
更に更に、枠線の中だけ個別にスクロールさせるなんてことも。

ブログなら、PC版とスマホ版で、HTMLの記述を変えずにデザインだけ変えるなんてこともできるようになっちゃいます。

まだまだたくさんたくさん、便利なことあります。
一度CSSを使い始めたら、もう知らなかった頃には戻れません。
それくらい便利で、逆に言うと、ないとめっちゃ困る。

是非是非、しっかりマスターしていってくださいね。





3 基礎編 記述の仕方と種類


CSSを扱うに当たり、まず知っておいて欲しいのは種類です。
やることは同じなんですが、記述の仕方が三種類あります。

<インラインスタイルシート>


特定の要素(タグ)にのみ、任意のデザインを適用するための記述です。
例えば、<h1>要素で見出しを作りますね。
記事内容が多ければ見出しも増えます。
この時、CSSでは<h1>要素に一括してデザインを指定することもできます。
が、ある特定の見出しにだけ違うデザインを使いたい。
そんな時もあるでしょう。
インラインスタイルシートは、そんな時に使います。

サンプルソース、書きますね。

<h1 style="color: red;">オレのニャッキが光ってウナギ!<h1>


赤字の部分が、スタイルシートの記述になります。
HTML的には、style属性を使って記述しますって感じの説明になります。
colorの部分はプロパティredの部分はです。
この「プロパティ」と「値」という呼称は、よーく覚えておいてください。
頻出単語です。
プロパティは、どんなスタイルなのかの指定、値は、スタイルの内容と考えましょう。
上記サンプルソースで言えば、colorというプロパティで色を指定しています。
「色を変えますよー」っていう指定なので、どんな色かまではここでは言及していません。
実際に色を変えるためには、何色にするかを指定する必要があります。
そこで、redという値を指定するわけですね。

特にCSSで使うプロパティをCSSプロパティなんて呼ぶこともあります。
文字の大きさを変える時も、このプロパティで指定します。
文字の大きさを変えるプロパティは、font-size
文字の太さを変えたい時は、font-weightてな具合。

CSSプロパティにはたくさんの種類があります。
ですが、全部覚える必要はないです。
本なりリファレンスサイトなりで、逐一調べてから使うと良いでしょう。
どの道、よく使うプロパティは嫌でも覚えますから

おさらいです。
インラインでスタイルシートを使う場合は、以下のように記述します。

<適用したい要素 style="プロパティ: 値;">

プロパティと値の間は、必ず:(コロン)で区切ってください。コロンの後の半角スペースも入れておきましょう。
ただし、値の後の;(セミコロン)は、その後に更に別のプロパティを続けるのでなければ省略が可能です。
が、省略が可能な時と不可な時とわかりにくい場合には、とりあえず入れておけばOKです。
つーか、私は省略の可不可を問わず入れるようにしてます。

CSSの記述の仕方はあと二種類ありますが、プロパティと値の書き方は同じです。
よーく覚えておくように。



<ヘッダに記述するパターン>


スタイルシートは、HTML文書のヘッダに記述することもできます。
使い道としては、そのページにのみ適用したいスタイルがある場合、ですかね。
サンプルソース、書きます。

<html>
<head>
<title>魔法戦士が行く! ブログ講座</title>
<style type="text/css">
h1 {color: red;]
</style>

</head>
<body>
<h1>Hello world!</h1>
</body>
</html>


宿題にしていた「ゼロから始めるホームページ」を読んだ方なら、上のサンプルは完璧に理解していることでしょう。
例によって、赤字部分がスタイルシートの記述です。

インラインとはかなり趣が違いますが、どちらかと言うとインラインでの記述の方が特殊形だと思ってください。
上記サンプルソースでは、<h1>要素に対してスタイルシートを適用しています。
これ、どんな風にレンダリングされるかと言うと、このページ内の全ての<h1>要素が赤くなります

CSSの記述の仕方としてインラインしか知らない場合、ページ内の全ての<h1>要素を赤くしようと思ったら、全部のタグにいちいち同じ指定を入れなければなりません。
しかし、ヘッダに記述するやり方を知っていれば、そんな面倒なことをしなくて済みます。
この辺に、CSSの利便性がありますね。
これもしっかり覚えておきましょう。

記述をおさらいします。

<style type="text/css">
h1 {color: red;}
</style>


まず、ヘッダ内に<style>要素を置きます。
属性にtype属性、属性値にはtext/cssと書きます。
あとは、このタグの間に、CSSを書き入れていくだけ。
書き方は、

適用したい要素 {プロパティ :値;}

これでOK。


さて、インラインではスルーしましたが、実は上記記述、初心者の方にわかりやすくするために敢えて間違ったことを言っています。
「適用したい要素」と私は書いていますが、厳密に言うとこれは誤りです。

正しくは「セレクタ」と書かなければならないところです。
セレクタの話は別の機会に詳しく話しますが、ここではとりあえず、スタイルの適用先は、要素だけではないとだけ覚えておいてください。



<外部スタイルシート>


さて、スタイルシートの記述の仕方としては、ここが本番になります。
これを使いこなさないと、スタイルシートは味わいつくせません。

スタイルシートは、外部に別ファイル(cssファイル)として作成しておくことができます。
それをHTML文書が読み込んで、スタイルを適用していくという方式です。
この方法の最大のメリットは、HTML文書のヘッダにきちんとcssファイルを読み込む記述さえしておけば、複数のHTML文書に対してスタイルを適用できる点にあります。

webサイトの運営管理っていうのは、意外と手間がかかります。
コンテンツを増やせば増やすほど、webページも増えます。
スタイルシートの記述の仕方としてインラインしか知らないと、全てのページに対してスタイルを適用させていくのはめちゃ手間がかかります。
ヘッダに記述するにしても、ページ数が何十って単位になるとバカにならない手間になります。

しかし、外部スタイルシートを一つ用意しておけば、同じスタイルを自分の管理する全てのwebページに適用できます。
めちゃくちゃ便利です。

更に、外部スタイルシートをPC版とスマホ版で別々に用意して、端末が変わった時に読み込ませるcssファイルを指定しておくことで、PCで閲覧した時とスマホで閲覧した時に別のスタイルを見せてあげることだってできちゃいます。

スタイルシートの真髄は、この外部スタイルシートにあると言っても過言ではありません。


基本的な記述は、ヘッダ記述と同じです。
ただ、記述する場所が違いますね。
別ファイルを用意しなければなりません。

自力でwebサイトを作る場合、テキストファイルから拡張子変更でcssファイルを作ることができます。
自力サーバを使わないレンタルブログの場合、どっかに外部スタイルシートを編集できるページが絶対にあるはず。
fc2の場合、「テンプレートの編集」から外部スタイルシートの編集ができます。

この外部スタイルシートに

h1 {color: red;}

と書き込めば、ブログ全体で、<h1>でマークアップされた部分が赤くなります。



ですが、これはこれで困るんですよね。
だって、全部変えたいとは限らないじゃん。
任意の要素に対して、任意の範囲でだけスタイルを適用したい。
と言うか、それができなきゃ外部スタイルシートの意味がない。
もちろん、できます。
それを可能にするのがセレクタですが、まあ、次回にしましょう。



レンタルブログサービスを利用する場合、テンプレのCSSが既に書き込まれてると思います。
自分の使いたいCSSを書き込む場合には、どっかに適当に余白を作って書き込みましょう。

では、外部スタイルシートの書き方を具体的に見ていきます。
と言っても、説明することはそんなに多くないんですけどね。



レンタルブログの場合はあまり気にしなくてもいいんですが、自力サーバで自力ブログの場合、自分でcssファイルを作ります。
最も、私は詳しく知らないけどwordpressなる便利なものがあるらしく、そういうものならやんなくてもいいのかもしれないけど。

とりあえず、テキストファイルを作ります。
で、まず最初に文字コードの宣言をしましょう。

@charset "UTF-8";

こんな感じ。
文字コードは、自分のHTMLファイルの文字コードに合わせてください。
あ、サーセン、自力ブログ作る人向けなので、初歩的な説明は省いてます。

ま、文字コードは別にやらなくてもそこまで深刻な問題は発生しないと思うけどね。
やっとくに越したことはないんだけど。


後は、ヘッダ記述と同じようにスタイルシートを書き込んでいくだけです。
一応、HTML同様にコメントアウトもできます。

HTMLにしてもCSSにしても、一文字違っただけで正しく動作しなくなるものです。
半角スペース一つ忘れただけでダメだったりするタイトでストリクトな仕様なので、余計な文字が書き込めません。
でも、メモ書きくらいはしたいじゃないですか。
そんな貴方にコメントアウト
コメントアウトした文字列は、レンダリングに影響を与えません。基本的には、ですけど。
スタイルシートやスクリプトの記述の際にコメントアウトが必要な場合がありますが、とりあえず今は考えなくていいです。

HTMLの場合、

<!-- この文字列は、表示されません。 -->

こんな感じ。


外部スタイルシートやヘッダ記述の場合の<style>~</style>の間であれば、スタイルシート用のコメントアウトを使います。

/* コメントアウトだよ。 */

書き込むスタイルシートが少ない内はいいんですが、慣れてきてたくさん書き込むようになってくると、こういうメモも必要になります。
覚えておいて損はないですね。





さてー。
今日はこの辺にしておこう。

次回は、実践編。
実際に刃渡がブログでやっていることを例に、どんな風にCSSを使うのかを学んでいきます。
もちろん、セレクタの話は必須になるので、詳しく話すことになります。




それじゃ、また次回。
わからないこと、質問疑問がもしあれば、どんどん聞いて頂戴♡



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

2016-06-05 : ファンタシースターオンライン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