「html」タグアーカイブ

Sass 始める時に参考にしたこと

投稿日時: 投稿者:
返信

▼ 設計手法について

設計手法については幾つかあるらしいですが，なんとなく主流は BEM と呼ばれるものらしい．

BEM

3つの要素を元に名前を設定する．
Block, Element, Modifier

Block__Element–Modifier
Block–Modifier

▼ Sass の表記

div タグの class 属性などは以下のように記述する．

class セレクタの始まりを「.」にする
id セレクタの始まりを「#」にする

▼ Sass 主な機能

& 親参照

以下の html と main.scss をビルドすると添付のような文字色で表示される.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./dist/css/main.css">
  <title>Document</title>
</head>
<body>
  <p>赤い文字</p>
  <p class="green">緑文字</p>
  <p><span class="blue">青い文字</span></p>
</body>
</html>
1
2
3
4
5
6
7
8
9

/* main.scss */
p {
  color: red;
  &.green {
    color: green;
  }
  .blue {
    color: blue;
  }

▼ mixin

@mixin で定義して，@include で適用する．

▼ インターポレーション(#{})

変数の参照

参考:
今更ながらBEMについてと、それに対応するSassについてまとめてみる
BEMをSassで快適に書く方法

▼ sass と scss の違いは？

記法のことを指していることが多く，scss 記法が CSS に近いルールで記述できる．
主流はこちらになっている．

HTML，CSS3 メモ

投稿日時: 投稿者:
返信

いまさらながらですが，ちゃんとHTML，CSS3とか見たことがなかったので，体系立てて少し見てみました．
用語，仕様が複雑ですね… ベンダープレフィックスとか…

▼ レイアウトの変遷

1. テーブルレイアウト
2. float
3. Flexbox
4. Grid Layout

レイアウトには流行廃りがあって，上記のような感じらしい．
プログラマであれば，今後は bootstrap4 あたりをチェックすれば良いと思う．
でも結局なんとなく全部把握しておく必要があるかも…

参考: CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門

日本語対応！CSS Flexboxのチートシートを作ったので配布します

▼ ブラウザ間の差分をなくす方法

html 各要素のブラウザ毎に異なる差異をなくしてスタイルをリセットするスタイルシートを適用すれば良い．
sanitize.css

リセットCSS，ノーマライズCSS，サニタイズCSSなど初心者には区別が付けにくい言葉があったので，ついでに調べておく．

【サンプルあり】リセット・ノーマライズ・サニタイズCSSの違いと使い方

▼ html ファイルから css ファイルの指定方法

1

<link href="css/base.css" rel="stylesheet" type="text/css">

▼ css セレクタ

より後から読み込まれたスタイルが適用される．
・要素の状態によって適用できるセレクタに擬似クラスがある．
・全ての要素に適用する「*」．
・擬似要素 :first-letter / :before / :after

参考: CSS 複数のセレクタを指定する/絞り込むサンプル
参考: CSSのセレクタとは？覚えておきたい25種類と書き方
参考: cssを書く人がブクマしておきたいジェネレーターサイト8選

▼ css ショートハンド

margin プロパティなどの数字の指定方法は以下の通り．

1つ 4辺とも同じ値
2つ 上下，左右
3つ 上，左右，下
4つ 上，右，下，左

指定しない場合，デフォルトになる

参考: 余白については以下の記事が良かった．

CSSのmarginとは？paddingとは？余白の指定方法まとめ

▼ 特殊文字

1
2
3
4
5

     &nbsp;    &#160;    ノーブレークスペース（前後で自動改行しないスペース）
"    &quot;    &#34;    クォーテーション（引用符）
&    &amp;    &#38;    アンパサンド
<    &lt;    &#60;    小なり
>    &gt;    &#62;    大なり

&#以降はUnicodeのコード番号

▼ レスポンシブ対応の仕組み

css で以下のようにメディアクエリを記述し，スクリーンサイズで処理を分岐する．

1
2
3
4
5
6
7
8

@media screen and (min-width:480px) {
    /*　画面サイズが480pxからはここを読み込む　*/
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/

Atom で HTML を編集する際に知っておくと便利なこと

投稿日時: 投稿者:
返信

▼ Emmet

【概要】
Emmet とは HTML，CSS コーディングをサポートするプラグイン．
【使い方】
タグ入力後，「Tab」キーを押下
【例】
・ html の雛形を入力する
「!」入力後，「Tab」キーを押下

・ 「要素.class名」の指定
div.box と入力し，「Tab」キーを押下

1

<div class="box"></div>

・ 「>」でネストを指定
div>p と入力し，「Tab」キーを押下

1
2
3

<div>
  <p></p>
</div>

参考: EMMETの使い方

▼ フォルダ配下の検索方法を調べる

command + shift + f
「ファイルまたはディレクトリのパターン」を指定しないと検索できないことに注意．

▼ html を整形する

“atom-beautify”プラグインで整形することができる．

エディタ上で右クリック > Beautify editor contentsをクリック
ショートカットキーは，control + option + b(eautify)

▼ ファイルの差分を調べる

“split-diff”プラグインを使用する．

Sass ビルド環境構築のメモ

投稿日時: 投稿者:
返信

osx で Sass のビルド環境を作る際のメモ．

1. Node.js のインストール
2. 作業用フォルダの作成 (package.jsonなど)
3. Gulp のインストール
4. Sass 環境に必要なパッケージをインストール
5. gulp でビルドする

$ sudo npm install gulp -g  // gulp インストール
$ sudo npm install          // Sass 環境に必要なパッケージをインストール

補足:
Atom に EditorConfig プラグインを適用するとチームでコードスタイルを統一することができる．

セットアップ時に以下のエラーが出力されてビルド出来なかったので，以下のコマンドで対処した．
permission denied, mkdir /node_modules/node-sass/build’

$ npm config set user 0
$ npm config set unsafe-perm true

参考: Ubuntuにnode-sassを入れようとしたらつまづいた話
参考: 『現場のプロが本気で教える HTML/CSSデザイン講義』のサンプルデータ
参考: 「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」の公式サポートサイト