google apps script（GAS）でhtmlを学ぼう2
前回htmlをGASで表示して見る方法を説明してみました。
今回はhtmlの肝とも言えるCSSについてです。
CSSとは？？
CSSとはカスケーディングスタイルシートの略称で、htmlの表示で文字を大きくしたり背景を変えたりといった、見た目に関する事項（スタイル）をまとめて記したものです。
このCSSはwebサイトの視認性、わかりやすさ、UI（ユーザーインターフェイス）に大きく関わるもので、もっとも重要な部分といっても過言ではないです。
CSSの記述方法
CSSの記述方法は半角英数記号で「セレクタ名｛｝」と記述し、どういうスタイを適用するかを吹き出しカッコ内（プロパティ）に記述します。
通常一行で記述されることはなく、複数行に渡って記述するのが一般的です。
また、CSSはhtml内に記述するやり方と、別のファイルにする方式があります。htmlファイル１個にまとめたい場合以外は、別ファイルにしたほうが良いでしょう。
セレクタ名
↓
p{
font-size: 12px; ←プロパティ
}
-----------------------------------------------------------
だめな記述（機能はする）
p{font-size: 12px;}
良い記述（プロパティが1行でも段落分けしたほうがよい）
p{
font-size: 12px; ←プロパティ
}
-----------------------------------------------------------
html内に記述する方法・・・<head>内に<sytle>と</style>の間に記述
<head>
<style>
p{
font-size: 12px;
}
</style>
</head>
-----------------------------------------------------------
html外に記述する方法・・・<head>内にCSSのリンク先を記述
フォルダ構成
フォルダ名-----index.html
+---style.css
index.html
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
+++++++++++++++++++++++++++++++
style.css
p{
font-size: 12px; ←プロパティ
}
-----------------------------------------------------------
番外編（GoogleAppsScriptで使用する場合）
-----------------------------------------------------------
html外に記述する方法・・・<head>内に<?!= include('css'); ?>を設置し、
.gsファイルにscriptを記述する
index.html
<html>
<head>
<?!= include('css'); ?>
<?!= include('js'); ?>
</head>
+++++++++++++++++++++++++++++++
css.html ・・・通常の外部化するのと違いhtml内に記述するように<style>で
くくること
<style>
p{
font-size: 12px; ←プロパティ
}
</style>
+++++++++++++++++++++++++++++++
code.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
※inclideは、include('ファイル名')を指定することで、ファイル名を外部化するこ
とができる。
※上記の場合は、<?!= include('css'); ?>でcss.htmlやjs.htmlをそのまま呼び
出している
CSSはUIに関わる
CSSは見た目を制御するものと説明しました。ユーザーインターフェイスはとても重要で、それ故に沼にハマりやすく、最も難しいとも言えます。
私自身も、CSSについてはわからないことだらけで、本格的に勉強しようを思うと時間が足りないと思っています。本記事は、スペシャリストが養成するという感じではなく、初心者同士が一緒に学ぶというイメージでお願いしたいところです。
CSSを当てる方法
CSSを当てる方法は３種類あります。
1つ目はタグに直接当てる方法
2つ目はclass属性に当てる方法
3つ目はid属性に当てる方法
です。
タグに直接書き込む方法
スタイルを当てる方法は、タグ内に記載することで当てる事もできます。
html
<body>
<p font-size="12px">Hello, World!</p> ・・・スタイルを直接書き込む
<p>Hello, World!</p>
<p>Hello, World!</p>
</body> ただしこの方法は、コードが長くなってしまったり、どこにどんなスタイルが当たっているか、わかりにくくなってしまいますので、どんな場合でもCSSで当てるようにしましょう。
タグに当てる方法
タグに直接あてる方法は簡単です。セレクタ名はそのままタグの名前にすればいいだけなので、わかりやすいと思います。
ただし、タグが重複した場合は、後から使用した同じタグにも適用されるため、注意が必要です。
タグにCSSを設定する場合は「文字の色」や「文字の大きさ」など個別に適用したほうがよいものは避けて「全体の統一感」に関する設定をすると良いでしょう。
セレクタ名はそのままタグ名になる
↓
p{
font-size: 12px; ←プロパティ
}
-----------------------------------------------------------
CSS
body{
width: 100%;
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
p{
font-size: 12px;
}
------------------------------------------------------------
html
<body>
<p>Hello, World!</p>
<p>Hello, World!</p> ・・・すべてのフォントサイズが12pxになってしまう
<p>Hello, World!</p>
</body> class属性に当てる方法
class属性に当てる場合は、class名をつけ、htmlのタグ内にclass="class名"を付与し、CSSに記述します。
class名や後述のid名は基本的に自由に付けることができます。ただ、自由であるがゆえに問題も多いです。
セレクタ名は .(ドット)+class名になる。class名は決まった名称はない
↓
.p__size{
font-size: 12px; ←プロパティ
}
-----------------------------------------------------------
CSS
body{
width: 100%;
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
.p__size{
font-size: 12px;
}
-----------------------------------------------------------
html
<body>・・・タグにあてたものはそのまま適用される
<p class="p__size">Hello, World!</p>・・・この段落のみ12pxが適用される
<p>Hello, World!</p>・・・標準のフォントが割り当てられる
<p>Hello, World!</p>
</body> id属性に当てた場合
id属性に当てる場合は、id名をつけ、htmlのタグ内にid="id名"を付与し、CSSに記述します。
ただし、idはホームページ内に重複することは認められないので、１つの要素に対して１つのみであるという認識を持ってください。
セレクタ名は #(シャープ)+id名になる。id名は決まった名称はない
↓
#p__p1{
font-size: 12px; ←プロパティ
}
-----------------------------------------------------------
CSS
body{
width: 100%;
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
#p__p1{
font-size: 12px;
}
-----------------------------------------------------------
html
<body>・・・タグにあてたものはそのまま適用される
<p id="p__p1">Hello, World!</p>・・・この段落のみ12pxが適用される
<p id="p__p1">Hello, World!</p>・・・これはNG。
<p id="p__p3">Hello, World!</p>・・・idにCSSが設定されていない場合標準の見た目が採用される。
</body> CSSに密接に関わる属性について
CSSに密接に関わる属性についてはid属性、class属性と混同しやすいname属性があります。これらの属性は初心者がつまずくところでもあるので個別の解説をしたいと思います。
<p id="" class="" name="" その他="">
※無い属性は省略可 上記のコード見てみてください。id、class、name、など並んでいますよね？
今回はCSSの解説ですが重要な部分になるので、nameを含めて解説します。
idとは、
idとはそのものの固有のものを指すときに使います。
idはhtml内で1度しか利用できず重複はゆるされません。
完全な固有のものと識別できるので、JavaScriptを動作させるときに
作動先のidを指定する場合によく使用します。
CSSを当てることはできますが、原則としてCSSを当てる先として使わない
方がいいです。
また、idとclassで重複するCSSのプロパティがある場合はidが優先され
ます。
nameとは、
name属性も基本的に1度きりしか使えないと理解してください。
ただし、name属性の本当の用途としては、データを受け渡すための名前で
あるという点です。
nameを設定するとリンク先のtargetとして利用できるほか、サーバーか
らこのnameに属しているデータだったり「取り出しできるデータを扱う場
合」に使用します。
<iframe name="main"></iframe>
<a herf="http://www.google.co.jp" target="main">
とした場合、<a>タグのリンクをクリックすると、mainと名前がつけられ
た<ifame>内にgoogoleのトップページが表示されます。
CSSを当てることはできません。
classとは、
何らかのジャンルであったりより広い範囲を指します。ピンポイントのときもあればコンテンツすべ
ての場合もあります。CSSの適用のためにしか使用しません。
id、name、classの違いはこんな感じです。なぜ、タグやidなどにCSSを当てたらダメなの？と思われる方もいると思います。以下をみてください。
/****CSSの基本構造****/
セレクタ{
プロパティ: 値;
}
セレクタ＝各タグや、id名、class名を指定する。
階層になっているセレクタを複数組み合わせることもできる。
プロパティ＝フォントの色やサイズなどの要素
値 ＝直接数字を指定したり、パーセンテージや方向など各プロパティに対応したものを記述する
: ＝ イコールと同じ意味。
; ＝ カンマなどと同じく区切るために使用する。;がない場合は;以前までの値までしか適用されない。
-----------------------------------------------------------
/****タグ用CSS****/
h1{ ・・・・・・タグ名がそのままセレクタ名
background-color : #303030;
border: 0px solid gray;
font-size: 60%;
}
/****class用CSS****/・・・・・・class名は自由につけて良い
.tab-wrap { ・・・・・・・class属性のセレクタ名は.(ドット)+class名
display: flex;
flex-wrap: wrap;
}
/****id用CSS****/ ・・・・・・重複しなければid名は自由につけて良い
#menu{ ・・・・・・・id属性のセレクタ名は#(シャープ)+id名
border: 0px solid gray;
font-size : 14px;
padding : 10px 20px 0px 0px;
} 各属性は書き出し方が違います。
「タグ」は「タグ名そのまま」
「class」は「.（ドット）+class名」
「id」は「#（シャープ）+id名」
という具合です。
書き出しかたが違うということは、CSSを整理する際、属性ごとに整理しますので、CSSを当てるべき部分への記述が「タグ」「class」「id」と分離してしまいます。
このように、各属性が混在するとCSSが一体何にあたっているか判別しにくいという問題があり、それならば、class属性で統一しておいたほうが視認性がよくなるからです。
個人的にですが、idを設定しているタグにおいてCSSを適用する場合は、id名と同じclass名をつけclass属性でCSSを適用したほうがいいと思います。
-----------------------------------------------------------
CSS
body{
width: 100%;
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
.p__p1{
font-size: 12px;
}
-----------------------------------------------------------
html
<p id="p__p1" class="p__p1" その他=""> ・・・idではなくclassにあてる
↑ ↑
idとclass名を同じにする（同じにしても問題はない） ただし、上記の<body>のようにホームページ全体の見た目を統一するためベースラインを設けるという意味で、class属性以外にタグにあてる行為は良しとする場合があります。
また、CSSや<タグ id="" class="" name="" style="" href="" その他="">のような各属性を記載する場合ですが、idを先頭、classを2番目、styleやtypeを３番目それ以外はアルファベット順に記載しておくとコードが統一されてきれいに見えます。
基本はアルファベット順に記載する
タグに付与する属性も、idやclass等以外はアルファベット順に記載が望ましいと書きましたが、CSSのプロパティもアルファベット順に記載するほうがよいです。
何故かというと、「アウトラインに関するもの」「フォントに関するもの」「その他」という順番で記載するルールを決めたとしても、その〇〇に関するものと言う基準がとても曖昧だからです。
そのため、誰が記載しようとも順番が統一されるアルファベット順がもっとも好ましいです。
好ましくない
-----------------------------------------------------------
（例）
CSS
body{
width: 100%;
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
.p__p1{
font-size: 12px;
}
-----------------------------------------------------------
好ましい
-----------------------------------------------------------
（例）
CSS
body{
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
width: 100%;
}
.p__p1{
font-size: 12px;
}
-----------------------------------------------------------
ワンポイント
CSSを初めて書く場合、どこにどのようにあたっているかわからないときもあると思います。そこでおすすめは書くスタイルに「border: 0px #000000;」を記述しておきます。
borderは境界線のことですが、0pxを1pxに変えると境界線が表示されます。＃以降の数字は色番号(赤00緑00青00)を16進数で表記しているので、スタイルごとに色を変えておきます。
すると、htmlで確認すると各要素の重なりや位置関係がわかりやすくなり、見た目が整ったら0pxに戻してあげるといいです。
.box_1{
font-size: 12px;
border: 1px #FF0000; ・・・赤
}
.box_2{
font-size: 12px;
border: 1px #00FF00; ・・・緑
}
.box_3{
font-size: 12px;
border: 1px #0000FF; ・・・青
}
.box_4{
font-size: 12px;
border: 1px #FFFF00; ・・・黄
}
.box_5{
font-size: 12px;
border: 1px #00FFFF; ・・・青緑
}
※ 16進数・・・0123456789ABDEFで一巡し00＝0、FF＝255の意味。
お疲れさまでした
以上がCSSにおける基本の「き」の部分になります。CSSについては好みの問題も大きいので、なんとも言えない部分がありますが、「先ずは見やすさ」を重視して組むといいと思います。
動的なホームページを作ろうとした場合、JavaScriptを使用しがちになるのですが、実はCSSにだけでなんとかなるなど、相当奥が深い内容です。
先ずは「タグに当てる」次に「classに当てる」と何度もトライアンドエラーを繰り返してやってみてください。
おまけ CSSにかかる問題点
以下については、経験者のみ推奨で、初心者がみるとげんなりするかもしれないですｗ
初心者の人に言いたいことは、「まずは色んなことは無視してとりあえずタグにCSSを当てて、その後classに当ててみてほしい。class名をつけるときは、独自でもいいので統一感を出す」ということです。
ここまで書いて、この話題に触れないのはどうかと思うので、命名規則のお話をしたいと思います。
CSSって難しいですよね。
CSSって記述方法が正しければ何でも動いてしまいます。
例えばclass名をkyoutuuとかhomepageとかにしたり名前がめちゃくちゃでも、プロパティがアルファベット順に記載しなくても、とりあえずは動きます。その自由度ゆえの問題があり、作成するコーダーによって記述がバラバラという問題が発生します。
これは、私にとってもすごい悩みなのですが、タグに当てる場合は再利用性に難があるもののとてもわかりやすいです。
一方classやidで当てる場合、再利用性などはとても良いですが、このclassが何のどの部分に当たるかをきちんと管理しないと、煩雑となりがちです。
実はこのような問題を解決しようとした偉大な先人たちが、こうした問題を解決すべく、CSSの命名規則を誕生させました。
それが、
・BEM（ブロック・エレメント・モディファイ）
・OOCSS（オブジェクト指向CSS）
・SMACSS（スケーラブル and モジュラー アーキテクチャ for CSS）」
などといった命名規則です。
命名規則は、例えば上記の「BEM」の場合、ブロック要素、エレメント要素、モディファイ要素と要素を分離し、class名は必ずブロック要素から始まり、ブロック要素を無視し、エレメント要素やモディファイ要素で命名しない。というルールで設計され、class名が統一されてメンテナンスがしやすい。というのが売り文句になります。
※ ・Block ＝サイトを構成するパーツ
・Element＝Blockを構成するパーツ
・Modifier＝BlockとElementのバリエーションや状態の変化を表す
しかしながら、「BEM」に関しては
BEMの命名例
-----------------------------------------------------------
CSS
.block__element--modify{
width: 100%;
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
-----------------------------------------------------------
html
<body class="block__element--modify" その他="">
-----------------------------------------------------------
他
.block__block__element--element--modify{
width: 100%;
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
-----------------------------------------------------------とclass名が長すぎる傾向にあるため、パット見のコードは死ぬほど汚く写り、一体どこの要素を表しているかがわかりにくいデメリットが存在します。
ここではそれらについては個別の説明は省きますがというより、一つ一つを学ぶのならばものすごく根気と時間が必要ですし、私のように、ツールを一切使わないテキストエディタ原理主義者にとって見た場合、正直「うん。わからん」という感じで、「マジで、これのどこがメンテナンス性良いんだよ？？？」と思うほど複雑という印象が拭えません。
というのも、これらはCSSを作成するとき多くの場合は、構築する際、ツールをつかって作成（コンパイル）するため、ツールなしの手作業でイチからコーディングしているわけではありません。
また、これらの命名規則は大規模なコーディングのためのようなもので、小規模なコードの場合はタグにCSSを割り当てたほうが圧倒的に早いです。
※もちろん細かい調整はテキストベースでコーダーが個別修正するので、テキストでコーディングできることはとても重要。
大規模で運用したり、メンテナンス性をよくするために、一定の体系や構造を学ぶのは重要だと思うのですが、初心者がこうした設計思想を持とうとしたり命名規則を元にCSSを組むことができるかといえばおそらく不可能だと思います。
また、手を出すことで、「html難しい！」と思うことでしょう。
ですから生半可な覚悟で手を出さないほうがいいのかなと思います。
ただ、CSSを組むときは、名前の統一感が大切なんだということは覚えておいてほしいと思います。
ツール使用時
適用する範囲に対して入れ子にすることをネストといいます。
このようにネストする方式でCSSを組んでいくと、全体の統一感を保ったままCSSを
組むことができます。
ただし、これはあくまでツール上のことなので、このままCSSとして記載しても、
スタイルは適用されません。
そのため、ネストする方式で記載したのち、コンパイルをすることで、CSSの形式
に振り分ける必要が出てきます。
body{
width: 100%;
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
> nav{ ・・・body直下にあるnavに対してスタイルを当てる場合
width: 100%;
height: 30%;
}
}
コンパイル後
コンパイルするとCSSの形式に治るので、これで初めて動作するCSSとなります。
body{
width: 100%;
height:100%;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
body nav{ ・・・ このように２つスタイルが生成される。
width: 100%;
height: 30%;
}
※ 命名を統一することでわかりやすくするという基本設計は手作業でもツールを使用しても
変わりありません。
※ 可能な限り自分でルールを統一して記述するよう心がけてください。オリジナルの命名規則を作ってみる
「BEM」や「OOCSS」などの設計が理解できないのは、ひとえに私が考案者じゃないからというのが一番大きいです。当たり前だろと思うかもしれませんが、ここはすごく重要かと思います。
例えば.box、.box--red、box--blue、と設定したとして、boxというclassがあって、その色が赤のものと青のものがあるのはわかりますが、そのboxが上部なのか左部なのか熟練コーダーでもhtmlを見ずにCSSだけ見て、判断できるでしょうか？
CSSはhtmlに紐付いてないだからこその自由さだとは思いますが、結局はそのhtmlごとにコードを組む必要があるんだから紐付けても問題ないと考えます。
私の場合は「エクセルみたいにセルに見立ててその範囲に名前をつけて、セルの範囲と名前で何を指しているかわかればいいのに」という考え方なので、そもそもの設計思想自体が違います。
webページ全体をエクセルのシートだと考えて
例1）B4～C9までの範囲をメインコンテンツにするならclass名は「B4C9__main」と命名
例2）A4～A9までの範囲をメニューリストにするならclass名は「A4A9__side」と命名
例3）A3～C3までの範囲をナビゲーションにするならclass名は「A3C3__nav」と命名
のようにすればhtmlを見なくてもおおよその位置配置がCSSを見ただけでわかるようになるかと思います。
問題点の1つは、webページが階層となっている場合ですが、A3A5L1_navなどLayer1と追加するなど工夫したりすれば、3次元構造も容易です。
2つ目の問題点は、webページをどこからどこまでを、行列として細分化するかという点です。webページの横軸（列）は限度がすぐに判別するでしょうが、縦軸（行）についてどんどん増えて行きがちで、追記追記であれば行をどんどん追記すればいいですが、中間の行が追記された場合はどうするかという問題が出てきます。
私がなぜこのような設計思想になったかというところなんですが、BEMの命名規則でよく問題になるのが、何がブロックなのか何がエレメントなのかです。
タグはブロック足り得るか、何をブロックとし、何をエレメントとするかが実のことを言うとめちゃくちゃ曖昧なんです。
命名規則が厳格なわりにそこら辺がガバガバで、「お前エレメントなのかよｗ」って思うこともあります。
しかも、<span>がブロック要素とする場合があったり、もともとのspanタグはCSSでいうとインライン要素な訳で、CSSの要素名とかぶってる部分もわかりにくいです。
私は上記の部分がどうしてもそれが理解できなくて、厳格にするなら、基準となるブロック要素は誰が見てもブロック要素で有るべきで、その他はエレメント扱いでよいのでは？という設計思想が上記の命名例です。
ブロック要素＝レンジ要素ということで、言うならBEMではなくREMといったところでしょうか？(モディファイはほとんど使わないけど。)
レンジ要素という概念にしたもう一つの理由としては、エクセルやVBAを使う人はものすごい数がいるので、同じ概念をhtmlに持ってきたら、そちら側の人たちも取り込みやすいかなという意図もありますし、ゼロから始めやすくないでしょうか（たまたまREMになっただけなんです。信じてほしい）。
ですから、設計思想を読み解いて、自分に一番あっているなと思うものをを学ぶのが一番いいのかなと思っていますし、なんならオリジナルを作ってもいいのではと思います。実際会社ごとに命名規則を独自で構築しているところ多いですしね。
オリジナルを作ろうとすればより深い知識を身につくかと思いますし、色々ためして、noteやgithubやqiitaといったものにどんどん投稿するといいと思います。間違っていればコメント欄が炎上しますし、コーディングに関しては、最適解はあっても正解はないものです。
BEMが最適なサイトもあれば、OOCSSが最適なサイトもあります。何度も失敗を繰り返して、更に失敗しての繰り返しがコーディングの基本だと思います。
慣れてきたらぜひ大いに悩み大いに失敗してみてください。