SevenSoundSpace

世の中には数多くのサイトがあり表現は多種多様。

例えば...

ボタンや文字の色が変わったり面白いアニメーションだったりスクロールしてみると思わぬ方向に動いたり。

そこで！

面白い表現を見つけたらまずはここに書き留めて謎が解けるまで調べる！

謎が解けたらHTML/CSS/JavaScriptで最適解を模索する！！

そうして蓄えた知識を共有していきたいな。

ここは、そんなSpaceです。

七音@7sounD

1. スクロールと連動して消えたり現れたりするTopMenu
   • [jQuery]自作デモ＋解説ページ
2. レスポンシブデザイン
   • HTML：header内にビューポートを設定する
     

     <meta name="viewport" content="width=device-width,initial-scale=1">

   • CSS：ウィンドウ幅を基準にメディアクエリを記述する（例：480px未満で切り替え）
     

     @media screen and (max-width:479px) {
     /* ここで480px未満の時に上書くCSSを記述する */
     }

   • このページでもヘッダーデザインやリンク表現、Introの文章構成など切り替えています！
3. GitHubで簡単Webページ公開
   • 手順解説ページ

1. 文字色グラデーション
   • 参考になりそうなページ↓
   • テキスト周りで使えるCSSの小技いろいろ | Webクリエイターボックス
2. twitter/facebookなどのソーシャルボタン、TLページ内埋め込み等
3. 縦以外の任意方向へのスクロール（横とか奥とか）
   • 参考になりそうなページ↓
   • [JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ | コリス
   • スクロールイベントの開始／終了、方向を判別できる jQuery プラグイン | CYOKODOG
4. スクロールしていくと横からスッと要素が出てくる
   • 参考になるかはさておき、こんなイメージ↓
   • GRAVITY DAZE 2 | プレイステーション® オフィシャルサイト
   • 参考になりそうなページ↓
   • jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法｜Webpark
5. なうぷれ系の埋め込みをページ内でできないか
   • 参考になりそうなページ↓
   • [JS] iTunes APIをJavaScriptから利用して、iTunesで配信中の楽曲を視聴する - YoheiM .NET
6. 目次を自動生成する
   • 参考になりそうなページ↓
   • jQueryで目次と「目次に戻る」を自動生成（プラグイン無し） | 10251

※他にも面白そうなネタがあれば教えてください！

CSS/JS周りの知識を中心に深耕していければな、と。

1. bootstrap
   • ひとまず流し読み↓
   • デザイン知識がなくてもOK！Bootstrapの使い方【入門者向け】 | TechAcademyマガジン
2. AngularJS
   • ひとまず流し読み↓
   • AngularJS入門者必見！作りながら覚えて10分で理解｜Udemy メディア
3. React.js
   • ひとまず流し読み↓
   • 今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference | HTML5Experts.jp
4. Riot.js
   • ひとまず流し読み↓
   • フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary
5. 各種CMSの流行り廃れ及び自由度

1. JSHint, a JavaScript Code Quality Tool
   • JavaScriptの静的解析。 記述エラーを探したいときなど
2. CodePen - Front End Developer Playground & Code Editor in the Browser
   • 自作HTML/CSS/JSを簡易にデモ化、公開、共有できる遊び場
   • ページ内にもこんな風に貼れる

     See the Pen hideTopMenu by SevenSound (@SevenSound) on CodePen.

3. Another HTML Lint - Gateway
   • HTML5のリントチェック