イマドキのコーダー環境構築2016CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
CSS(Sass)でレーティング評価の星(★)を表現する方法 - Design Color
仕上がりイメージ 表現したいのは以下のような５つ星のレーティング評価です。食べログやAppStoreなどのレビューでよく見かけますよね。星の数は0.5きざみで推移します。 このレーティング、スプライト画像で実装すると評価ごとにバージョンを量産する必要があったりと少し面倒です。しかも、やっぱり後から星の大きさや色を変えたい！なんてなった時にまた画像を作り直すのはさらに面倒。今回は、そんな手間を解決してくれたCSSでの実装方法を紹介します。 実装方法は以下の記事を参考にさせていただきました。本当にありがとうございます〜！こちらの記事では実際にスライダーを動かして星の数を操作することができるため、イメージがつかみやすいですよ！ CSS(Sass)での実装方法 以下が実装用のコードです！初めてCodepen使いました。便利ですね！ ※あとで説明しますが、管理が楽なのでSass形式で作っています。C
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
