yuririn

// 四角で囲う
.rectangle{
  color:#fff;
  background: rgb(255, 80, 49);
  position: relative;
  padding: 20px 30px;
  display: inline-block;
  text-align: center;
  position: relative;
  overflow: hidden;

yuririn

// 押したらくぼむ
.press {
  transition: .3s;
  border-radius: 5px;
  background: linear-gradient(to bottom, #ffa670 0%, #fc5800 65%);
  text-decoration: none;
  padding: 15px 30px;
  display: inline-block;
  color: #ffffff;
  text-shadow: 1px 1px 1px #912C1D;

yuririn

//モジュール
const gulp = require('gulp')
const sass = require('gulp-sass')
const browserSync = require('browser-sync')
const plumber = require('gulp-plumber')
const notify = require('gulp-notify')
const sourcemaps = require('gulp-sourcemaps')
const autoprefixer = require('gulp-autoprefixer')

//開発ディレクトリ

yuririn

//プラグイン
const gulp = require('gulp')
const browserSync =require('browser-sync')

//ブラウザシンクさせる対象のフォルダ
const src = 'src/'

//管理するファイルのパス
const srcDir = {
  html:[src + '*.html'],//html第1階層まで

yuririn

/* css */
.list-family ol{
  list-style: none;
  counter-reset: cnt;
  padding-left: 0;
}
.list-family ol li{
  margin-bottom: 8px;
}
.list-family ol li::before{

yuririn

/* css */
.numbering {
  margin: 0;
  counter-reset: number;
}
.numbering h2::before {
  counter-increment: number;
  content: counter(number);
  padding-right: 5px;
}

yuririn

- var author = ['ゆうさん', 'ゆきぱんだ', 'Tantan', 'かみーゆ', 'しゃーまん']
ul
  each item, index in author
    li #{index + item}

yuririn

//- ごちゃ混ぜ
p こんにちは。<br>フロントエンドエンジニアの <strong>かみーゆ</strong> です。

//- =でコンテンツを渡す
p= 'こんにちは。フロントエンドエンジニアのかみーゆです。'

//- エスケープ
p= '段落は<p>タグで囲みます'

//- エスケープしたくない

yuririn

//- css
  style.
    a{
      color: #333;
      background: #aaa;
    }
    
//- js
  script.
    var flug = true;

yuririn

p こんにちは。
  br
  | フロントエンドエンジニアの
  strong かみーゆ
  | です。