［アラフォプログラミング未経験］BEMについて学んだみた
カリキュラムにて、課題の実装が何とか形になりました。
内容を確認中の間に「BEM」の復習に行ってみます！
目次
BEMって何？
BEMとは、多くの開発者が取り入れているCSS設計です。
BEMは、厳格なクラスの命名規則が特徴です。
BEMはBlock、Element、Modifierの頭文字を取ったもので、
ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名します。
~カリキュラムより抜粋
「ベム」・・・で良いのかな？ 読み方は。。。
CSS設計
CSSを書くときのルールなのか・・・
わかりやすいと良いが。。。
BEMを使用するメリット
BEMには以下のメリットがあります。
クラスの命名が簡単になる
BEMでは、ページを構成する要素をBlock、Element、Modifierの3つに分類して考えます。
Block、Element、Modifierのみでクラスを命名することで、クラス名に悩むことがなくなります。
クラスの命名が簡単になるのは良いなぁ。
「はて、このクラス名を何しよう？」
とか考えているとすぐに数分経っちゃうし、
ルールが決まっていた方が確かに楽だね！
さっきから何度も出てきたBlockとかがそろそろ知りたいな。
まずは各要素の意味を見ていきますか。
当然、それぞれが意味があっての名前なんだな
ってのがわかったかな。
それで、それで？
sample.html
<nav class=‘header-nav’> <ul class=‘menu’> <li class=‘menu__list’>TOP</li> <li class=‘menu__list’>CONTACT</li> <li class=‘menu__list menu__list--back-black’>ABUOT US</li> <li class=‘menu__list’>SERVICE</li> </ul> </nav>
navはヘッダーのナビゲーションメニューなので、クラス名をheader-navとしました。
→このようにクラス名の単語数が2つ以上の場合はハイフン1つでつなぎます。
ulはheader-navの子要素ですが他のヘッダーメニュー以外の部分でも使用したいので、クラス名をmenuとしました。
liはmenuの子要素なので、クラス名をmenu__listとしました。
liのうちABOUT USだけは背景色を黒くしたいので、
クラス名をmenu__list--back-blackとしました。
Modifierはこのように特定の部品を修飾したい時に使用します。
このhtmlに対して、以下のようにSassを記述しました。
sample.scss
.menu { list-style: none; &__list { background-color: #3BD1EC; color: #FFF; float: left; font-size: 30px; padding: 2% 1%; text-align: center; width: 23%; &--back-black { background-color: #000; color: #3BD1EC; } } }
menuのクラスの中で、ネストにしながら、
BlockとElemetを繋いで、見やすくなってますね。
変化させたい部分をModifierで繋いで修飾していくコードを書くってことか。
なんかわかってきた気がしてきたー！
次は、「Haml」について、勉強してみようー！
［アラフォプログラミング未経験］Sassの特徴について学んだみた
Sassの特徴の続きです。
この辺りの特徴はカリキュラムを進めてた時は流してましたが、、、
実装演習では、かなり使える！
というか使いこなせないと全くついていけませんでした。。。
ネストとかパーシャルとか、
恐る恐る実装してちゃんと画面が表示された時は、心地よい感動が駆け抜けましたぁー
目次
Sassのメリット
Sassには以下のようなメリットがあります。
プログラムのような処理ができる
Sassでは変数や条件分岐といったプログラムのような処理を記述できます。
そのため、CSSよりも柔軟なコーディングが可能となります。
Sassにおける変数
Sassでは、変数を使用することができます。
例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、
変数名で何度も使用することができます。変数を定義するには、
$変数名: 値;
のように記述します。
よく使うカラーコードや値は変数にすることであとで変更が楽になったり、コードが読みやすくなります。
例：Sassにおける変数
$section-color: rgb(30,30,30); section { background-color: $section-color; }
変数はまだ使いこなしてないなぁ。
確かに文字とかの色は変数で定義しておくと、
あとで修正楽そうだよね。。。
複数のCSSファイルを1つにまとめることができる
Sassではパーシャルという機能を使用することで、
複数のSassファイルを1つのCSSファイルとしてまとめることができます。
パーシャルを使えば機能ごとにファイルを分割することができ、CSSを管理しやすくなります。
パーシャル
パーシャルとは、分割したSassファイルのことです。
ファイルを分割することで、機能や内容ごとに管理ができるようになります。
一つのファイル に全てのスタイルを書くと膨大な記述になり、可読性が悪くなります。
一定のルールでファイルを分割して開発することで変更・修正がしやすくなります。
パーシャルファイルを作成するには、ファイル名を_（アンダースコア）から始めます。
パーシャルファイルを読み込むには、@import ファイル名と記述します。
〜カリキュラムより抜粋〜
sample.scss
@import “reset”; /* _reset.scssを読み込む */ @import “header”; /* _header.scssを読み込む */
Railsで部分テンプレートを勉強した時も感じたけど、
便利やん！！
長いコードを見てられないアラフォーには必然ですよ、こりゃ。。。
同じ値を使い回すことができる
CSSでは、複数の要素に同じスタイルを適用させる場合、
何度も同じスタイルを書かなければなりません。
しかし、Sassでは変数を使うことによって、同じ値を使い回すことができます。
また、mixinという機能を使用することで、同じスタイルをまとめることもできます。
変数
Sassでは、変数を使用することができます。
何度も使用する値を変数を定義することで、変数名で何度も使用することができます。
変数を定義するには、
$変数名: 値;のように記述します。
_variable.scss
$mainYellowColor: #FFEC00; /* #FFEC00という色をmainYellowColorという変数名で定義する */
変数を定義してある_variable.scssを読み込むことで、
_variable.scssに定義された変数を他のscssファイルで使用することができるようになります。
mixin
mixinとは、まとまったスタイルを定義することができる機能です。
<span style="color: #d32f2f">変数</span>
は値を定義するものでしたが、
<span style="color: #d32f2f">mixin</span>
はスタイルを定義するものです。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。
mixinを定義するには、
<b>@mixin mixin名() {}</b>
のように記述します。
_clearfix.scss
@mixin clearfix() { &:after { content: ‘’; display: block; clear: both; } }
&(アンパサンド)は、
擬似要素であるafterが適用されているセレクタを指します。
_sample.scss
.menu { @include clearfix(); ... .menu__list { float: left; ... } }
以下の例では、&は.menuに相当します。
_clearfix.scss
.menu { &:after { content: ''; display: block; clear: both; } .menu__list { float: left; ... } }
つまり、擬似要素afterは、.menuに対して適用されているということです。
このmixinの呼び出しは@includeを使用して以下のように書きます。
_sample.scss
.menu { @include clearfix(); ... .menu__list { float: left; ... } }
sample.scssの記述は以下のようなSassコードと同じです。
_clearfix.scss
.menu { &:after { content: ‘’; display: block; clear: both; } .menu__list { float: left; ... } }
clearfixもさらにパーシャルで部分テンプレートにすれば、さらにスッキリするのか！
使いこなせるとかなり便利になりますね。。。
［アラフォプログラミング未経験］Sassの特徴について学んだみた
はてなブログのレイアウトにまだまだ苦戦中です。。。
一方で、Sass、BEM、Hamlの関係が少しわかってきました！
プログラミングの良いところは、どんなに難解でも必ず答えがあるということですかね。
答えにたどり着く手順を理解できれば、自ずと導かれるというか。。。
・・・まあ、まだまだですが、、、
目次
Sassのメリット
Sassには以下のようなメリットがあります。
記述の簡略化ができる
CSSでは、親の要素から対象要素までのセレクタを何度も書く必要がありますが、
Sassはネストさせることで、同じ親のセレクタをまとめることができます。
~カリキュラムより抜粋〜
これって、最初よくわからなかったんですが、
今まで細かい仕様を全て列挙して書いていたことを思うと
画期的にですよ！
・・・って今気づきましたwww
Sassのネスト構造
SassではCSSをネスト(入れ子)して記述することができます。
ネストして記述することで深い階層になっても親子関係がわかりやすい、
親要素を複数記述しなくて済むといったメリットがあります。
~カリキュラムより抜粋〜
今までのCSSなら、こうでした。
sample.css
.block { background-color: #000; } .block .title { color: #FFF; font-size: 70px; text-align: center: } .block .text { font-size: 15px; color: #FFF; } .block .text span { color: red; font-size: 20px; }
でも、 Sassならこんな感じ。
sample.scss
.block { background-color: #000; .title { color: #FFF; font-size: 70px; text-align: center: } .text { font-size: 15px; color: #FFF; span { color: red; font-size: 20px; } } }
.block要素の中に必要な要素や追加したい記述を入れ子して、
その要素のみの色やサイズを記載すれば良いのです。
これ考えた人、すごいぃ。。。
次回もさらに特徴を紹介します。
［アラフォプログラミング未経験］Sassについて学んだみた
現在進めているカリキュラムにて、「 Chat」サービスの投稿画面実装に入りました。
ここからはいきなりハードルが上がり、これまで習った「rail」に加えて、
Web画面自体を見本の指示書からコードを書いてみるということになりました。。。
・・・2日目になりますが、もうチンプンカンプンですわー！
今までほんとカリキュラム通り、、、
というかほぼ丸写しでこなしてきたようなものだったので、
カリキュラムの指示がないとほんと海図も磁石もない状態で海の真ん中に放り出されたような
絶望感！！！
まずは何やるんだろ・・・
指示書通りにレイアウトをブロックで分けて・・・
いやいや、BEMで考えるだから、BLOCKとELEMENTを分けて・・・
あれ？
実装した画面ってどうみるんだっけ？
あ、まずは「rails」でルーティングとコントローラー作らなきゃやん。。。。
という思考の蟻地獄にハマった３時間でした・・・
というわけで、一旦、 「Sass」について頭整理してみました。
目次
Sassって何？
SassとはCSSの機能を拡張した言語です。
Sassを利用することで、CSSを効率的に書けるようになります。
SassはCSSに非常に似ていますが異なる言語です。
CSSは何となくわかってきたけど、
この間まで勉強してきた「Pictweet」の中にSassのコードがありましたね。
正直全く理解せずにコピペしてましたが・・・・
ついにここで学ぶことができるのですな。
Sassファイル
Sassは通常のCSSファイルには記述することができません。
反対にSassファイルにCSSを記述することはできます。
Sassを扱うファイルの拡張子は.sassと.scssの2種類があります。
どちらもSassのファイルとなりますが記法が大きく異なります。
あ、ファイルの種類は２種類あるのか！
.sass拡張子
.sassの拡張子であるSassファイルでは最初に作られたSassの記法（SASS記法）を扱うことが出来ます。
SASS記法では波カッコの省略やセミコロンが不要などのモダンで非常にシンプルな記法という特徴があります。
しかし、その分CSSの記法との差がありすぎてあまり普及しませんでした。
.scss拡張子
.sassの後に作られたSassファイルが.scssの拡張子のファイルです。
こちらはCSSに非常に似た記法（SCSS記法）でSassの機能を使うことが出来ます。
今ではこちらの記法が主流です。
そっか、これまで見てきた拡張子は「.scss」だったわー
#main { color: black; a { font-weight: bold; &:hover { color: red; } } }
見本を書いてみたけど、これだと「CSS」との違いがさっぱりわからないっす。。。
次回は、Sassの特徴について勉強してみます。
［アラフォプログラミング未経験］JavaScriptのライブラリ「jQuery」でHTML要素を操作する
今回は、jQueryを使って、HTMLのコード内の各要素を色々いじってみます。
変更したい部分を直接書き換えるんじゃなく、
jQueryで操作して変更させるというところを
理解できればなぁと思います。。。
目次
HTML要素を操作してみる
jQueryを使ってHTMLのテキストを書き換えてみます。
元のHTMLファイルがこちらです。
このタイトルやテキストを変更してみます。
main.js
$(function() { $("#title").text("変更したタイトル"); $("p").html("<strong>変更されたコンテンツ</strong>"); });
ソースコードを保存したらブラウザでindex.htmlを更新してみましょう。
すると以下の画像のようにテキストが書き換わっています。
jQueryでは、以下のように記述することで要素を操作することができます。
HTML要素の操作
$("セレクタ").jQueryの命令();
jQueryの命令（メソッド）は引数を取ることもあります。
HTML要素の操作
$("セレクタ").jQueryの命令(引数);
今回の例ではjQueryの命令の中でも最もメジャーなtext()とhtml()を使いました。
この2つのメソッドはHTML要素のテキストを扱うメソッドです。
text()
text()を使うと、取得したHTML要素のテキストを書き換えることができます。
引数には書き換えたいテキストを文字列で指定します。
main.jsの2行目ではtext()を使ってテキストを書き換えています。
main.js
$("#title").text("変更したタイトル");
id属性の値がtitleのHTML要素のテキストを「変更したタイトル」
というテキストに書き換えることができました。
また、text()のように引数を与えずに使うとテキストの取得ができます。
html()
html()を使うと、取得したHTML要素のテキストをHTMLのタグを含むテキストに書き換えることが出来ます。
引数には書き換えたいHTML要素を文字列で指定します。
main.jsの3行目ではhtml()を使ってテキストをHTMLに書き換えています。
main.js
$("p").html("<strong>変更されたコンテンツ</strong>");
pタグのHTML要素のテキストをstrongタグで強調された「変更されたコンテンツ」
というHTMLに書き換えることができました。
また、text()メソッド同様html()と引数を省略するとhtmlの内容を取得することができます。
JavaScriptを実行するタイミング
main.jsの実行される処理は$(function() { ... }に囲まれています。
試しに$(function() { })を消して以下のようにしてみましょう。
main.js
$("#title").text("変更したタイトル"); $("p").html("<strong>変更されたコンテンツ</strong>");
変更を保存してページをリロードしてみると、テキストが書き換わっていません。
これはJavaScriptの実行されるタイミングが原因です。
main.jsはhead要素内で読み込んでいます。
head要素を読み込んだ時点ではbodyの読み込みが終わっていないため、
書き換えたいHTML要素を取得できなかったのです。
つまり、HTML要素が読み込み終わったタイミングで処理を実行する必要があります。
$(function() { ... })の中に記述することでHTML要素が
全て読み込み終わったタイミングで処理を実行してくれるようになります。
結構簡単なコードで、さくさく変えてくれるの助かりますね！
次はjQueryの目玉機能であるイベント駆動について、勉強してみます。。。
［アラフォプログラミング未経験］JavaScriptのライブラリ「jQuery」のセレクタとは？
目 次
「jQuery」のセレクタには大きく分けて３つあるとのことです。
IDセレクタ
IDセレクタとは、HTML要素のid属性で指定するセレクタのことです。
IDセレクタは、取得したいHTML要素のid属性の値に#（ハッシュ）を
付けたものをセレクタとして利用します。
$(“#idSelector”) // idがidSelectorの要素を取得
クラスセレクタ
クラスセレクタとは、HTML要素のclass属性で指定するセレクタのことです。
クラスセレクタは、取得したいHTML要素のclass属性の値に.（ドット）を付けたものを
セレクタとして利用します。
$(“.classSelector”) // classがclassSelectorの要素をすべて取得
要素セレクタ
要素セレクタとは、h1やpのようなHTML要素を対象としたセレクタのことです。
要素セレクタは取得したいHTML要素の要素名をそのままセレクタとして利用します。
$(“h1”) // h1要素をすべて取得
※セレクタを指定した場合、該当するすべてのHTML要素が取得されます。
そのためidセレクタは1つしか要素が取得されませんが（id属性の値は被ることがないため）
他のセレクタでは複数の要素が取得される可能性があります。
text()
text()を使うと、取得したHTML要素のテキストを書き換えることができます。
引数には書き換えたいテキストを文字列で指定します。
$(“#title”).text(“変更したタイトル“);
html()
html()を使うと、取得したHTML要素のテキストをHTMLのタグを含むテキストに書き換えることが出来ます。
引数には書き換えたいHTML要素を文字列で指定します。
$(“p”).html(“<strong>変更されたコンテンツ</strong>“);
なるほど、、、
それぞれの要素を取得して、それに対して変更したりができるわけですね
次はセレクタ要素を使って、HTML操作してみます！
［アラフォプログラミング未経験］JavaScriptのライブラリ「jQuery」って何？
Tech::Expertのカリキュラムもいよいよ応用編に突入！
「jQuery」というJavaScriptのライブラリに差し掛かりましたが、
そもそも読み方がわからない・・・
以前この言葉を見かけたときは、JavaScriptに関連していることすら想像できませんでした。。。
そうか、JavaScriptなんだ・・・
目 次
「jQuery」って何？
JavaScriptはRubyに近いので、直感的に理解できた（ような気がした）のですが、
「jQuery」って何するもんよ？
で、引っかかる。。。
jQueryとは
JavaScriptは、HTMLとCSSを操作するための言語です。
jQueryはJavaScriptのライブラリで、JavaScriptで行えるほぼ全てのことを、
JavaScriptよりも簡単に行うことができます。
「ライブラリ」とは汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、
他のプログラムに何らかの機能を提供するコードの集合体です。
つまりjQueryとは「JavaScriptで書かれた様々なお役立ち機能を、
後に再利用しやすい形でまとめあげたパッケージ」だと言えます。
〜カリキュラムより抜粋〜
ほほ〜
操作するためのエクセルでいう関数みたいなもんかねぇ
特徴は？っと
jQueryの特徴
jQueryの特徴は以下の2点です。
①簡単な記述でHTML・CSSを操作できる
少ない記述でHTML・CSSを操作できます。
JavaScriptだと冗長になってしまうプログラムの記述も、
jQueryを使用すると少ない記述で実現できます。
②すべてのブラウザに対応してくれる
jQueryでは一つの書き方でほぼ全てのウェブブラウザに対応することができます。
一方JavaScriptでは、GoogleChromeやSafariなど各ウェブブラウザの仕様の違いに対応しきれていないため、
使用するウェブブラウザごとに記述を少しずつ変更する必要がありました。
jQueryでは記述を変更する必要がありません。
〜カリキュラムより抜粋〜
全てのWebブラウザに対応できるのか。
なおさら覚えないと今後また引っかかるよね。。。
