<script>
$(function(){
    $('.button').click(function(){
        var pushed = $(this).text();
        var inputLabel = $('#boxinputLabel');

        var h1Text = inputLabel.text();
        h1Text = h1Text.replace("×", "*");
        h1Text = h1Text.replace("÷", "/");
        if (pushed == '=') {
            // 計算
            inputLabel.text(eval(h1Text));
        } else if (pushed == 'AC') {
            // 全てクリア
            inputLabel.text('0');
        } else {
          　alert(inputLabel.text())
            console.log(inputLabel.text());
            if (inputLabel.text() == '0') {
                inputLabel.text(pushed);
            } else {
                inputLabel.text(inputLabel.text() + pushed);
            }
        }
    });
});

<style>
* {
    font-family: 'Inconsolata', monospace;
    color: #555;
　}
body
{
      background-color: white;
}
body > * {
    margin: 3px;
    padding: 10px;
}
.container {
margin: auto;
padding:auto;
display: grid;
grid-template-columns: 40px 40px 40px 40px;
grid-template-rows: 80px 40px 40px 40px 40px 40px;
width: 220px;
background-color: #E0DEDA;
grid-gap: 20px;
}
.container > * {
align : center;
}
#boxinputLabel{
grid-column: 1 / span 4;
grid-row-start: 1;
grid-row-end: 2;
background-color: #DFE9E9;
padding-left: 1rem;
padding-right: 1rem;
}

#boxAC {
grid-column: 1 / span 3;
grid-row-start: 2;
grid-row-end: 2;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box÷ {
width:10%;
grid-column: 4/ span 1;
grid-row:2;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box7 {
width:10%;
grid-column: 1/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;

}
#box8 {
width:10%;
grid-column: 2/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box9 {
width:10%;
grid-column: 3/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box× {
width:10%;
grid-column: 4/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box4{
width:10%;
grid-column: 1/ 4;
grid-row:4;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
#box5{
width:10%;
grid-column: 2/ 4;
grid-row:4;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
#box6{
width:10%;
grid-column: 3/ 4;
grid-row:4;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#boxMinus{
width:10%;
grid-column: 4/ 4;
grid-row:4;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box1{
width:10%;
grid-column: 1/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box2{
width:10%;
grid-column: 2/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box3{
width:10%;
grid-column: 3/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#boxPlus{
width:10%;
grid-column: 4 / 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box0{
grid-column:1 / span 2;
grid-row:6;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#boxTen{
width:10%;
grid-column: 3/ 4;
grid-row:6;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#boxEqual{
width:10%;
grid-column: 4/ 4;
grid-row:6;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}

$ npm install--global analyze-css

$ analyze-css --pretty--file examples/style.css > style.json

importjsonimportsysargs=sys.argviflen(args)<2:sys.exit('usage: python %s json_file'%args[0])withopen(args[1],'r')asf:jsn=json.load(f)forkeyinjsn['metrics']:print(key+','+str(jsn['metrics'][key]))

$ ls json/
project1.json   project2.json   project3.json

#!/bin/bashfor i in$(find json -name'*.json'-print)do
  echo$ioutf=${i%.*}.csv
  echo"metrics,value">$outf
  python css-metrics.py $i | sort>>$outfdone

$ ls-p
css-metrics.py  json/       mkcsv.sh
$ ./mkcsv.sh 
$ ls json
project1.csv    project2.csv    project3.csv
project1.json   project2.json   project3.json

importcsvimportsysimportoshdr=Falseargs=sys.argvusage='usage: python %s csv_file [ H ]'%args[0]iflen(args)<2:sys.exit(usage)iflen(args)>2:ifargs[2]=='H':hdr=Trueelse:sys.exit(usage)basename=os.path.basename(args[1])tpl=os.path.splitext(basename)projname=tpl[0]key_list=[]val_list=[]withopen(args[1],'r')asf:reader=csv.reader(f)header=next(reader)key_list.append('project')val_list.append(projname);forrowinreader:key_list.append(row[0])val_list.append(row[1])ifhdr==True:print(','.join(key_list))print(','.join(val_list))

#!/bin/bashhdr=H
for i in$(find json -name'*.csv'-print)do
  python csv-transpose.py $i$hdrhdr=done

$ ls-p
css-metrics.py      json/           mkcsv.sh
csv-transpose.py    merge-list.sh
$ ./merge-list.sh > css-metrics-data.csv

df<-read.table("css-metrics-data.csv",header=T,sep=",")

df<-df[,-1]df<-df[colSums(df)!=0]df<-df[apply(df,2,var)!=0]

is.bin<-function(x){return(setequal(unique(x),c(0,1)))}df<-df[!apply(df,2,is.bin)]

v<-cor(df,method="spearman")

install.packages("qgraph")

>library(qgraph)RegisteredS3methodsoverwrittenby'huge':methodfromplot.simBDgraphprint.simBDgraph

qgraph(v,minimum=0.7,layout="spring")

>colnames(df)[1]"colors""comments""commentsLength".....[19]"selectorsById""selectorsByPseudo""selectorsByTag"[22]"specificityClassAvg""specificityClassTotal""specificityIdAvg"[25]"specificityIdTotal""specificityTagAvg""specificityTagTotal"

df<-df[1:21]

df<-df[setdiff(colnames(df),c("emptyRules","imports"))]

v<-cor(df,method="spearman")qgraph(v,minimum=0.7,layout="spring",repulsion=0.6,legend=T,nodeNames=names(v[,1]),legend.cex=0.5,edge.labels=T,edge.label.cex=0.5,label.cex=0.8)

groups<-list(c(8,14),c(1,5,9,13,15,16,17,18,19),c(4,6,7,10,11,12),c(2,3))color<-c("#FF4081","#A1887F","#2196F3","#BDBDBD")

qgraph(v,minimum=0.7,layout="spring",repulsion=0.6,legend=T,nodeNames=names(v[,1]),legend.cex=0.5,edge.labels=T,edge.label.cex=0.5,label.cex=0.8,groups=groups,color=color,label.color="white",borders=F,border.color="white")

install.packages("car")

library(car)oldpar<-par(no.readonly=T)oma<-c(2,2,0,0)par(oma=oma)scatterplot(df$length,df$selectorLengthAvg,smooth=F,regLine=F,grid=F,xlab="length",ylab="selectorLengthAvg",pch=16,cex=1.5,reset.par=F)abline(v=median(df$length),col="red")abline(h=median(df$selectorLengthAvg),col="red")par(oldpar)

<divclass="header-banner"><pclass="title-en">subtitle</p><pclass="title-jp">メインタイトル</p></div>

.header-banner{position:relative;max-width:800px;width:100%;height:75%;margin:auto;margin-bottom:8px;padding:50px050px0;z-index:0;background:url(logo.png),linear-gradient(45deg,#edbdc5,#872434);background-repeat:no-repeat;background-position:5%10%;background-size:contain;}.header-banner:before{content:"";display:block;}.header-bannerp{text-align:center;color:white;transform:translate(-50%,-50%);text-shadow:4px4px5px#000000;z-index:2;width:100%;}.header-bannerp.title-en{font-size:2.5vmin;position:absolute;top:25%;left:50%;margin:0;padding:0;}.header-bannerp.title-jp{font-weight:bold;font-size:6vmin;position:absolute;top:65%;left:50%;margin:0;padding:0;}

background:url(表示対象画像),linear-gradient(グラデーション方向,開始色,終了色);

# Do not fallback to assets pipeline if a precompiled asset is missed.config.assets.compile=true

# Compress JavaScripts and CSS.config.assets.js_compressor=:uglifierconfig.assets.css_compressor=:scss

.contact{background-image:image-url("china.jpg");

<li class="portfolio">
        <a href="http://18.177.66.99/" class="portfolio-image">
          <img src="<%= asset_path "freemarket.png" %>" alt="制作事例１" width=500px height=280px >
        </a>
      </li>

$ rake assets:precompile RAILS_ENV=production

<imgsrc="./img/example.png">

<imgsrc="./img/Sample">

<imgsrc="./img/Sample.png">

#rectangle{
  background:#808080;
  margin:0px auto;
  width:400px;
  height: 200px;
  animation: fadeIn 10s;
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:1; }
}

section {
  background-color: white;

  h1 {
    background-color: black;
    color: white;
  }
}

section {
  background-color: white; }
  section h1 {
    background-color: black;
    color: white; }

section {
  background-color: white;
}

section h1 {
  background-color: black;
  color: white;
}

section { background-color: white; }

section h1 { background-color: black; color: white; }

section { background-color: white; }section h1 { background-color: black; color: white; }

div {
  background-color: gray;

  p {
    padding: 20px;

    span {
      color: red;
    }

  }

}

div {
  background-color: gray;
}

div p {
  padding: 20px;
}

div p span {
  color: red;
}

main {

  section {
    padding: 40px;

    +section {
      margin-top: 40px;
    }

    >h1 {
      font-size: 26px;
      font-weight: bold;
    }

  }

}

main section {
  padding: 40px;
}

main section+section {
  margin-top: 40px;
}

main section>h1 {
  font-size: 26px;
  font-weight: bold;
}

section {
  margin: 0 auto;
  width: 1200px;

  @media screen and (max-width:640px) {
    width: 100%;
  }
}

section {
  margin: 0 auto;
  width: 1200px;
}

@media screen and (max-width: 640px) {
  section {
    width: 100%;
  }
}

.child {
  color: red;

  &:hover {
    color: blue;
  }

}

.child {
  color: red;
}

.child:hover {
  color: blue;
}

.child {
  color: red;

  &::after {
    color: blue;
  }

}

.child {
  color: red;
}

.child::after {
  color: blue;
}

.child {
  color: red;

  &.brother {
    color: blue;
  }

}

.child {
  color: red;
}

.child.brother {
  color: blue;
}

.child {
  color: red;

  .parent & {
    color: blue;
  }

}

.child {
  color: red;
}

.parent .child {
  color: blue;
}

.child {
  color: red;

  &__modifed {
    color: blue;
  }

}

.child {
  color: red;
}

.child__modifed {
  color: blue;
}

.child {
  color: red;

  &+& {
    color: blue;
  }

}

.child {
  color: red;
}

.child+.child {
  color: blue;
}

// コメント 

/* コメント */

/*! コメント */

$boxHeight: 400px;

.box {
    width: 200px + 200;
    height: $boxHeight / 4;
}

.box {
  width: 400px;
  height: 100px; 
}

// _button.scssファイルをインポート
@import "_button.scss"; 

// _button.scssファイルをインポート(拡張子省略)
@import "_button";

 //複数scssファイルのインポート(拡張子省略)
@import "_button","_box","_text";

//glob(objectフォルダの中のscssを全てインポート)
@import "object/*.scss"

/* 変数設定 */
$width:500px;
$color:#aa443f;

/* 変数の使用 */
#maincontainer{
  width:$width;
  color:$color;
}

$boxRadius:10px !default;

.box1 {
  $boxRadius: 20px;
  width: 100px;
  border-radius: $boxRadius;
}

.box2 {
  width: 100px;
  border-radius: $boxRadius;
}

.box1 {
  width: 100px;
  border-radius: 20px; 
}

.box2 {
  width: 100px;
  border-radius: 10px; 
}

$caution:red;

.dataType {
  content: quote("$cautionColorのデータ型は"+type-of($caution));
}

.dataType {
  content: "$cautionColorのデータ型はcolor"; 
}

@function 自作関数名($引数){
  @return 戻り値;
}

@function Double($value) {
  @return round($value * 2);
}

.box{
  width: Double(300px);
}

$value:-15px;

.box {
  margin: abs($value);
}

.box {
  margin: 15px;
}

$value:15.4px;

.box {
  margin: round($value);
}

.box {
  margin: 15px;
}

$value:15.1px;

.box {
  margin: ceil($value);
}

.box {
  margin: 16px;
}

$value:15.9px;

.box {
   margin: floor($value);
}

.box {
  margin: 15px;
}

.box {
  background-color: rgba(red, .3);
}

.box {
  background-color: rgba(255, 0, 0, 0.3);
}

.box {
  background-color: lighten(red, 20%);
}

.box {
  background-color: #ff6666;
}

.box {
  background-color: darken(red, 20%);
}

.box {
  background-color: #990000;
}

.box {
  background-color: mix(red, blue, 50%);
}

.box {
  background-color: purple;
}

.box {
  background-color: saturate(gray, 50%);
}

.box {
  background-color: #c04141;
}

.box {
  background-color: desaturate(red, 50%);
}

.box {
  background-color: #bf4040;
}

.box {
  background-color: adjust-hue(red, 180deg);
}

.box {
  background-color: cyan;
}

.box {
  background-color: invert(red);
}

.box {
  background-color: cyan;
}

.box {
  background-color: grayscale(red);
}

.box {
  background-color: gray;
}

.box {
  background-color: complement(red);
}

.box {
  background-color: cyan;
}

$lists:"red","blue","yellow";

.box {
  background-color: nth($lists, 2);
}

.box {
  background-color: "blue";
}

$img_directory:"/img/bg/";

.box {
    background-image: url("#{$img_directory}background_box.jpg");
}

.box {
  background-image: url("/img/bg/background_box.jpg");
}

$value1:500px;
$value2:200px;

.box {
  width: #{$value1} - #{$value2};
}

.box {
  width: 500px - 200px;
}

@for $value from 1 to 5 {
  .mt_#{$value * 10} {
    margin-top: $value * 10;
  }
}

.mt_10 {
  margin-top: 10;
}

.mt_20 {
  margin-top: 20;
}

.mt_30 {
  margin-top: 30;
}

.mt_40 {
  margin-top: 40;
}

$color:"red";

.box {
  background-color: #{$color};
}

.box {
  background-color: red;
}

//mixin作成
@mixin box {
  background-color: red;
  color: white;
  padding: 20px;
  width: 100px;
  height: 100px;
}


//mixin使用
.box--large {

  //mixinの使用
  @include box;

  //mixinのスタイルの上書き
  width: 200px;
}

.box--large {
  background-color: red;
  color: white;
  padding: 20px;
  width: 100px;
  height: 100px;
  width: 200px;
}

//引数を使ったmixinの作成
@mixin box($width, $height) {
  background-color: red;
  color: white;
  padding: 20px;
  width: $width;
  height: $height;
}

//mixinの使用
.box--large {
  //mixin使用時に値を代入
  @include box(200px, 200px);
}

.box--large {
  background-color: red;
  color: white;
  padding: 20px;
  width: 200px;
  height: 200px;
}

//引数を使ったmixinの作成
@mixin box($width:200px, $height:200px) {
  background-color: red;
  color: white;
  padding: 20px;
  width: $width;
  height: $height;
}

//mixinの使用
.box--large {
  //mixinの使用　()は省略可能
  @include box();
}

.box--large {
  background-color: red;
  color: white;
  padding: 20px;
  width: 200px;
  height: 200px;
}

.parent {
  @mixin box {
    background-color: red;
    width: 200px;
    height: 200px;
   }

   .child {
     //スコープ内なのでコンパイルできる
     @include box;
   }
}

.others {
  //スコープ外なのでmixinが参照できずエラーになる
  @include box;
}

@mixin border {
  .parent & {
    @content;
  }
}

.child {
  .grandChild {

    @include border {
      border: 1px solid black;
    }

  }

}

.parent .child .grandChild {
  border: 1px solid black;
}

//extend用のクラス作成
.button {
  background-color: red;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 20px;
}

//extendの使用
.button--link {

  //buttonクラスを継承
  @extend .button;

  //buttonクラスのスタイルの上書き
  background-color: blue;

  //スタイルの追加
  font-weight: bold;
}

.button, .button--link { background-color: red; border-radius: 4px; font-size: 16px; padding: 10px 20px; }

.button--link { background-color: blue; font-weight: bold; }

%button {
  background-color: red;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 20px;
}

.button--link {
  //buttonクラスを継承
  @extend %button;

  //buttonクラスのスタイルの上書き
  background-color: blue;

  //スタイルの追加
  font-weight: bold;
}

.button--link { background-color: red; border-radius: 4px; font-size: 16px; padding: 10px 20px; }

.button--link { background-color: blue; font-weight: bold; }

$breakpointMaxSP: 640px;
$breakpointMinTAB: $breakpointMaxSP+1;
$breakpointMaxTAB: 980px;
$breakpointMinPC: $breakpointMaxTAB+1;

@mixin maxScreen($breakPoint) {
  @media screen and (max-width: $breakPoint) {
    @content;
  }
} 

@mixin minScreen($breakPoint) {
  @media screen and (min-width: $breakPoint) {
    @content;
  }
}

@mixin minMaxScreen($minBreakPoint, $maxBreakPoint) {
  @media screen and (min-width: $minBreakPoint) and (max-width: $maxBreakPoint) {
    @content;
  }
}

.box {

  @include maxScreen($breakpointMaxSP) {
    font-size: 16px;
  }

  @include minMaxScreen($breakpointMinTAB, $breakpointMaxTAB) {
    font-size: 18px;
  }

  @include minScreen($breakpointMinPC) {
    font-size: 20px;
  }

}

@media screen and (max-width: 640px) {
  .box {
    font-size: 16px;
  }
}

@media screen and (min-width: 641px) and (max-width: 980px) {
  .box {
    font-size: 18px;
  }
}

@media screen and (min-width: 981px) {
  .box {
    font-size: 20px;
  }
}

@each $変数名 in リスト{
  //スタイルなど
 }

$boxList: box1,box2,box3,box4;

@each $box in $boxList {

  .body-#{$box} {
    background-image: url(/img/bgimg_#{$box}.jpg);
  }

}

.body-box1 {
  background-image: url(/img/bgimg_box1.jpg); }

.body-box2 {
  background-image: url(/img/bgimg_box2.jpg); }

.body-box3 {
  background-image: url(/img/bgimg_box3.jpg); }

.body-box4 {
  background-image: url(/img/bgimg_box4.jpg); }

$isSubpage:true;

@if $isSubpage {
  .box {
    background-color: red;
  }
}

.box {
  background-color: red;
}

$pageType:1;

@mixin boxBackgroundColor {
  @if $pageType==1 {
    background-color: red;
  }

  @else if $pageType==2 {
    background-color: blue;
  }

  @else {
    background-color: gray;
  }

}

.box {
  @include boxBackgroundColor;
}

.box {
  background-color: red;
}

@while 繰り返しを継続する条件 {
  //スタイルなど
  //繰り返し方法を指定
}

```:scss
$value:100;

@while $value>0 {
  .mt#{$value} {
    margin-top: $value;
  }

  $value:$value - 10;
}

.mt100 {
  margin-top: 100; }

.mt90 {
  margin-top: 90; }

.mt80 {
  margin-top: 80; }

.mt70 {
  margin-top: 70; }

.mt60 {
  margin-top: 60; }

.mt50 {
  margin-top: 50; }

.mt40 {
  margin-top: 40; }

.mt30 {
  margin-top: 30; }

.mt20 {
  margin-top: 20; }

.mt10 {
  margin-top: 10; }

@for $変数名 from 開始の数値 through 終了の数値{
  //スタイルなど
}

@for $value from 1 through 5 {
  .box_#{$value} {
    margin-bottom: 50px * $value;
   }
}

.box_1 {
  margin-bottom: 50px;
}

.box_2 {
  margin-bottom: 100px;
}

.box_3 {
  margin-bottom: 150px;
}

.box_4 {
  margin-bottom: 200px;
}

.box_5 {
  margin-bottom: 250px;
}

@for $変数名 from 開始の数値 to 終了の数値{
  //スタイルなど
}

@for $value from 1 to 5 {
  .box_#{$value} {
    margin-bottom: 50px * $value;
  }
}

.box_1 {
  margin-bottom: 50px;
}

.box_2 {
  margin-bottom: 100px;
}

.box_3 {
  margin-bottom: 150px;
}

.box_4 {
  margin-bottom: 200px;
}

// src/scss/style.scssの1行目に書いた場合
@debug "debug test";

src/scss/style.scss:1 DEBUG: debug test

// src/scss/style.scssの1行目に書いた場合
@warn "debug test";

WARNING: debug test
         on line 1 of src/scss/style.scss

<body><svgviewBox="0 0 100 80"class="svgbox"><gfont-size="30"><textx="50"y="40"text-anchor="middle"dominant-baseline="central"><tspan>Animate!</tspan></text></g></svg></body>

.svgbox{fill:white;stroke:red;stroke-width:0.2px;font-family:"Impact";}

.svgbox{fill:white;stroke:red;stroke-width:0.2px;font-family:"Impact";stroke-dasharray:3px1px;/*点線の間隔を設定*/stroke-dashoffset:10px;/*線の位置を設定*/}

.svgbox{fill:white;stroke:red;stroke-width:0.2px;font-family:"Impact";stroke-dashoffset:10px;stroke-dasharray:3px1px;animation:move2seaseinfinitenormalforwards;/* animation: 左から「呼び出すキーフレーム名」「アニメーションサイクルの長さ」「速度変化」「再生回数」「繰り返し方法」「終了後のスタイル設定」を指定 */}@keyframesmove{0%{stroke-dashoffset:0;stroke-opacity:0;　/* 線の不透明度を0に */stroke-width:0.1px;/* 細い線から始める */stroke-dasharray:0px20px;/* 最初はすべて白線 */}100%{stroke-dashoffset:20;stroke-opacity:1;　/* 線の不透明度を1に */stroke-width:0.5px;/* だんだん線を太くする */stroke-dasharray:15px0px;}}

<svgwidth=98vwheight=80vhviewBox="0 0 100 80"class="svgbox"><!--  グラデーション作成  --><defs><linearGradientid="myGradient"gradientTransform="rotate(90)"><stopoffset="0%"stop-color="#0E5CAD"/><stopoffset="80%"stop-color="#79F1A4"/></linearGradient></defs><!--  描写するテキスト作成  --><gfont-size="25"><textx="50"y="40"text-anchor="middle"dominant-baseline="central"><tspan>Animate!</tspan></text></g></svg>

.svgbox{fill:url(#myGradient);/* グラデーションを適用 */stroke:url(#myGradient);/* グラデーションを適用 */fill-opacity:0;animation:move2sease1normalforwards;font-family:"Impact";}@keyframesmove{0%{stroke-dashoffset:0;stroke-opacity:0;stroke-width:0.2px;stroke-dasharray:0px20px;}70%{stroke-dashoffset:10;fill-opacity:0;stroke-width:0.3px;stroke-dasharray:25px8px;}100%{stroke-dashoffset:20;fill-opacity:1;stroke-opacity:1;stroke-width:0.8px;stroke-dasharray:15px0px;}}

<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>おーでぃお</title><linkrel='stylesheet'href='../static/style.css'>　　<!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- jQuery UI --><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"></head><body><!--再生時間表示部分--><divclass="timeviewr"id='timeviewr'>00:00:00</div><br><br><!-- コントローラー部分 --><formclass='audioform'>　　　<!--曲名を表示する部分は、空白を入れておく--><divid="playing_title"class='playing_title'></div><br><!-- ボタン --><divclass="btns"><buttonstyle='font-size: 15px;'type="button"id="play_btn"class='play_btn'>Play</button><buttontype="button"id='stop_btn'class="stop_btn"style='font-size: 15px;'>Stop</button></div><imgsrc='../static/volumesmall.png'class="icon-volume-down"><divclass="volume"id='volume'></div><br><!--スライダー設置部分--><imgsrc='../static/volumebig.png'class="icon-volume-up"></form><br><br>

    mp3ファイルは
    <ul><li><ahref='https://the-arcadium.net/'>https://the-arcadium.net/</a></li><li><ahref="https://amachamusic.chagasi.com/genre_darktechno.html">甘茶の音楽工房</a></li></ul>から拝借しました。
　　<!--最後にjsファイルを読み込む--><script type="text/javascript"src='music.js'></script></body></html>

/* music.html */.timeviewr{position:relative;left:50px;top:80px;font-size:30px;}/* コントローラ部分*/.audioform{border:3pxsolidcadetblue;background-color:darkslategray;border-radius:5px;height:125px;width:270px;position:relative;top:30px;left:30px;}.playing_title{background-color:black;height:55px;}button.play_btn,button.pause_btn,button.stop_btn{position:relative;bottom:15px;left:37px;height:30px;width:60px;border-radius:5px;}.next_btn{width:30px;position:relative;bottom:15px;left:40px;}.icon_play{width:25px;}.icon-volume-down{width:16px;position:relative;bottom:7px;left:10px;}.icon-volume-up{position:absolute;width:27px;left:233px;bottom:2px;}/* スライダー */.volume{position:relative;bottom:30px;left:32px;width:195px;}/* 押した後のボタンの色 */button.pushed_play,button.pushed_pause,button.pushed_stop{background-color:darkgrey;}

// 音楽ファイルを連想配列に格納varfilelist=[{name:"Unity",artist:"TheFatRat",url:'TheFatRat+-+Unity.mp3'},{name:"MidNightMoon",artist:"甘茶の音楽工房",url:'midnightmoon.mp3'},];constdir='../music/'// ../musicをいちいち記述するのが面倒なので別に分けるvarnow_file=filelist[0];// 曲を選択// new演算子によりインスタンス化して、Audioクラスをオブジェクト化varMusic=newAudio(dir+now_file.url);varplayFlag=false;// 再生中か否かを表すフラグを定義varplaybtn=document.getElementById('play_btn');varstopbtn=document.getElementById('stop_btn');varcrtTime=document.getElementById('timeviewr');// 再生時間表示部分取得// 曲を停止したときオーディオをリセットするvarClearPlayer=function(){playFlag=false;print(playing_title,"Stopped");crtTime.innerHTML="00:00:00"};// 曲の状態とタイトル、作者を表示する// stateはnow_playing, Stopped, Pausedの3種類functionprint(element,state){element.innerHTML=state+": "+now_file.name+''+now_file.artist;element.innerHTML=element.innerHTML.fontcolor('white');element.innerHTML=element.innerHTML.fontsize('4px');};// 再生/一時停止機能// addEventListenerを使用することで処理の上書きを可能にした$(functionPlay(){// playボタンをクリックした時playbtn.addEventListener('click',function(){if(playFlag==false){// 再生されていないとき// 時間のカウントMusic.addEventListener('timeupdate',function(){varsec='0'+Math.floor(Music.currentTime%60);// 秒数varmin='0'+Math.floor(Music.currentTime/60);// 分数sec=sec.substr(sec.length-2,2);min=min.substr(min.length-2,2);vartotalSec='0'+Math.floor(Music.duration%60);//秒数vartotalMin='0'+Math.floor(Music.duration/60);//分数totalSec=totalSec.substr(totalSec.length-2,2);totalMin=totalMin.substr(totalMin.length-2,2);crtTime.innerHTML=min+":"+sec+' ['+totalMin+':'+totalSec+']';},true);playFlag=true;// 再生中フラグを立てるMusic.play();// 音楽を再生play_btn.innerHTML="Pause"// ボタンをplay→pauseに変化play_btn.innerHTML=play_btn.innerHTML.fontsize('4px')print(playing_title,"now playing")// 再生中タイトルの表示// ボタンが押されたとき、色を付け、他のボタンの色を消す$('#pause_btn').removeClass('pushed_pause');$('#stop_btn').removeClass('pushed_stop');$(this).addClass('pushed_play');}else{// 再生されているとき、ボタンを押すと一時停止playFlag=false;play_btn.innerHTML="Play";// ボタンを押すとPause→Playに文字を変化print(playing_title,"Paused")$('#stop_btn').removeClass('pushed_stop');Music.pause();}},false);// 一時停止中の停止ボタン押下イベントif(play_btn.innerHTML=="Play"){stopbtn.addEventListener('click',Stop());}});// 曲の再生が終わった時、最初の状態に戻す$(functionend(){Music.addEventListener('ended',function(){print(playing_title,"Finished")$('#play_btn').removeClass('pushed_play');$('#stop_btn').removeClass('pushed_stop');play_btn.innerHTML="Play";});});// 停止ボタンfunctionStop(){// ボタンを押している間だけボタンを色付けするstopbtn.addEventListener('mousedown',function(){$(this).addClass('pushed_stop');});// ボタンを離したとき戻すstopbtn.addEventListener('mouseup',function(){$(this).removeClass('pushed_stop');});$('#stop_btn').on('click',function(){$('#play_btn').removeClass('pushed_play');play_btn.innerHTML="Play"Music.pause();Music.currentTime=0;// 経過時間を0にして完全停止ClearPlayer();});};// ボリューム調整のスライダー$(functionSlider(){$('#volume').slider({min:0,max:100,value:50,//デフォルト値range:'min',// min方向に色を付けるchange:function(){varvalue=$('#volume').slider('value');// デフォルト値を受け取るMusic.volume=(value/100);// 受け取った値を100で割る}});});

.class1,.class2{/**処理**/}

document.getElementById("…");  null

①=>\02460

.maru:before{content:'\02460';}

<spanclass="maru"></span>
=> ①

<divclass="root"><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="adjuster"></div><divclass="adjuster"></div><divclass="adjuster"></div><divclass="adjuster"></div></div>

.item,.adjuster{flex-basis:calc(25%-10px);// ←adjusterにも要素と同じ幅を持たせてください。min-width:200px;flex-grow:1;// ←伸縮も指定してください。flex-shrink:0;margin-left:10px;// ←同じ左右マージンを持たせてください。}.item{height:50px;margin-top:50px;// ←上下マージンは要素のみに持たせてください。高さを持つと、余りが出た際にズレます。}.adjuster{height:0;// ←未指定で0なら省略できます。}

<html><head><script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script></head><body></body></html>

<html><head><script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script></head><body><a-scene><a-boxposition="0 1.17 -3.9"rotation="0 0 0"color="#ff0000"></a-box></a-scene></body></html>