はてなブックマーク

現在、Sublime Text 3を使っていますが、使い勝手によっては、乗り換えを検討したいと考えていました。 結論から言うと、まだ、Sublime Text 3をメインで使用しています。 こんな感じで比べてみました 特徴的な機能 操作について Linterについて デメリット 特徴的な機能 まず前提として、これらのエディタには、以下のような機能が求められたのだと考えます。 Eclipseなどの統合開発環境よりも、気軽にコーディングしたい。 Dreamweaverよりも軽く動作し、カスタマイズしやすいものが良い。 普通のテキストエディタよりもコーディングしやすい。 環境が変わっても扱えるものが良い（マルチプラットフォーム） これらは当たり前なので、それ以外の特徴的な機能を書き出してみます。

モダンなWeb制作をされている方であれば、すでに利用しているかもしれません。 Sass（SCSS）は、うまく使えば、それなりに便利ですが、それほどすごいということは、ありません。 使い方によっては、素のCSSよりも分かりにくくなります。 ネガティブな内容かもしれませんが、ざっとSass（SCSS）をまとめてみます。 Sass（SCSS）とは Sassとは、Syntactically Awesome Style Sheetsの略です。 CSSを便利に書くために作られた言語で、似たものでは、LessやStylusというものがあります。 実際にブラウザで認識させるには、CSSに変換する必要があります。 Sass: Syntactically Awesome Style Sheets 二つの書き方 Sassには、二つの書き方があります。 インデントでネストを管理し、｛｝や；が必要がない書き方。 拡

メディアクエリ（Media Queries）の罠 – $(window).width()とスクロールバー 2015-05-26 JavaScript スクロールバーが表示される場合その幅を含んでしまうということです。 メディアクエリだけで、レスポンシブWebデザインを行うのであれば、ブレークポイントのずれがないので、問題ありません。 しかし、JavaScriptを一緒に使う場合は、注意が必要です。 jQueryでWindowサイズを取得する場合、このように書くことが多いと思います。 これだと、スクロールバーの幅が含まれていないので、15～20pxくらいメディアクエリと差が出てしまいます。 jQuery if ( $(window).width() < 768 ){ ... } レスポンシブで、メディアクエリとともにJavaScriptを併用するとき、メディアクエリ側でスクロールバーを含むの

どうも、もりさんです。 すっかり月一更新となってしまいました。 以前、CSSの命名規則について考えるという記事を書きましたが、実際にBEMを使用してみて、すごく良かったので、まとめてみます。 CSSの命名規則について考える BEM（ベム）について CSSの命名規則の一つで、Block（ブロック）、Element（エレメント）、Modifier（モディファイア）の略です。 Elementの前には_（アンダーバー）二つ、Modifierの前には-（ハイフン）二つで区切って、class名をつけます。 .block__element--modifier{ ... } これらの区切り（セパレータ）は、必ずしも二つである必要はありません。 しかし、class名を見るだけで、BEMを利用していると分かるので、二つにした方が良いと、考えています。 それ以外、名前のつけ方には、特に難しいことはありません。

みなさんは、構造化データというものを聞いたことがありますか？ 簡単に言えば、検索エンジンにサイトの情報を分かりやすく伝える方法です。 Googleで検索してみると、こんな感じで表示されるものが、それに当たります。 拡張された検索結果を、リッチ スニペットと言います。 どうしたら、このように表示させることができるのでしょうか？ データ ハイライターとマークアップ リッチ スニペットを表示させるためには、以下の方法があります。 マークアップを追加して、構造化データを認識させるデータ ハイライターを使用する マークアップを追加して、構造化データを認識させる サイトのHTMLを編集できれば、構造化データのマークアップを追加することで、リッチ スニペットを利用することができます。 マークアップの形式は、3つあります。 Googleが、microdataを推奨しているので、新しくマークアップするのであ

いつものNode.jsのインストール Windowsは、公式サイトから実行ファイルをダウンロードしてインストールしましょう。 Macも同じようにインストールできますが、Homebrewというパッケージ管理ツールを使用しても良いです。 node.js Homebrew Gulpをインストール Node.jsが用意できたらGulpをインストールしましょう。 WindowsならDOSコマンドプロンプト、Macならターミナルからコマンドを実行していきます。 > npm install -g gulp Gulpを使うディレクトリを作成しましょう。 > mkdir project > cd project package.jsonを作成します。基本的には、全てEnterで大丈夫です。 > npm init This utility will walk you through creating a pa

こんにちは、もりさんです。 すでにもう有名ですが、Sublime Textについて書きます。 少し前にたまたまcssが3000行くらいになった時、DreamWeaverが遅い、と思ってしまいました。 というわけで、いろいろ検索して調べたり、良さそうなエディタをピックアップし、Sublime Textに決定しました。 Sublime Textの良いところ Sublime Textの良いところをいくつか上げてみます。 とにかく軽い 他にも軽いエディタがありますが、これもかなりの軽さです。 クロスプラットフォーム WindowsとMac、さらにLinuxにもあります。 自宅や会社でPCが変わっても違和感はでません。 プラグインが多い 実は、そのまま使うと、あまり良さが出ません。 自分にあったプラグインを見つけて、入れましょう。 カスタマイズ テーマが豊富で、各種設定が細かくできます。 前の状態で

ほぼ Internet Explorer のサポートが終わったことで、気兼ねなく CSS Grid レイアウトが使えるようになりました。 Bootstrap のような擬似的なものではなく、display: grid / display: inline-grid をつかうことで、自在にレイアウトできるようになります。