巷で噂のSass

巷で噂のSass

公式サイトのアメリカ女子みたいなピンクが可愛いですよね。

Sass公式サイト
http://sass-lang.com/

オンラインエディターも可愛い
http://www.sassmeister.com/

実践的にSassを使ったことないのですが、時代はもう来てるようですね。
イメージ的には入れ子?ネスト?で書きやすいとかとか。

・Sassには記法が2つ
「SCSS記法」と「SASS記法」
聞いた事あるのはパンツを履く履かない・・・。

SCSS記法 (パンツ履かない

ul
margin: 0
li
margin: 5px

SASS記法 (パンツ履く

ul {
margin: 0;
li {
margin: 5px;
}
}

公式としてはSCSS記法みたいだし、主流なのかなー

jQueryのきほん

jQueryのきほん。

使ってたらいつの間にかできたー!
みたいな天才型とかならいいのですが、そうではないので。

きほん的なことから。振り返りつつ文章化してみる。

※基本の書き方

jQuery(セレクタ).メソッド(パラメータ)

セレクタ→操作する要素
メソッド→操作する命令
パラメータ→操作内容

「jQuery」を「$」に置き換えOK

$(document).ready(function(){
//処理内容はここ
});

短く下記でもOK

$(function(){
//処理内容はここ
});

次はセレクタについてかなー。

比較演算子と論理演算子

お外は暑いし、オフィスはクーラー寒いし。
この季節は気温差に体が夏バテ…とほほ。

そんな、今日覚えたいのは、比較演算子と論理演算子

基本としては…。
【比較演算子】
> 大きい
>= 大きいか等しい
< 小さい <= 小さいか等しい == 等しい != 等しくない たまに左右がどっちだっけってなるんですよね…。 例) a>1 → aが1より大きい時真(ture)
例) a==1 → aが1の時真(ture)

【論理演算子】
! 否定(NOT) 真ならば偽、偽なら真
&& かつ(AND) 両方が真の時真
|| または(OR) どちらかが真の時真

例)!b → bが真(true)ならば偽(false),bが偽(false)なら真(true)
例)b&&c → bとcが真(true)なら真(true)

あぁ、でもこうやって真とか偽とかって、なってくると逆にこんがりそうっ。

難しく考えすぎず、とりあえず色々使ってみなきゃだな。
演算子、他にもあるんだよね。。。。少しずつ覚えよー(´Д` )

jQuery勉強会

梅雨の時期は髪がうねるし、広がるし困るー。
でも、紫陽花は綺麗だし、少しずつ夏になる感は好き。

今日はjQuery勉強会での内容を。

「9マスの中で押したパネルの周りの色が反転。
すべての色が揃ったらクリア!!」な内容がこちら。

仕様は理解できても、全ての色が揃うように揃えるのは難しいですね。

今回出てきている「Toggle」系メソッドに関しても、もっと理解しなきゃだな。
それはまた、次の題材。

エンジニア女子

「エンジニア女子」

たまに聞きますよね、このワード。
エンジニアには男性が多く、私の会社もエンジニアの女性は3割?ほどでしょうか?

女子って、いつまでが女子なのかという問題はさておき、
一応、「エンジニア女子」。

でも、私の場合、元々は文系だし、
習慣や思考を変えなきゃなーと思うのですが、まだまだ難しい。
とりあえず、学ぶ癖と習慣を身につけなきゃですね。

いつか、エンジニア女子会とかもできたらいいな。

ヘッダー固定

デザインちょこちょこいじろうかなー。

って事で、ヘッダーの色をかっこいい感じのネイビー(#192E3D)にしてみたんですが。
ちょっと重めでなんだかしっくりこない・・・。

女子力が低い感じするので、そのうちまた変えます。
明るめの暖色がいいかなー。

サイトのイメージカラーになるので、もうちょっとじっくり考えよう(= ̄ ρ ̄=)

そんで、ついでにPCはヘッダー固定にしてみた。
今回はCSSでヘッダーに追加する感じで固定。

.site-header {
      position: fixed;
      z-index: 999;
      top: 0;
    }

本当はjsとかで可変のヘッダー固定とかしたいな。
ちょっとデザイン考えるかな。

意識高い系デザイン?

深夜に通販サイトを見だすと止まら無いのは私だけだろうか。
某通販サイトだと購入完了画面まで、とってもスムーズだから抵抗無く購入してしまうんですよねー。
昔から使い慣れてるのもあるかな?
こういう時はUI、UX的な人間の動きに対するデザインが活きているのかな?

スマートでカッコイイからといって使いやすいとは限らない。
でも、使いやすいサイト=正解でもない。
全然見にくいし訳わからんけどブランド思想的にはそれが正だとするところもあるって聞いた事もあるし。(アパレルなどのブランド重視は特に)

「意識高い系」がテーマな日記なのだとしたら、それに寄せたデザインがしたいなー。
意識高い系てなんだろ? ボルダリング? ホットヨガ? スムージー? 朝活?
意識高い系デザインは? ちょいトンがったデザインとかなのかしら?

まぁ、目指すところはレスポンシブでスマホファーストですねー✨
↓↓ レスポンシブ参考サイトとかとか
http://responsive-jp.com/

スマホファーストならやっぱりワンカラムかなー。

でも、デザイン自由だから楽しいなーえへへ。

CSSについてThink

シンプルで分かりやすい事は正義だと思う、今日この頃。

CSSやHTMLに触れる事も多いのですが、
それがベストだったか?最良だったか?と、問われると、そんな事全然なくて、もっとこうすればよかったかなぁ、もっとあぁすればよかったかなぁ。んーでも、、、、ぬぐぐぐ。
と、自問自答して手が遅くなって、って事もあるのでここらでCSS設計のポイントを自分なりに振り返る。

求める
・再利用性
・明瞭性 (記述のルールが分かりやすい。
・拡張性
・保守性 (複数人関わっても崩れないように。

CSS思想からThink
・OOCSS (Object Oriented CSS
オブジェクト指向
webページをレゴの集まりレゴを積んでいくイメージ。
パーツはパーツごとで完結させる。パーツパーツに命名。
※スタイルを構造(storucture)と見た目(skin)に分ける書き方
構造(storucture)=サイズとか位置とか
見た目(skin)=色とかの装飾系

・BEM (Block Element Modifier
classで記述、使いまわせるようにする。
子孫セレクタではなく、個別で命名。

.block__element--modifier{
}

これはアンダーライン「__」やハイフン「–」が気になるなぁ(´Д` )
これはこれでありなのだろうけど。そうかそうかそうなのか。

・SMACSS (Scalable and Modular Architecture for CSS
スマックスおじさん→https://smacss.com/
ルール
・Base ベース
・Layout レイアウト
・Module モジュール
・State ステート(状態
・Theme テーマ

思想を取り入れて、ガチガチにってのも難しいだろうし。
思想は思想で頭に入れて、色々良いところ取りしたいところ。

もっともっと深堀したいけど沼そうだし。一旦これぐらいで。
CSSの話をするという事は当然、Sassも気になるところだけど、それはまた別の機会に。

Webフォントとタイムマネジメント

1日が24時間じゃ足りなーい。

って思うけど、それじゃあ1日が48時間になれば解決するのかと言われれば、そういう問題でもないですよね(´Д` )

簡単に言ってしまえば、「タイムマネジメント」とか言われる事なんでしょうけど、なかなか難しいのが現実ですよね。

自分の時間の容量と、内容のバランスがちゃんとできるようにならなきゃなー。

もけもけ( ;´Д`)

話変わって、最近気になる「webフォント」。

実はまだ、ちゃんと利用した事無いし、知識も浅いのでのでメモメモ。

基本的な使い方としてはCSS3からの導入。

フォントファイルを紐づけて利用。

Webフォントの指定法もいろいろある見たいだけど、とりあえず下記で試してみようかなー。


@font-face {

  font-family: もけもけ;

  src: url(' ファイルのURLパス') format('フォーマット名');

}


CSS

body {

  font-family: 'もけもけ';

}


日本語webフォントいいですよねー✨かわいいフォントや見やすいフォントがたくさんあるなぁー。

あとは、Google Fonts周りも機会があれば使ってみたですよねー。
Noto Sans Japanese??とやらも気になる。
今後は画像を利用した見出しやボタンじゃなくて、webフォントを利用したサイトの方がイケてそうですね。

日本語webフォントもっと深堀してみよーっと。

応用として、webフォントをアイコンとして利用も可能みたいだから、このサイトのアイコンもwebフォントにしてみようかなー。

色々見てたりしたらあっと言う間ですね、いかんいかん。

タイムマネジメントしなきゃー。