Read the English article here gulp, gulp-sass のインストール $ npm install gulp gulp-sass -D サンプルのディレクトリ構成 必要なもの: ソースディレクトリ アウトプットディレクトリ gulpfile.js 今回の場合, ソースディレクトリとアウトプットディレクトリはそれぞれ、./sass と ./css となる。 gulpfile.js の設定 gulpfile.js を以下のように設定する gulpfile.js const gulp = require('gulp') const sass = requi...
Hello web developer :) Web屋さん御用達のChrome DevTools小ネタを紹介。第1弾。(シリーズ化する風) 要素にshadowを追加する時に便利なTipsです。 まずいつも通りDev Toolsを開きます。( Macは command + option + i ) 今回使うのは一番馴染みがあるであろう、ElementsのStylesタブです。 好きな要素のStylesにマウスカーソルを載せると5つアイコンが出てきます。左から2つめがshadowです。 吹き出しの中の青いトグルを動かすと直感的に影の向きと大きさ、影のぼやけ方、影の距離を変更できます。便利! こんな...
初めまして、篠原です。 社内では平野ノラとも呼ばれています。 どうぞ宜しくお願いします。 Bootstrap3で表を作るときに便利なclassを使ってみました。 基本のテーブル 順位 名前 県名 票数 1位 奈良県 せんとくん 60票 2位 愛知県 ひでっち 45票 3位 神奈川県 ヤマトン 44票 4位 新潟県 レルヒさん 43票 5位 兵庫県 はばタン 37票 ちなみにこちらは、地域マスコットの見た目ダサくね!?と思う都道府県ランキングです。 私はヤマトンが好きなので少々悲しかったです。 参考にしたランキングサイトはこちら → goo ランキング さて続いて、便利なクラスをみてい...
Bootstropレスポンシブ対応で、デバイスに対応する画面サイズが覚えられないのでまとめときます。 詳しくは公式サイトをみるといいです→http://getbootstrap.com/css/#grid Bootstrapのブレイクポイント モバイル タブレット デスクトップ デスクトップ大 画面幅 768px以下 769px以上〜992px未満 992px以上〜1200px未満 1200px以上 表示サイズ 100% 750px 970px 1170px 大きさ xs エクストラスモール sm スモール md ミディアム lg ラージ クラス名 col-xs-n col-sm-n col-...
リスト関連のプロパティは以下に示す4パターンがあるよう。 list-style 関連プロパティ リスト記号 list-style-type リスト記号の画像 URL list-style-image リスト記号の位置 list-style-position まとめて指定 list-style list-style-typeでのリスト記号の種類 html例 項目1 項目2 項目3 css例 li { list-style-type: none; } リストタイプ none 項目1 項目2 項目3 disc 項目1 項目2 項...
買っといてずっとやっていなかった「作りながら学ぶHTML/CSSデザインの教科書」ちゃんと勉強してみることにした。 まずは超基礎からやんねーとな。 本の紹介はこちら→http://htmlcss.cat-speak.net/ サンプルページ→サンプルサイトのデモページ ユーザー名:sample パスワード:htmlcss 作るものはサンプルページ おー!シンプルながら、とてもみやすい構成ですな! jQueryとか使ってるよー 今回は教科書のサンプル原稿、画像をもとにhtml/cssの基礎を学びながらこのサンプルサイトを作っていきます。 HTMLタグ 2章で学んだhtmlのタグ集をまとめました。...
Emmetとは HTMLとCSSの入力補完。 Zen-Codingの後見。 展開後のカーソル位置が親切。 Sassなどのプリプロセッサ系より導入コストが低い。 少し覚えるだけですぐ便利。 導入 IntelliJ IDEA 標準サポートなのですぐ利用出来ます。 キーマップなどはお好みで変更出来るのでお試しください。 Preferencesの中で"Emmet"で検索をすると項目がすぐ見つかります。 SublimeText 他のプラグイン同様、Package Control からInstall Packageを選択します。 リストからEmmetを選ぶだけ!簡単ですね。 他の定番エディタたち、Coda...
Sass(Syntactically Awesome Stylesheets)とは CSSを記述する為のメタ言語のひとつで、プログラミング言語の仕様を取り入れて効率的にCSSを定義できるようにした言語。 Sassのバージョン3.0からは、CSSの文法・記法を拡張して上記の機能を取り入れたSCSS(Sassy CSS)言語が採用された。 http://e-words.jp/w/Sass.html より抜粋 要するに、CSSの記法を拡張して変数とか、演算とか、ifとか書ける、とっても便利なもの。 似た言語にLESSというのもあります。 とりあえずSass導入の手順とLESSとの比較はとばします。 ...
ずっと気になっていたので念願叶えてみた。 I wanted to meet you. Noto Sans Japanese!(カタコト では早速。 http://www.google.com/fonts#UsePlace:use/Collection:Noto+Sans あれ、、Japaneseの文字が見当たらない・・・ これは自力でなんとかしろよ、ってことですね。了解です。 と、おもいきや。 (てっきり、Apache Licenseでfont公開してやったんだからあとは良きに使いなさいよ。ってことだと思っていたのですが・・・) なんか発見。 http://www.google.com/fon...