.

自己紹介

.

I

.

LOVE

.

ME💓

.

みんな大好きCSS

by denari (ナルシスト)

.

最近本を買いました

ごめんなさい、全然読めてないです…

.

CSSでいろいろチャレンジ!

  • 割と新しい設計思想に触れてみた
  • animationに触れてみた
  • CSSマジシャンになってみた
.

CSS設計の話

.

やってみた設計

  • css modules
  • atomic design
.

css modules

.

css modulesについて

  • kosen10s/css-animathon
  • CSSの影響範囲の限定化
.

cssをこんな風に書いて…

.header
  display block
  margin 60px 0

.title
  font-size 100px
  line-height 120px
  margin-left -10px

.description
  font-size 24px
  margin-bottom 10px
.

js内でimportしてあげると

import React from 'react';
import styles from '../stylus/app_header.styl'
export default class AppHeader extends React.Component {
  render() {
    return (
      <header className={ styles.header }>
        <h1 className={ styles.title }>CSS Animathon</h1>
        <p className={ styles.description }>description here</p>
      </header>
    );
  }
}
.

css modules 所感

  • クラスの命名規則がなくて済みそう
    • Good Bye BEM...
  • コンポーネント指向と相性が良い
  • 欲を言えばjsx内にcssを書いちゃいたい
    • もしかしたらイケるかも??引き続き案件
.

atomic design

.

先に謝ること

  • 実はコード書いてません
  • デザインツールsketchを通じて触れました

atomic designとcss modulesを組み合わせた方式でいろいろやりたかったのですが、 残念ながら手が追いつきませんでした🙇

.

atomic designってなによ

以下の5つの種類にwebサイトの要素を分解する

  • atoms / 原子 - 「ボタン」ぐらいの粒度
  • molecules / 分子 - 「検索フォーム」ぐらいの粒度
  • organisms / 有機体 - 「navigation bar」ぐらいの粒度
  • templates / テンプレート - その名の通りテンプレート
  • pages / ページ - 実際のページ
.

試した様子

気になる人がいたらまたあとでじっくりお見せします。 App Apeを題材にしているよ!

.

やってみた所感

  • 基本的に保守性は上がりそう
  • atoms / molecules / organisms の境界の判断が難しい
  • componentの分け方自体をこれにしたら良さそう
  • 分類が多すぎてめんどくさい印象
.

sketchとatomic design

sketchでatomic designに従った構造のファイルを作成するのも、 デザインファイルとしての保守性が上がりそうだった。

しかしsketchでは各モジュールが状態を持てないため、 symbolの数がむやみやたらに増えてしまってめんどくさかった。

ただし、デザインファイルはimport系の機能が弱いので これを実業務に採用するかは結構怪しい。

.

animation

.
.
.

animationの感想

  • transitionが便利だなあってなった
  • New App Apeでも使っていきたい
  • 最終的にこれはデザイナーが触るべきな気もした
  • プロパティが多いけど見た目に華やかなので根気勝負
.

CSS魔術

.

ラジオボタンのスタイル

.

実は...

ラジオボタンやチェックボックスは、大きさを変える程度の指定しかCSSではできない。 ブラウザ / OS標準のラジオボタン / チェックボックスが表示される。

.

魔術で何とかする

擬似セレクタ :before / :after と擬似クラス :checked を使った。

input[type=radio] {
  position: absolute;
  transform: scale(1.6);
  visibility: hidden;
  top: 2px;
  &:before {
    content: '';
    display: block;
    visibility: visible;
    position: absolute;
    top: -3px;
    left: -4px;
    height: 20px;
    width: 20px;
    z-index: -2;
    background-color: $light-gray-color;
    transform: scale(0.6125);
  }
  &:checked:after {
    content: '';
    display: block;
    visibility: visible;
    position: absolute;
    top: 2px;
    left: 1px;
    height: 10px;
    width: 10px;
    z-index: -1;
    background-color: $dark-gray-color;
    transform: scale(0.6125);
  }
}
&-label {
  padding-left: 25px;
}
.

css魔術所感

  • 擬似セレクタの便利さ
  • 誰が保守するんだ問題
.

One more thing...

.

This slide!!!

.

CSSを駆使して作ってます

  • denari/css_slide
  • JSはほとんど使っていない
    • syntax highlightの部分のみ
.
.

昨日の20時の僕の思いつき

これってもしかして、CSSだけでスライドの遷移ができるのでは??

  • anchorの子要素として各ページを配置
  • anchorの子とはいえ、position: fixedで全画面に広がるように
  • :focus 以外のページの不透明度をゼロに
  • tab / shift + tab でページ送り・戻し
.
.

cssスライド所感

  • 本当にムダでメリットがない
  • 万が一フォーカスが外れるとページのめくり直し
  • html / cssを変態的に使うと変なものが生まれるんだなあ
.

まとめ

.

CSSやっていきたい

.