What's New Qiita

20190126のCSSに関する記事は4件です。

  • 投稿日：2019-01-26T15:14:01+09:00

[ SASS ] display : flex をベンダープレフィックス対応にする mixin

今時flexをベンダープレフィックス対応にする需要が
どの程度あるのか疑問ですが、sass学習の一環として作ってみました。

※括弧内に入れた文字列が間違っていたり空だった場合は、
デフォルト値で出力するようになっています。

SCSS

_mixin.scss で読み込むようにします。

_mixin.scss
// display: flex
// ---------------------------------------- //
@mixin flex {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
}

// flex-direction
// - row  : row
// - rowR : row-reverse
// - col  : column
// - colR : column-reverse
@mixin flexDirection($value: row) {
    @if $value==rowR {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    @else if $value==col {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    @else if $value==colR {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    @else {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

// flex-wrap（基本：nowrap）
// - wrap
@mixin flexWrap($value: nowrap) {
    @if $value==wrap {
        flex-wrap: $value;
        -ms-flex-wrap: $value;
        -webkit-flex-wrap: $value;
    }
    @else {
        flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
    }
}

// justify-content（基本：start）
// - sb : space-between
// - sa : space-around
// - center
@mixin justifyContent($value: start) {
    @if $value==sb {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    @else if $value==sa {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
    @else if $value==center {
        justify-content: center;
        -ms-justify-content: center;
        -webkit-justify-content: center;
    }
    @else {
        justify-content: start;
        -ms-justify-content: start;
        -webkit-justify-content: start;
    }
}

// align-items（基本：stretch）
// - start
// - end
// - center
// - baseline
@mixin alignItems($value: stretch) {
    @if $value==start {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    @else if $value==end {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    @else if $value==center {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    @else if $value==baseline {
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }
    @else {
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
}

// align-content（基本：stretch）
// - start
// - end
// - center
// - sb : space-between
// - sa : space-around
@mixin alignContent($value: stretch) {
    @if $value==start {
        -ms-flex-line-pack: start;
        align-content: flex-start;
    }
    @else if $value==end {
        -ms-flex-line-pack: end;
        align-content: flex-end;
    }
    @else if $value==center {
        -ms-flex-line-pack: center;
        align-content: center;
    }
    @else if $value==sb {
        -ms-flex-line-pack: justify;
        align-content: space-between;
    }
    @else if $value==sa {
        -ms-flex-line-pack: distribute;
        align-content: space-around;
    }
    @else {
        -ms-flex-line-pack: stretch;
        align-content: stretch;
    }
}

// order（数値）
@mixin order($value) {
    -webkit-box-ordinal-group: $value;
    -ms-flex-order: $value;
    order: $value;
}

// flex-basis（数値）
@mixin flexBasis($value: auto) {
    -ms-flex-preferred-size: $value;
    flex-basis: $value;
}

// flex-grow（数値）
@mixin flexGrow($value) {
    -webkit-box-flex: $value;
    -ms-flex-positive: $value;
    flex-grow: $value;
}

// align-self（基本：auto）
// - start
// - end
// - baseline
// - stretch
@mixin alignSelf($value: stretch) {
    @if $value==start {
        -ms-flex-item-align: start;
        align-self: flex-start;
    }
    @else if $value==end {
        -ms-flex-item-align: end;
        align-self: flex-end;
    }
    @else if $value==center {
        -ms-flex-item-align: center;
        align-self: center;
    }
    @else if $value==baseline {
        -ms-flex-item-align: baseline;
        align-self: baseline;
    }
    @else if $value==stretch {
        -ms-flex-item-align: stretch;
        align-self: stretch;
    }
    @else {
        -ms-flex-item-align: auto;
        align-self: auto;
    }
}

記入例

例えばSCSSで以下のように記述すると…

style.scss
.example {
    @include flex;
    @include justifyContent(sb);
}

このように出力されます。

style.css
.example {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-01-26T15:14:01+09:00

SASSで display : flex をベンダープレフィックス対応にする mixin

今時flexをベンダープレフィックス対応にする需要が
どの程度あるのか疑問ですが、sass学習の一環として作ってみました。

※括弧内に入れた文字列が間違っていたり空だった場合は、
デフォルト値で出力するようになっています。

例えばSCSSで以下のように記述すると…

style.scss
.example {
 @include flex;
 @include justifyContent(sb);
}

このように出力されます。

style.css
.example {
 display: flex;
 display: -ms-flex;
 display: -webkit-flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
}

_mixin.scssにまとめておくと便利ですね。

_mixin.scss
// display: flex
// ---------------------------------------- //
@mixin flex {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
}

// flex-direction
// - row  : row
// - rowR : row-reverse
// - col  : column
// - colR : column-reverse
@mixin flexDirection($value: row){
    @if $value == rowR {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    } @else if $value == col {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    } @else if $value == colR {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    } @else {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

// flex-wrap（基本：nowrap）
// - wrap
@mixin flexWrap($value: nowrap) {
    @if $value == wrap {
        flex-wrap: $value;
        -ms-flex-wrap: $value;
        -webkit-flex-wrap: $value;
    } @else {
        flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
    }
}

// justify-content（基本：start）
// - sb : space-between
// - sa : space-around
// - center
@mixin justifyContent($value: start) {
    @if $value == sb {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    } @else if $value == sa {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    } @else if $value == center {
        justify-content: center;
        -ms-justify-content: center;
        -webkit-justify-content: center;
    } @else {
        justify-content: start;
        -ms-justify-content: start;
        -webkit-justify-content: start;
    }
}

// align-items（基本：stretch）
// - start
// - end
// - center
// - baseline
@mixin alignItems($value: stretch){
    @if $value == start {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    } @else if $value == end {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    } @else if $value == center {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    } @else if $value == baseline {
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    } @else {
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    } 
}

// align-content（基本：stretch）
// - start
// - end
// - center
// - sb : space-between
// - sa : space-around
@mixin alignContent($value: stretch){
    @if $value == start {
        -ms-flex-line-pack: start;
        align-content: flex-start;
    } @else if $value == end {
        -ms-flex-line-pack: end;
        align-content: flex-end;    
    } @else if $value == center {
        -ms-flex-line-pack: center;
        align-content: center;
    } @else if $value == sb {
        -ms-flex-line-pack: justify;
        align-content: space-between;   
    } @else if $value == sa {
        -ms-flex-line-pack: distribute;
        align-content: space-around;
    } @else {
        -ms-flex-line-pack: stretch;
        align-content: stretch;
    }
}

// order（数値）
@mixin order($value){
    -webkit-box-ordinal-group: $value;
    -ms-flex-order: $value;
    order: $value;
}

// flex-basis（数値）
@mixin flexBasis($value: auto){
    -ms-flex-preferred-size: $value;
    flex-basis: $value;
}

// flex-grow（数値）
@mixin flexGrow($value){
    -webkit-box-flex: $value;
    -ms-flex-positive: $value;
    flex-grow: $value;
}

// align-self（基本：auto）
// - start
// - end
// - baseline
// - stretch
@mixin alignSelf($value: stretch){
    @if $value == start {
        -ms-flex-item-align: start;
        align-self: flex-start;
    } @else if $value == end {
        -ms-flex-item-align: end;
        align-self: flex-end;
    } @else if $value == center {
        -ms-flex-item-align: center;
        align-self: center;
    } @else if $value == baseline {
        -ms-flex-item-align: baseline;
        align-self: baseline;
    } @else if $value == stretch {
        -ms-flex-item-align: stretch;
        align-self: stretch;
    } @else {
        -ms-flex-item-align: auto;
        align-self: auto;
    }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-01-26T14:17:52+09:00

CSS animation で遊び倒す　- star -

CSS animation day6 となりました。

本日は、夜空に浮かぶ星を表現したいと思います。

1. 完成版　

ダウンロード (17).gif

See the Pen yZeQYx by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. なぜか？　

　
background image に使うと良いですね、心が落ち着きます。

3. 参考文献

https://www.youtube.com/watch?v=aywzn9cf-_U
https://pastebin.com/gEfdRwgc

4. 分解してみる

❶.
ではやっていきましょう。
まずは背景を作ります。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>
</body>
</html>
styles.css
body{
    height: 100%;
    overflow: hidden;
    background: #090a0f
}

スクリーンショット 2019-01-26 13.36.15.png

❷.
星を作ります。
こちらから、星のbox-shadowをコピペします。長いです

スクリーンショット 2019-01-26 13.39.24.png

styles.css
#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    animation: star 50s linear infinite;
    box-shadow: //ここに、コピペしたやつを貼り付ける  
}

こうなります。

スクリーンショット 2019-01-26 13.44.06.png

❸.
stars:afterにも同じことをする

styles.css
#stars:after{
    content: '';
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: //ここにコピペする。
}

❹.
stars2、stars2:after、stars3、stars3:after にも同じことをする。

styles.css
#stars2{
    width: 2px;
    height: 2px;
    background: transparent;
    animation: star 100s linear infinite;
    box-shadow: //ここにコピペする。
}


#stars2:after{
    content: '';
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
　　　　　　　　box-shadow: //ここにコピペする。


#stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    animation: star 150s linear infinite;
    box-shadow: //ここにコピペする。
}

#stars3:after{
    content: '';
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
　　　　　　　　box-shadow: //ここにコピペする。

}

大小様々な綺麗な星空ができました。

スクリーンショット 2019-01-26 13.57.37.png

❺.

最後です、アニメーションで動かしましょう。
雨と同じ、translateY を使います。

styles.css
@keyframes star{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(-2000px);
    }
}

完成！

ダウンロード (17).gif

星の素材をほとんどコピペし、keyframe で上下に動かしただけでしたが、
こんな綺麗な表現ができます。

それではまた明日！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-01-26T11:19:05+09:00

position: absoluteした要素はdisplay: blockになる

いや当たり前だろって人もいるだろうけど、意外と知られていないやつ

spanや疑似要素::before,::afterのdisplayのデフォルト値はご存知の通りinlineですが

span {
  position: absolute;
}

することで、display: inlineが解除されブロック要素になるんですね。
（よく考えたら絶対位置で配置されたインライン要素ってなんだ？ってなりますが）

span {
  position: absolute;
  display: inline;
}

と明示的に指定しても無駄です
ただしインライン要素以外は効く

参考に
https://codepen.io/anon/pen/BMjOmE

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧