mazcango2のブックマーク / 2016年9月20日

クスール　NOT SCHOOL BUT CSHOOL

週末講座 Webの未経験者からスキルアップをしたい中級まで。手を動かして自分の作品を作る2ヶ月のコース。実践に基づいた技術を学べますので、目的に応じたコースをお選びください。初心者も歓迎です！

mazcango2 2016/09/20

tutorial

リンク

初心者向け！CSSフレームワークFoundationのSass版を使用する為の環境構築。 - VisuAlive（ヴィジュアライブ）

こんにちは、@kuck1u です。みなさん、突然ですが、レスポンシブデザインでコーディングする時、どうしてます？僕は、レスポンシブデザインのコーディングが苦手なので、CSS のフレームワークを利用しています。フレームワークを利用するようになったのは、現場でかならず使われている WordPress デザインのメソッドという書籍で紹介されているのを読んだのがキッカケです。 [amazonjs asin=”4844363743″ locale=”JP” title=”現場でかならず使われているWordPressデザインのメソッド”] 色々試してみたのですが、Foundation が一番肌に合ったので採用しました。今回は、Foundation の Sass 版を利用できるようにする迄の道のりをメモがてら共有します。 [amazonjs asin=”4844334662″ locale=”JP

mazcango2 2016/09/20

foundation

リンク

Foundation5 日本語チートシート

はじめにこのページはFoundation4用を加筆しながら作っていましたが途中でFoundation5にVerが上がってしまいました。一応下位互換しているようなので、そのままFoundation5用のチートシートとして続けて掲載していきます。情報が古い可能性＆うまく動いていない箇所があります。また、内容に関しては完成しておらず、まだ未掲載の部分が多くありますのでご了承ください。このページは、Foundation DocumentationにあるKitchen Sink（http://foundation.zurb.com/docs/components/kitchen_sink.html）を元に、解説やよく使われそうなクラス名などのドキュメントを追加して日本語に編集しなおしたページです。翻訳したものではありませんので、ご注意ください。また、各項目SCSSに対応していますが、このペ

mazcango2 2016/09/20

foundation

リンク

簡単！CSSフレームワーク「Foundation 6」のはじめ方 | ERRAND media｜ホームページ制作会社の情報発信サイト

Bootstrapに次ぐ人気のフレームワーク、「Foundation」のはじめ方です。ほとんどCSSをいじらなくてもそれっぽいサイトが作れてしまうのがフレームワークの魅力ですが、定番の「Bootstrap」が最早定番すぎるので、それ以外のフレームワークも試してみい！という人には、この「Foundation 6」がおすすめです。使い方今回はwindowsでのやり方を説明します。１、Node.jsのインストールパッケージ管理にnpm、タスクランナーにgulpを使うので、まずはNode.jsをインストールします。一番簡単なので、公式サイトから直接ダウンロードしてインストールします。 Node.js ダウンロードしたインストーラを起動すれば簡単にインストールできます。同時にnpmもインストールされているはずです。確認のため、コマンドプロンプトを開き以下のコマンドを入力してみて下さい

mazcango2 2016/09/20

foundation

リンク

Foundation5の使い方 | Webエンジニアブログ

ZURB Foundation入門セットアップダウンロード Foundation5の入門記事です。本エントリーが参考になった方には下の記事もおすすめです。 ZURB Foundationでサイドバーを組むレスポンシブなフォームの使い方パッケージのダウンロードはZURB Foundationのサイトから行います。 http://foundation.zurb.com/downloads/foundation-5.5.3.zip 本記事をエントリーした時点では、 foundation-5.1.1.zip というバージョンのものをダウンロードしました。インストール Windows8環境のxampp1.8.3にバーチャルホストを一つ設定してインストールを行う。配置したパスは以下のとおり C:\xampp\htdocs\vhost\foundation foundationフォルダの中身

mazcango2 2016/09/20

foundation

リンク

Foundation5の使い方 | CSSフレームワーク覚書

Foundation5の使い方今さらFoundationを使い始めた残念なwebデザイナーによる使い方の説明サイト。初心者なので優しい目で見守ってください。まずはFoundationについてを見る Bootstrapについで人気があるCSSフレームワークのFoundation5の使い方の説明サイト。先に作成した姉妹サイトのBootstrap3の使い方と比較する形で紹介しています。 2015年11月19日付でバージョン6が公開されています。仕様が新しいバージョンとは異なる箇所もあるかと思いますのでご注意下さい。 ※Foundationのバージョンは作成時の最新版5.5.1版での説明になります。 ※姉妹サイトのBootstrap3の使い方に合わせてカテゴリ分けしているので公式サイトとは違うカテゴリ分けをしています。 Foundation公式サイト基本 Foundationとは何か？

mazcango2 2016/09/20

foundation

リンク

bootstrapよりかっこいい? Foundationを導入する - Qiita

CSS Advent Calendar 2014 三日目です。偉大な@izumin5210先輩の後に書く事になってしまいとても緊張しています。 bootstrapは良いものです。デザイナーじゃなくてもそれっぽいデザインができるし、日本語の情報も豊富だし、公式ドキュメントもとてもわかりやすい。ただ、あまりにもたくさんの人が使うので、bootstrapを使うだけでは「またbootstrapか…」と思われるようになってしまいました。もちろん、bootstrapだって考えて使えば良いデザインは出来ますが、当然その分手間はかかります。ということで、bootstrapよりも手間をかけずに、bootstrapよりもかっこいいサイトが作れるCSSフレームワークであるFoundationを紹介したいと思います。特徴良い所適当に作ってもbootstrapっぽいデザインにならない(当たり前ですが)