Sassを使いたくなる！便利機能をまとめてみました。 | MONSTER DIVE
前回は効率的な制作環境を作るために、Gruntについて紹介しました。今回はCSSを効率よく書くことができるSassについて紹介したいと思います。 Sassを使い始めて1年ほど経ちますが、その便利さに、今ではコーディングをする上で欠かせなくなりました。 CSSの場合は、同じスタイルを何度も定義したり、プロパティの変更の修正が面倒だったりします。 Sassを使うと、CSSでは面倒なことを解決できるだけでなく、変数が利用できたり、スタイルの使い回しができたり、for文や四則演算まで使えます！ それらを使いこなせば、CSSをより便利で効率的に書くことが出来る。CSS設計もしやすくなります。CSSのパワーアップさせた言語、それがSass！のような感じです。 Sass特長 セレクタがネスト（入れ子）になっているので見やすい。また、セレクタの変更に柔軟に対応できる セレクタの使い回し（extend）がで
Sublime Text で PHP 実行する方法 - 技術ブログ | 株式会社クラウディア
みなさんはローカル開発環境でエディタは何を使っていますか？私は Java の場合は Eclipse で、PHP の場合は『Sublime Text2/3』を使っています。 Sublime Text を選んだ理由は4つ 右のミニマップが便利 動作が軽い vim 化が簡単 GUI のデザインがイケてる PHP みたいにコンパイルが必要ない言語は、サーバー上で vim を使ってちゃちゃっと書いちゃってもいいんですが、案件によってはサーバーにログイン出来ないこともあるしねー 今日はそんな Sublime Text で PHP を書いた後にそのまま実行して結果をコンソールに出す方法をご紹介。 1. 何はともあれ PC に PHP をインストールする PHP5.6 ダウンロードサイト へアクセスして、32bit版 or 64bit版をお使いの PC の環境に合わせてダウンロード Zip ファイルをダウ
Sublime Text 3 で PHP を ビルドする方法 | WebMemo
sublime text 3 で PHP をビルドできないかな〜と探していたら、その方法が見つかったので、メモっておきます。 まずは、sublime text 3 のメニューバーから以下を選択Tool -> Build System -> New Build System...ここで、新規ファイルが開くので、以下をコピーして貼付ける{ "path": "/usr/local/bin:$PATH", "cmd": ["php", "-f", "$file"], "selector": "source.php" }以下の名前で保存。PHP.sublime-build適当にPHPのファイルを作成して、command + B を押してみる。 例えばこんな PHPプログラム。<?php echo ("Hello, World\n"); ?>作成後ファイルを保存して、command + B を押すと
IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のMobile Safariで非常に機能し、Windows Phone8でも機能します。 IE7以下は非サポートで、IE8はエフェクトなしで機能します。 まずは、テキストを配置したモーダルウインドウから。 Modal Text モーダルウインドウ内にトリガーを設定することも可能で、「Open a new modal」をクリックすると別のウインドウが開きます。 ウインドウを閉じるには、右上のクローズをク
gulp入門その３―こまごま便利なこと
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) まさかgulpネタをこんなに引っ張ることになるとは思わず、アイキャッチは使いまわしです。 今回は、細かい便利な機能をgulpに乗せてみましょう。 今までの記事はこちら gulp入門その１―とりあえず動かすところまで gulp入門その２―ファイルの監視をしてみる もくじ 同期処理をする ローカルサーバを立ててライブリロードする CSSのminifyしたりプロパティを並び替えたりする package.jsonでモジュールを管理する まとめ ※今回は手順にプラグインのインストールを含めません。 インストール方法は前回・前々回の記事を参照にしてください。 同期処理をする 初回からさんざん書く書く言っていた同期処理です。 そもそもgulpは非同期処理なのでタスクの完了が早いわけですが、どうしても同期的に処理したい場合もあります。 そこでru
gulpの基本的な使い方（gulp.jsの基礎をしっかり理解する） | mae's blog
ここのところのgulpの勢いに負けて、自分もついにGruntからgulpに移行しました。gulpはGruntと同様フロントエンド開発用のタスクランナーです。最初はGruntとそれほど変わらないだろうと思っていましたが、タスクを書いてみるとその違いがすぐにわかりました。シンプルに書けるだけでもgulpはかなり良いです。今回、自分の理解を深めるついでに基本的なタスクの書き方をまとめてみました。 gulpの特徴まずgulpの特徴を簡単に書いていきます。 ストリーム: gulpは、「the streaming build system」と言われているようにNode.jsのストリーム（ファイルのパスとファイルの中身の情報を持ったオブジェクト）を使って処理を行っていきます。そのため中間ファイルを生成することなくタスクが実行されていくため高速に処理がなされます。並列処理: さらにgulpは、処理が一つ一
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
