2013年にお世話になった3つのWeb系◯◯の教科書｜男子ハック
新婚旅行中に読んだ「SEO内部対策の教科書」2013年3月頃にスペインに新婚旅行に行ってきました。ゆっくり時間を取ることができるタイミングなんてないので飛行機の中や旅先で勉強しよう！ということで購入した本。 2013年になってSEOの外部対策よりも内部対策のほうが重要になるだろうな...と予想していたのですが、結果的に予想通りになったのでとても参考になりました。 内容も「教科書」と書かれているように、とても読みやすくわかりやすいものでした。内部対策のことを勉強したいと思っている人にはおすすめです。 WordPressをもう少し使いこなしくて読んだ「WordPressの教科書2」男子ハックでは記事執筆担当は僕（@JUNP_N）が行い、開発案件はさく（@saku_t2）が行っています。 当初は2人でWordPressを触っていたのですが、今は任せっきり。技術レベルが離れていってしまったので、少
Sassで複数のcssファイルを統合 @import |
もちろんSassじゃなくても@importで複数のcssファイルを読み込むことはできます。ですがその場合ですと、読み込むcssファイル分のHTTPリクエストが発生してパフォーマンスに影響を与えてしまいます。 Sassだと@importを使うとスタイルシートを統合することになるので、1回のHTTPリクセストで済むことになり、パフォーマンスに影響を与えなくなるそうです。（実際に吐き出されたファイルを見ても@import の記述はなくなっています） 統合するファイル：style.scss 他のscssファイル：_other.scss、_homu.scss Sassコマンド入力後生成されるファイル：style.css style.scssに @import "other"; @import "homu"; と記述して sass style.scss:style.css 上記のようにコマンドを
Sass + Compass を使って、効率良く css をコーディングしよう！ | SONICMOOV LAB
皆さまお久しぶりでございます。 ラーメン女子のうさこです。 会社に入ってもうすぐ１年が経とうとしています。 早いですね・・・色々ありましたが本当にあっという間でした（遠い目 今年も残りわずか 26 日ですよ・・・っ 皆さま、やり残したことはありませんか？・・・わたしはいっぱいあります。 最近はラーメンを食べる機会が徐々に減ってきています。 ちょっとは体に気をつけなきゃいけないお年頃に・・・。 前回の記事「Sublime Text 2 を使ってみよう（コーダー編）」が大変好評だったので、今回はそれに関連付けた記事とさせていただきますっ こちらの記事は、CSS はある程度書けるんだぜッ！という方を対象としています！ CSS をこれから勉強するつもりである方は、ある程度習得してからトライしてみてください！ 昔の恩師からよく言われていました・・・Step by Step です！ 目次 Sass の
カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。 過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。 ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増
Sass の @extend はどこがすごいのか
この記事では Less & Sass Advent calendar 2011 の 16 日目として、Sass の @extend 機能について書いてみます。が、諸事情により締め切りを過ぎてからあわてて書いており、かなりとっ散らかったものになるであろうことをあらかじめお断りしておきます。 さて、まずは @extend の基本的な機能についてざっとおさらい。@extend される側として一連のスタイルを定義したセレクタがあり、そのセレクタを @extend で継承しつつプロパティを追加したりして、新しいセレクタを作ります: // SCSS // 継承元のセレクタ .button { display: inline-block; border: 1px solid gray; background-color: silver; &:hover { border-color: black; }
WEBサイトの制作を効率良く行なうためのツール、CodeKitの使い方とおすすめ設定 | non-standard world株式会社
Web制作を高速化してくれるツールとして、以前このブログでも紹介したCodeKit。 ただ、インストールしてみたものの、いまいち設定や活用方法がわからないという方もいるのではないでしょうか。 というわけで、CodeKitの活用とおすすめの設定内容を書いてみたいと思います。 CodeKitでできること まずは、CodeKitでできることを一通り確認しておきましょう。 CSSメタ言語（Sass、LESS、Stylus）のコンパイル JavaScriptメタ言語（CoffeeScript）のコンパイル HTMLマークアップ言語（Jade、Haml、Slim、Kit Language）のコンパイル JavaScriptのミニファイ、結合、文法チェック ブラウザのオートリロード 画像の軽量化 フレームワークの利用 チームでのプロジェクト共有 インストールしたらまずどうするの？ プロジェクトの追加 C
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。
【Sassを覚えよう！】もくじ的なのと参考リンク
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTPで作業効率化する方法。 | codechord
Posted 12月 13th, 2012 by codechord. 8 Comments Tweet Tweet こんにちは。Sublime Text 2 Advent Calendar 2012 の13日目です。 http://www.adventar.org/calendars/20 釣りタイトルですいません。 記事が思ったより長くなってしまったので、まず簡単に何をしたいかを説明します。 僕だけじゃないと思うんですが、sass/SCSSを使っている場合に限りですが、サーバにアップするのが自動でできなくて、イライラを感じたことはありませんか？SublimeText2使ったら解消でき、作業効率化できますよ。というお話で、一連の設定手順を紹介します。 SublimeText2を使って、Sass/SCSS(compass)を使い自動生成したcssファイルを自動でサーバにアップロード。これっ
Sublime Text 2 で Sass/compass のコンパイルができるパッケージ 『Compass』 « shilog
この記事は Sublime Text 2 Advent Calendar 2012 とは関係なく書いております。 いや、Sublime Text 2 Advent Calendar 2012 で投稿されていた 一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTPで作業効率化する方法。 という記事を読んで、自分で試したことのメモなので少し関係あるかな。 記事書いてくれた @tomo_thumb さん、ありがとうございます m(_ _ )m ということで、Sublime Text 2 だけで Sass/Compass のコンパイルができるということで、黒い画面でコマンドゴニョゴニョしたり、いちいち Scout 立ち上げたりしなくてもよさそうなので、Sass/Compass の導入の敷居が少し下がりそうな感じですね。以下、Windows 環境での解説。 pack
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
howtohp.com - howtohp リソースおよび情報
Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
howtohp.com - howtohp リソースおよび情報
Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS拡張メタ言語「Sass」フレームワークをインストール（Mac） | サイブリッジラボブログ
こんにちは、デザイナーの石井です。 1年ほど前からTwitterのTLなどでしばしば目にして気になっていた「Sass」。 ちょっと調べてみたところ、CSSコーディングの際に「こんな事できたら良いのに！」と 今まで思っていた事が実現出来るすごいフレームワークなのでは？！と思い、 試しに触ってみる事にしました。 が！気軽な気分で手を出してみたものの、Zen Codingの様なものとはまた違い、 どうやらRuby on Railsのプラグインの様なものとして動く様子。 そもそも「Rubyってなに？」っていう状態の生粋の文系デザイナーなので、 案の定、インストールからエラーがでまくり…。 サイブリッジは開発案件も多く手掛けていますので、 こういう時、社内のプログラマーにすぐ聞ける環境なのは助かります。 今回は同じ様に躓くかもしれないデザイナーさんのために、 自分の環境でのインストール成功までの過程
SassとCompassを使って楽しくCSSコーディング！ - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。
初めてSassとCompassを使った際に参考にした記事まとめ
しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽になったりします。 Sassの公式サイトは以下から。 Sass – Syntactically Awesome Stylesheets Compassとは Sassを拡張して、便利な機能を追加してくれるものです。ベンダープレフィックスを自動でつけてくれたり、リセットCSSを呼び出してくれたり、CSSスプライトを使えたりします。 Compassのドキュメントは以下から確認できます。 Compass H
SassでCSSの弱点を克服しよう （1/2）－ ＠IT
maedana SonicGarden SUG（SKIP User Group）／日本Hamlの会 2009/5/22 Railsを使ったWebアプリケーション開発で、プログラマやデザイナを悩ませるものの1つがスタイルシートの記述だろう。Sassを使って、“クールで構造化された”スタイルシートを記述してみよう（編集部） Sassとは、Syntactically Awesome StyleSheetsの頭文字を取ったものです。あえて日本語に訳すと、「かっこいい構文のスタイルシート」といった感じでしょうか。 もう少しシンプルに表現すると「クールなCSS（Cascading Style Sheets）」でもいいかもしれません。Sassはスタイルシートを簡潔に表現するためのメタ言語であり、同時にSassからCSSを生成するための便利なライブラリやコマンドラインツールを提供します。 Sassを使うと
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
