or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
![image alt](https:// "title") | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | Emoji list | ||
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Syncing
xxxxxxxxxx
CSS Talk vol.3に参加したメモ
tags:
CSS
勉強会
グリッドレイアウト
CSS設計
13:30 開場
14:00 勉強会の案内・説明
14:10〜16:30 セッション
16:30〜 懇親会 (勉強会と同会場にて)
18:00 終了
勉強会の案内・説明
司会 にまたさんの導入
安田さんのご挨拶
開いた理由
「グリッドレイアウト これまでとこれから」森永哲平
自己紹介
会社 グラッドキューブ プロダクト開発チーム エンジニア
メディア SPAIA
グリッドレイアウトとは
画面を縦横に分断する~~なんちゃらーーーあとでIT用語辞典調べよう
格子=グリッド
方眼紙があってそこに乗せていく感じ
なぜよく使われるの?→すっきりとした見やすい構成になる!
これまでのグリッドレイアウト
CSSフレームワークを使う方法(最もポピュラー)
画面幅を12分割することが多い
どれだけの幅を使うかをクラスで指定する
たまにJSのライブラリを使う方法がある
縦横色んな大きさのブロック サイトMasonry
画面幅に応じて配置が動的に変わるときとか
グラッドキューブWebSite
サービスのところ。何%で配置を行ってます
Jeet というフレームワーク
グリッドレイアウトに特化したやつ 軽いらしい
スタイラスがどうの? スタイラスとは
フレックスボックスとの相性は悪い
CSSgridlayout
ホットなトピック
W3Cにて使用策定中 2/9に勧告候補
CSSだけでグリッドレイアウトできる!
各ブラウザが正式採用している!
対応状況
Firefox52~, Chrome57~, Safari iOS10.3~,とかとか
IEとEdge
最初にMicrosoft導入。だけどベンダープレフィックスが必要で仕様が古いままらしい。
Chromeは軽いバグがあるらしい
デモ
html
div>p*4 class=Area1~4
main{
display:grid;
grid-template-culumns: 100px 100px 100px;
列の幅と列の高さを指定し、
各列、各行の間隔を指定する
}
こんな書き方もできる
grid-template-culumns: 100px 1fr 2fr;
1列目は100px
2,3列目は残りの幅を1:2で分割する
.aria3{
grid-culumn: 1/3; //列の開始位置、終了位置の指定 1番から3番までの2列分
grid-row2; //行,行の開始位置の指定 2番から3番までの1行分
}
左端が1番
一番上の端っこが1番
HTML,CSSのコードはcodePen
https://speakerdeck.com/m_n_t_p/guritudoreiauto-koremadetokorekara
これからのグリッドレイアウト
普及するまでは時間がかかる?
まとめ
Flexbox → 縦または横の一方向だけの指定
CSS Grid Layout → 両軸対応
うまくつかいわけよう
デザイナーやディレクターの方にlayoutの列の幅や行の高さ、列、行の間隔とか具体的な指示を下さい
px単位の指示ほしいよね~デザイナーの人よろしく~って話
CSSフレームワーク
JSライブラリ
CSS Grid layout
場合に応じてうまく使い分けろ
実装が楽になるはず…
「SC5 style guide generator の話」 後藤知宏
CSS設計について考える
株chatbox
CSS設計とは
FRONTEND CONFERENE
イベントのサイトとかはCSS設計不要でしょ
最終的に形が整っていればおっけ~
わざわざ設計する必要なさそうな話
CSS設計の目的
正しさ 正しい書き方をより簡単に行えるように
どんな人が入ってきても一番簡単なことを簡単に書けるようにする
CSSでぐちゃぐちゃに
何でもできるツールを何でもできないところに落とし込むのが設計
=ルールを導入する
信頼性の高い状態で設計できる
分けて考えるという当たり前のこと?
共通化しない?
TOPはTOPだけとか
設計に時間を割く必要?
なぜ共通化するのか こういう時にCSS設計が必要
50ページの制作を行うのに50倍の予算がつかない場合
構築時の担当者を未来永劫保存しておきたい場合
で、やるとして
破たんするとき
規格外のクライアント要求
健忘症的デザイナー
思いやり不足 ちゃんと伝わってない
まぁうまいこといかない コミュニケーション不足!
CSS設計はちゃんと伝えないと破たんする
だからといってCSSの話をお客さんとかデザイナーに話してもちょっとむり
スタイルガイドってツールがあるよ!
最近は
SC5-styleguide
CSS設計の意図を伝えるつーる
CSSのドキュメントをコメント
まあいろいろ
フォルダをつくる
いくつかコマンドをたたく
なんかいろいろ
コンポーネント集一覧みたいなのがWebで作れる
規約、ルールが作れる
ルール内における変更に強くなる
みんなにとって楽なCSS設計!
タグのmixinsが便利 使えます。 後で調べる
JSの関数みたいに使える
スタイルガイドは必要ない場合の方が多いです
ただ
意外と大変
きれいなCSSを書かなきゃいけない
コンポーネント間のマージなどstyleguideの中だけでは表現できない
HTMLモックなども同時に作成できたらGOOD
面倒でそのうちメンテされなくなる
作るならちゃんとワークフローを
お客さんに公開してメンテの意識を
自動デプロイは必須
CSS設計は大事な技術ではある
何かの時に対応できるように、スキルアップのために意識していこう!
「エンジニアとデザイナーとの距離」安田学
https://www.slideshare.net/manabuyasuda1/ss-73215731?from_m_app=ios
TAMのマークアップエンジニアの人
デザイナーとエンジニアの距離感について
CSS設計って大変
コードを工夫するだけでは難しい
OOCSS的なCSS設計手法にもデメリットがある
問題点は大きく二つ
エンジニア目線
デザイナー目線
デザイナーとエンジニアの認識のずれが問題
CSSのベストプラクティスの一つに「意味のある名前にする」
デザインの意図やコンテキストをコードの名前に使う。
デザインの意図=その見栄えにしている意図
どこをクリックしてほしいのかを考える
そのボタンをなぜ目立たせるのか
ページの優先度によって書き換えている場合があるので
コンテキスト 前後の文脈や状況のこと
トップページにあるものなのか、詳細ページにあるものなのか。
見栄えが30分後に変わっていても、デザインの意図やコンテキストは基本的には変わらないはずである
「どんな場所でつかいますか?」
ちゃんと質問してコミュニケーションをとる
デザインに対する認識のずれをなくしていこう
EnduringCSS(ECSS)
コンテキストを重視している設計手法
ecss.ioをみろ!
コードぐりっと
.header
.contents
.footer
↓
.st-header
.st-contents
.st-footer
Structure=全部のページで使えるんだな
この色はこういう時に使いますとか
フォントサイズは14px16pxで、15pxが出てきたときに
どういう使い分けをしているのかとか
メリット
デメリット
色んなページでHTMLの変更をしなくちゃいけないとか
コミュニケーションコストの話
エンジニアからデザインカンプの疑問を聞いていく
デザインカンプを作る前にエンジニア側から伝えておく
分業は悪くないけどコミュニケーションをうまく取れないことが多い