Daichi Yamaguchi @d-yamaguchi-blog - Tumblr Blog

Posts

SMACSSその２（ステート、テーマ）

はじめに

前回はベース、レイアウト、モジュールについて書きました。

1.ベース

2.レイアウト

3.モジュール

4.ステート

5.テーマ

今回はステートとテーマについて。

4.ステート

状態（ステート）を表すためのルール。

is-◯◯で指定するなどでスタイルを上書きしたり、すぐに変更したりできる。

————–例—————

is-disable

is-hidden

is-active

——————————–

といった感じに指定する。

もしくは

————–例—————

is-module名-disable

is-module名-hidden

is-module名-active

——————————–

など、モジュール名を使うとより指定しやすいかもしれない。

５.テーマ

全体の色のスタイルを変更、管理するルール。

テーマ用のCSSを用意する。

theme-◯◯などのプレフィクスをつけてあげるとわかりやすい。

おわりに

SMACCSの５つのルールを知り、プレフィックスの有効性を実感しました。

コードの量の最適化、再利用性、共通に理解できる命名など向上させるために今後活用してみようと思いました。

————参考URL———-

SMACSSを利用したCSS設計について

SMACSSによるCSS設計

#web #SMACCS

SMACSSその１ (概要、ベース、レイアウト、モジュール)

はじめに

コーディングをしていくうちにどうもCSSの扱い方がまだ雑だなと感じるところが多々あり、もっと誰でも読める伝わりやすい設計をしたいと思い、SMACSSという概念を教えていただきました。

SMACSSとは？

SMACSSは厳格なフレームワークというよりはスタイルガイドである。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。

要はこう書いたらCSS設計が最高に良くなるよ。ってことです。

使用目的

具体的にどんな風にメリットがあるかというと、

コード量が少なくなる

メンテナンス性を高める

ユーザー体験の一貫性の向上

この３つを挙げられています。

ものすごく大事なことだと思います。

SMACSSー５つのカテゴリ

SMACCSにはルールを５つのカテゴリに分類されています。

1.ベース

要素そのもののデフォルトスタイル

2.レイアウト

ページをエリアごとに分割

3.モジュール

再利用可能なパーツ 4.ステート

レイアウトやモジュールの特定の状態を示す

5.テーマ

サイトのルック＆フィールを定義

で分類され、いかなる時も役に立ちます。

1.ベース

制作するサイト全体の要素のデフォルト設定をする。

classやidの設定ではなく、要素そのもの。

要素セレクタ（body、a）

属性セレクタ（input[type=text]）

擬似クラスセレクタ（a:hover）

などを設定します。

bodyは背景白、リンクの色は青、などなど,,,

ここではデザインを決めるとその後いちいち上書きすることになるので、避けたほうがいいとされています。

CSSをリセットするのもベースルールに含まれていて、

reset.cssやnormalize.cssなどを使うのも有効的である。

しかし、これらを理解しないといけないです。

2.レイアウト

ページのエリア分けを行います。

-----------------------------------------------

.l-header{

margin-bottom:20px;

}

.l-sidebar{

float:left;

width:20%;

}

.l-main{

float:right;

width:80%;

}

-----------------------------------------------

レイアウト目的として独立したルールのを設けておくと管理しやすくなります。

例えば、プリフィックスをつけて、これはレイアウトのルールだとわかるようにします。

-----------------------------------------------

.l-header or .layout-header

.l-sidebar or .layout-sidebar

.l-main or .layout-main

-----------------------------------------------

このようにプリフィックスをつけるのが推奨されています。

又、子孫セレクタを使うのも有効的で、

-----------------------------------------------

.l-fixed .l-main{

width:600px;

}

-----------------------------------------------

というように、親に.l-fixedをつけることによって、ここは固定のレイアウトルールとわかるようにしたりできます。

3.モジュール

再利用可能なモジュールを作成し、レイアウトと合わせる

-----------------------------------------------

</div>

-----------------------------------------------

これにCSSで

-----------------------------------------------

.l-column{

width:300px;

}

.module名{

background:#fff;

}

.module名 h1{

font-size:24px;

font-weight:bold;

}

.module名 p{

font-size:16px;

}

-----------------------------------------------

とレイアウトとモジュールの独立をすることでモジュールの再利用がしやすくなる。

おわりに

まずは概要、ベース、レイアウト、モジュールを書きました。

長いので、次にステートとテーマについて書きます。

---参考 URL---

SMACSSによるCSSの設計ー第1回ベースとレイアウト

SMACSSからCSSプリプロセッサとの付き合い方について学んだこと

#web #smacss #css

Pure.css　grid について

Pure.cssとは？

Pure.cssはYahoo!が作った、シンプルで軽量なCSSフレームワークです。

Gridだけ使いたいとか、そんな内容量が必要ない時に活躍します。

使い方

ー導入ー

導入方法はすごく簡単で、

を<head>内に入れるだけで使えるようになります。

もちろんローカルに入れて使うこともできます。

ー使い方ー

・グリッドシステム

pure.cssでのグリッドの使い方は

.pure-g

で囲って、

.pure-u-◯-◯ (一番目の◯の数字 / 二番目の数字)

でグリッドを割り当てます。

Pure.cssでは２４カラム用意されていて二番目の◯で分割したグリットの内、一番目の◯分のグリットを使います。

又、約分できる数字は約分しないと使えません。

.pure-u-6-12は

.pure-u-1-2と約分します。

.pure-u-1は

.pure-u-1-1と同じになります。

・ブレイクポイント

レスポンシブにするのにPure.cssで設けているブレイクポイントは

≥568px

記述：　.pure-u-sm-◯-◯

@media screen and (min-width: 35.5em)

md ≥768px

記述：　pure-u-md-◯-◯

@media screen and (min-width: 48em)

lg ≥1024px

記述：　.pure-u-lg-◯-◯

@media screen and (min-width: 64em)

xl ≥1280px

記述：　.pure-u-xl-◯-◯

@media screen and (min-width: 80em)

で指定します。

感想

とにかくシンプルで使い易い。

Bootstrapでいろいろありすぎてわからなくなるとかの前にPure.cssで慣れるといいかもしれません。

#web #css #pure.css

Bourbon 導入まで

Bourbonとは？

sassで使用するcssのフレームワークのひとつです。

Neat、Bitters、Refillsと言った、Bourbonを使うことを前提としたフレームワークもあります。

Neat

グリッドシステムに特化したフレームワーク

Bitters

タイポグラフィ、リスト、テーブル、フォームといったベーススタイルを提供するcssフレームワーク。

Refills

フレームワークというよりは、コンポーネントやパターンなどを説明したスタイルガイド・カタログ

導入の流れ

黒い画面で、

sudo gem install bourbon

でインストールをする。

もしMacでパーミッションがなんちゃらとエラーが出る場合は

sudo gem install -n /usr/local/bin Bourbon

でなんとかなると思います。

次に使用するプロジェクトのフォルダに移り

bourbon install

でBourbonファイルが入ります。

これで、あとはsassを使ってBourbonを利用します。

使い方

sassフォルダ内にbourbonフォルダを置きます。

sassファイル内の最初に

@import "bourbon/bourbon";

を書くことで使えるようになります。

sass内で書いたものを自動で変換してもらえるように

sass --watch sass/{ファイル名}.scss:css/{ファイル名}.css

をやっておくといいと思います。

感想

思ったよりも簡単に導入できるので、BourbonのDOCも見やすいし、習得できればすごく良いと思いました。

#web #bourbon #sass

Compass について

Compassってなに？

Sass のフレームワーク。便利な設定集。

どんな事ができる？

ベンダープレフィックスを一気に書いてくれる。

css スプライトがすごーく簡単にできる

使い方

@import "compass";

をscssファイルの最初に書く。

他にも使用する機能だけを指定することもできます。

1. ベンダープレフィックスを一気に書いてくれる。

例えば、box-shadowを使いたいとすれば、

scssファイル----------------------

.sample{ @include box-shadow(); }

-------------------------------------

と書くと。

cssファイル-----------------------

.sample { -moz-box-shadow: 0px 0px 5px #333333; -webkit-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; }

-------------------------------------

と変換してくれます。

@include でCompassに設定されているMixinを読み込みます。

次に、box-shadow();の()の中に値を入れれば、変換時にその値に変換されます。

scssファイル----------------------

.sample{ @include box-shadow(8px 8px 10px #000000); }

-------------------------------------

と書くと。

cssファイル-----------------------

.sample { -moz-box-shadow: 8px 8px 10px #000000; -webkit-box-shadow: 8px 8px 10px #000000; box-shadow: 8px 8px 10px #000000; }

-------------------------------------

となるわけです。

2. css スプライトがすごーく簡単にできる

config.rb の中に書いてある

images_dir = "images"と

画像を扱うディレクトリ名を

"images"にして置きます。

images内にiconsというディレクトリを用意してその中に

images/01.png

images/02.png

images/03.png

があるとします。

scssファイルに

@import "icons/*.png"; @include all-icons-sprites;

とすると、cssスプライトが作られ、インクルードされます。

使い方は簡単で、

<div class="icons-01"></div>と書くと、使えます。

感想

compassがすごく難しいものと壁を感じてましたが、意外と難易度は高くなさそうで、これからcompassの道が開けそう！

参考URL---------------

CSSの常識が変わる！「Compass」の基礎から応用まで！

#web #sass #compass

Sass/Scssをセットしてコンパイルまで

セットアップの流れ

まずは、黒い画面を開く。

Rubyがインストールされているかを確認。

ruby -v

インストールされてない場合は

Mac

Windows

sassをインストールする。

sudo gem update --system

sudo gem install sass

これでインストールされます。

コンパイルをしてみる

フォルダ内に以下を作成しておく

sass_practice[フォルダ]

L index.html L css[フォルダ] Lmain.css L scss[フォルダ] Lmain.scss

ディレクトリを移動する。

cd sass_practice[フォルダ]（使用する一番上の階層のフォルダ名)

実際にscssに書いたものをcssに変換する。

sass sass/main.scss:css/main/css

これでcssに変換にされます。

自動で変換させる。

sass --style expanded --watch sass:css

エディタでscssファイルを保存すると自動でcssに変換される。

この流れだけできればsassの壁は壊せるのではないかなーと思います。

#web #sass #scss

Sass/Scss 入門

sassとは？

CSSのメタ言語。 SCSSで書いてコンパイルしてCSSにします。

CSSを効率よくかけて、可読性を高める技術です。

どんな事ができる?

・ネスト（入れ子構造）

ネスト（入れ子構造）でCSSが書く事ができます。これにより、あるセレクタの中（.content）の中身だけを操作したい、場合に見やすいです。

例ーーーーーーーーーー

.content の中の h1 と p のプロパティと値を書く場合。

.content{

width:980px;

　　　h1{

　　　　font-size:24px;

　　　　}

　　　　font-size:14px;

　　　　}　　

で、書く事ができる。

ーーーーーーーーーーー

これをコンパイルすると、

ーーーーーーーーーーー

.content{ width:980px; } .content h1{ font-size:24px; } .content p { font-size:14px; } ーーーーーーーーーーーとCSSに書き込まれる。

・変数を使って、同じ事を何度も書かなくて良い。

変数を用いれば共通部分または演算で微調整も可能で便利。メンテナンスも一つ書き換えればよいので、楽。

例ーーーーーーーーーーーーー $btn-red:#ff0000;

.warning-button{ background-color: $btn-red; } ーーーーーーーーーーーーーーこれをコンパイルすると、ーーーーーーーーーーーーーー

.warning-button{ background-color:#ff0000; } ーーーーーーーーーーーーーー

という感じに使える。

感想

ここまででなんとなく頭良い感じにCSSが書けるんだなぐらいにまでは思いました。

SCSSをみんなが使えたら、すごく平和になりそう。

参考URLーーーーーーーーーーーーーーーーーーーー

CSSの常識が変わる！「Compass」の基礎から応用まで！

#web #sass #scss

Bootstrapのグリッドレイアウト

実際にGridレイアウトを使ってみた。

グリッドレイアウト使い方

使い方は単純で

div class=“container” または class=“container-fluid” の中に

div class=“row” を入れ

div class=“col-[1]-[2]” で、グリッドを割り当てていく。

[1]は画面幅を指定します。

xs = <768px

sm = ≥768px

md = ≥992px

lg = ≥1200px

で指定します。

[2]は１２のグリッドの内いくつの割合で表示するかを決めれます。

col-lg-3,col-lg-3,col-lg-3,col-lg-3だと

≥1200pxの時は1/4ずつの割合で表示されます。

こうして画面幅を指定して、割りあてるだけで、綺麗にレイアウトができるようになります。

参考URL-----------------

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

#web #grid #bootstrap

Bootstrap メリット・デメリット

CSSフレームワークについて勉強をするのにあたり、王道のBootstrapについて調べてみました。

Bootstrap とは

Twitter社が開発したCSSフレームワーク。

メリット

ClassやIdを与えるだけで、既にプロパティが設定されているので、簡単ですぐにデザインが出来上がる。

グリッドレイアウトがあり、レスポンシブもすぐに対応できる。

制作する時のメンバーがフレームワークを理解していれば、コーディング時のにイメージしやすく、イメージ共有ができる。

デメリット

Bootstrapの雰囲気が中々消せない。

Bootstrapの記法を覚えなくてはならない。

古いバージョンとの互換性のないバージョンアップが行なわれることもあり、常に新しい知識を入手していかなければならない。

Bootstrapにないものを作る時にデザイン的にも時間がかかってしまう。

規模によっては必要ないものが多くなる。

まとめ

メリット・デメリットを踏まえ、CSSフレームワークは便利な事は間違いないので、あとはしっかりと、その制作で本当に必要か、Bootstrapの雰囲気があっても大丈夫なのかなど、判断が重要だと感じました。

#web #Bootstrap #CSSフレームワーク

ハンバーガーメニューの行方

ナビゲーションをレスポンシブで表示する場合の手段について調べた。

※結論は出てないです。

現時点で、すぐにハンバーガーメニューが手段として思いつくが

ハンバーガーメニューはゴミだ！！

次世代のWebナビゲーションに向けてーハンバーガーメニューからの卒業

こういった、やはりよろしくない手段として世の中は考えている。

確かに、初めてハンバーガーメニューを見た時、それがメニューを表示してくれるとは思わなかったですが、その後は理解できますよね。

ですが、もっと話の中心は、情報の匂いがするかしないか。

ファーストビューでハンバーガーメニューをみても情報の匂いを感じませんね。。中にどんなコンテンツがあるのかとか、開けてみないとわからないですし、その数秒でユーザーは諦めてしまいますね。では、どうしたらいいのか。

ハンバーガーアイコンのUI問題６つの答え

モバイルナビゲーションを考察する – ハンバーガーメニューに代わるもの

ここで言っているみたいに、ハンバーガーメニューのデザインを変える。ラベルをつける。スワイプ型にする。などなどあるみたいですが、ちょっと今は判断が難しいです。

個人的には、全世界がハンバーガーメニューにしてしまえば誰もが使う気もしちゃいますけど。

#web #menu #responsive

コーディング規約について

制作をするにあたり、よりよい制作を実現するために必要なものがコーディング規約。

webcreatorbox-コーディング規約を作ろうを参考。

コーディング規約とは

簡単にいうと、共通の制作のルール集。

ディレクトリー階層

フォルダ、ファイル等の名前のつけ方やどの階層にフォルダを作るかなどを決める。

ヘッダーやフッターなどの共通なものはどのディレクトリに置くか。

そして「common」など共通フォルダとわかりやすいような名前にしておくと良い。

フォーマット

書式の統一。

インデントの仕方。Tab？半角スペース２つ？インデントなし？

カラーコードは小文字？大文字？

コメントの書き方

プロパティーの記述順

シングルクォート（'）？ダブルクォート（”）？

サイズの単位（px? em? %?）

これらを統一する事によって、作業メンバーの扱いやすさが良くなる。

命名規則

idやclassなどの命名の仕方

news-item　ハイフン

news_item　アンダースコア

newsItem　　大文字

どういった命名の仕方をするのかを決めておく事で迷う事なく命名できる。

さらに、明確な意味を持つ単語にすることで、一目でどんなスタイルがかかっているかが理解しやすい。

対応ブラウザー

制作物の対応ブラウザを決めておく事で、作業メンバーが扱うブラウザとバージョンによる同じサイトの見え方の認識の違いをなくすために必要。

感想

これは毎回決めるのは大変なんだろうなと思いましたが、Google HTML/CSS Style Guideというものが存在していて、みんなこれをベースにしてるのかな。

恐らく統計的にこの記述方法がいいよって事で掲示してるのではないかと。

なので、これに乗っかれば間違いないのかなと。

参考URL----------------------

コーディング規約を作ろう

Google HTML/CSS Style Guideを全部日本語に訳してみた【HTML編】

Google HTML/CSS Style Guideを全部日本語に訳してみた【CSS編】

#web #style guide

Gridデザインのメリット・デメリット

Gridドデザインのメリットがわかりやすい記事がありました。

techacademy-グリッドデザインのWebサイトが良い15の理由

15のメリット

コンテンツが整理される

仕事を高速化する

文章の居心地が良くなるようなレイアウトを実現できる

他のデザイナーとの共同作業をもっと容易にしてくれる

バランスの整ったデザインを創りやすい

マルチページのレイアウトに統一感を与える

階層化したデザインを表現できる

散らかったレイアウトと、さよならできる

心地よいデザインの世界が開ける

グリッドのルールを破ってインパクト効果を狙う

柔軟性に富む

対角線のデザインに役立つ

万能に使える

余白のデザインに役立つ

読者の目に優しいデザイン

デメリット

一度に入ってくる情報量が多くなるため、どこから見れば良いのか迷いやすくなる。

更新頻度高いWEBサイト程、過去に興味のあった記事を見つけにくい

全体的な統一感があることにより、コンテンツごとの重要度に差をつけにくい

感想

数学的な規則性を与えることによってクリーンなレイアウトを実現出来るし、その規則性をあえて壊したり、その中でも大小の見え方を工夫してあげることで、より良いデザインに出来ることができる。

その反面、コンテンツ量などの視覚的にどのくらい情報を見せるかをしっかりとデザインしないと逆効果にもなりうるので注意する必要がある。

参考URL--------------------

techacademy-グリッドデザインのWebサイトが良い15の理由

適切なブレイクポイントを考えてみる（レスポンシブデザイン用）

グリッドレイアウトの基本的なこと

#web #Grid

Gridシステムへの一歩

今後絶対にかかせないGridの初歩的な部分を調べました。まずはどんなものなのかをさーっと。

Gridシステムとは

レイアウトを均等に分けてマス目として考えるレイアウト。

ディスプレイのサイズに合わせて、12カラムに分割にされ、何分割にするか、それぞれ何カラム与えるか、それらを指定してあげるだけで、綺麗にレイアウトができる。

ーーーーー例ーーーーーー

２分割　⇨　4カラム:8カラム

３分割　⇨　4カラム:4カラム:4カラム

４分割　⇨　3カラム:3カラム:3カラム:3カラム

ーーーーーーーーーーーー

など。

さらに、カラムの中にさらにカラムを入れることが出来る。

ーーーーー例ーーーーーー

２分割（左サイドバー：右メインコンテンツ）⇨　3カラム:9カラム

この右のメインコンテンツの中でさらに9カラム（3カラム:3カラム:3カラム）

ーーーーーーーーーーーー

などができる。

ディスプレイ幅に合わせられる

Gridレイアウトは、スマートフォンやPC、タブレットなど多様なデバイスに対応しやすい可変レイアウトとして利用することもできる。

レイアウトには種類があり、

リキッド・レイアウト

フレキシブル・レイアウト

可変グリッド・レイアウト

エラスティック・レイアウト

がある。

リキッド・レイアウト

ディズプレイの横幅１００％に相対、可変してコンテンツ（画像、文字、ボックス要素など）が伸縮される。

フレキシブル・レイアウト

最大幅や最小幅を設定して、％で値を指定することによって、画面の崩れをカバーするレイアウト。

可変グリッド・レイアウト

各デバイスのディスプレイ幅によって一定のグリッドの数を指定しておくことによって、コンテンツを再配置することが出来る。

エラスティック・レイアウト　　

全ての要素単位をemで指定して、ブラウザ幅をかえてもコンテンツ全体がズームするレイアウト。現在はブラウザにズーム機能があるためあえて必要性があまりない。

これらをまず押さえてレイアウトへの一歩。

間違いがあればご指摘下さい。

参考URL----

webdesignrecipes

design-spice

code部

#web #Grid #レイアウト

寝癖の原因と治し方

朝起きると髪の毛が爆発している方いませんか？

僕は必ず爆発してます。

毎日朝寝癖を直すのに時間がかかって慌ただしくなってしまうのは嫌ですよね。

寝癖治しているだけなのにちょっと神経使いますよね。

その毎日の時間をもっと有効的に使いたいですよね。

そこで寝癖の原因解明と簡単に直す方法の記事を見つけましたので、ここに書き留めます！

-寝癖の原因-

キーワード：前日の夜のドライヤー

そもそもなんで寝癖がつくのかというと、水素結合が原因なんです。

水素結合の性質としては、水が乾燥するタイミングで水が固まるようなものらしいです。

なので、ドライヤーをある程度かけても、寝る時に髪の毛がちゃんと乾く前にに寝転がるので、髪の毛が乾燥した瞬間では髪の毛は乱れている状態なのです。

-寝癖の治し方-

キーワード：冷風

原因がわかったところなので、治し方はどうか。

まずは前日のドライヤーでちゃんと乾かす必要があります。そして、気をつけなければならないのが、熱された髪の毛が冷めていく時に空気中の水分を吸ってしまうみたいなのです。

なので、しっかりドライヤーの冷たい風で髪の毛を冷まして下さい。

-それでも寝癖がつく人の治し方-

キーワード：水素結合を操作する

しっかりドライヤーをかけたとしても、寝ている間に汗や湿気で髪が湿ってしまう事もあり、寝癖がつく事もあると思います。

そんな場合は、水素結合を逆手に取り、髪の根元に水分を与えて、水素結合をきってしまえば早く治ります！

実際にどうするか

・ストレートに髪の毛をシャワーで濡らしてから整える。

・霧吹きで寝癖部分に吹きかける。市販でもトリートメントミストなど売っていますね。

・濡らしたタオルで揉み込む

などあるみたいです！

僕はちまちませずにシャワーでさーっとやって乾かした方が早いと思うのでおすすめします。

以上、寝癖についてでした！

ーーーーーーーーーーーーーーーーー

参考URL

(http://mens-time01.com/neguse-naosu-houhou3-212)

(http://beauty-professionals.net/452.html)

#生活 #髪

ストリートダンスのジャンルについて

最初の投稿は僕の趣味とするストリートダンスについてにしようと思います！

ダンスのジャンルについては派生や諸説がありすぎるので、ざっくり覚えておくと面白いぐらいに留めます！

ストリートダンスと言っても時代によって生まれたいろんなジャンルがあります。

大きく時系列で３つに分けると、

・OLD SCHOOL

・MIDDLE SCHOOL

・NEW SCHOOL

と言われていて、その名も通り歴史からいうとOLD-MIDDLE-NEWとそれぞれにその時代の音楽と共に出来たダンスがあります。

MIDDLE SCHOOLはもはや日本でしか言わないみたいですが、、、

そしてジャンルの中にまたSTYLEという踊り方がまた分かれていて、それらを混ぜたりして踊ります。

OLD SCHOOL

POP/LOCK/BREAK/SOUL/WAACK

の５つと考えられていて（正確にはもっとあるかも）

僕はPOPをやっています。

POPは音に合わせて筋肉を弾いて不思議な動きをするジャンルです。

MIDDLE SCHOOL

　NEW JACK SWING等が主流になった1988-92年のストリートダンスとされているみたいです。

昔のダンス甲子園を見ていた方は知ってるかもしれませんがL.L.BROTHERSというチームがやっていたダンスです。

NEW SCHOOL

　主にHIP HOP やHOUSEなどを指します。

HIP HOPはさらに多くのジャンルがあり、昔からのHIP HOPを大切にしているSTYLEや、近年ではR&Bの音楽に合わせるSTYLEが流行っています。

日本人アーティストでいうと三浦大知さんが代表的だと思います。

この三浦大知と共に踊っている女性は、今最も日本人で活躍している菅原小春さんです。

数々の海外、国内アーティストに引っ張りだこでしゃべくり007にも出ていました！

ざっくりですが、本当はまだまだジャンルがたくさんあり、そのジャンルの中で様々な踊りのSTYLEがあります。

そして時代と共に流行りが出てきてどんどん進化していくのでストリートダンスの面白さはまだまだ深いです！

参考URL

Wikipedia

Dews

#dance

Trending Blogs

Recently Viewed Blogs

Daichi Yamaguchi