0:16はい、俺です。ラーメン記事やバス釣り記事をお楽しみの皆様、申し訳ございませんが...今回はガッツリとWEBデザイン・コーディングのお話となります!今一番オススメしたいフレームワーク「SNUG」え~っとですね、このフレームワークはぶっちゃけいずれ流行ります。いつかドカーンと来る日が来ます。残念ながらまだ日の目を見れていないだけです。みんなが興味を持つ程、その内容がまだ世に知れ渡ってないだけです。言っても、まだパブリッシュしたばかりなのでそれはしょうがないのですが。この使いやすさと利便性を理解すれば、こんなに軽くて使いやすいフレームワークは他にないですよ。CSS」うちの会社の先輩である、NAKAMURA氏が開発者です。ほんで、そのもっと元になる開発者はこないだ退職した同僚さんのWADACYです。2人は俺のWEBの師匠ですね。この2人がいなければ100%今の俺はいません。ある意味SNUGはその2人の共同開発に近いのかな。良いものを!と追及した結果生まれたものでございます。このフレームワークを使う為に前提となるのが・SASSの知識(scssのコンパイルが出来る人)・AdobeXDの知識(XDを使ったモックデザイン等をされる人)この2つは必須となると思います。XD」って使ってますか?使ってないっていう方、使う気がないっていう方にはこのSNUGはちょっともったいないフレームワークかもです。XDは簡単に言うと、デザインモックやワイヤーを手軽に作成できるツールです。俺もまだガチガチに触ってるっていう訳ではないですが、どんな感じで作れるのかは何となく分かります。確かにこれは手軽ですよ。ディレクター職の方とか、これ使えたらチーム開発も捗るんじゃなかろうか。XDの手軽さと、このSNUGを使ったコーディングがあれば...デザインモックの再現がとても簡単にできちゃうというスグレモノな訳ですよ奥さん!そう、XDのレイアウトグリッドってやつと互換性があるのです。同じ数字を入れるのみ!無駄な計算とか不要!XDで設定した通りにあらかじめSNUGのファイルに変数としてレイアウトグリッド数値をセットするだけの楽ちん設定です。面倒なカラム割なんかも用意されたclass記述で簡単にコーディング出来てしまうのです。従来のフレームワークと何が違うの?そうですね、有名ドコロで言うと「Boo●strap」とかありますね。俺も昔はよくお世話になりました。言って要らない機能多いんですよね。あそこまでさすがに使いきれない!そこでSNUGですよ。無駄な機能を全て省いてるのでファイルも軽いの何のって。XDとの互換性、コンテナ設定、グリッド設定、フレックス、レスポンシブ対応、必要最低限なものは既に用意されてます。しても必要だと思うものがあれば自分でカスタマイズしてしまえばいいんですから。「GitHub」でダウンロード出来ますのでファイル一式DLしましょう。_init.scssを開きます。作成済みのAdobeXDのレイアウトグリッドの値に合わせていきます。//両サイドのマージン下記は元々用意されているclass例の1つです。</div></div>結果コンテンツコンテンツ※PCで見るとコンテンツが横に2つ並びます。※スマホで見るとコンテンツが縦に2つ並びます。閲覧する端末の横幅によって勝手にカラムが落ちてレスポンシブ対応もバッチリ。これグリッド6で2分割にしてますが、グリッドauto設定も用意されてまして...数字じゃなくl-grid-autoっていう記述をするだけで勝手にコンテンツ数からカラム数を割り出して均等配置もできるという...こういう痒い所に手が届くフレームワークとなっている訳ですね。ちなみにファイル構成の説明を簡単にさせてもらうと・index.htmlメインのhtmlファイルですね。ちなみにWordpressテーマ用としてPHP版のものも作成されてますのでそのうちどこかでDL出来るようになるかと思います。vendorこの中のファイルは設定の為のものなので基本的にいじりません。先程の例で挙げた「_init.scss」の数値のみ初期設定すればOKです。_custom.scssオリジナルのスタイルの追加等はこのカスタム用のファイルに記述していくと良いでしょう。style.csssassのコンパイル後はこのcssファイルに吐き出されます。ファイルが軽い!簡単!シンプル!自由度が高い!一貫したクオリティのままチーム開発もしやすい!そしてXDとの互換性アリ!このSNUGという武器は一度使えばもう手放せなくなる事は間違いありません。詳しい使用方法はSNUG公式サイトで見るのが一番なんで、興味のある方はぜひチェックしてみてください。新規投稿のプッシュ通知を受け取れます(個人情報入力不要&無料)※解除する時は再度上記ボタンから解除を選択してください。