clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。 The very latest clearfix reloaded clearfixとは おさらい: micro clerafix(IE6+) モダンブラウザ用のclearfix最新版 clearfixとは 「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。 おさらい: micro clerafix(IE6+) まずは、おさらい。 micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。
Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの
コマンドラインツール ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。 まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。 気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw Brackets メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Ca
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻 | DevelopersIO
ダミーテキストの挿入 loremを記載して、展開するとダミーのテキストを挿入してくれます。 //展開前 p*3>lorem //展開後 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil laborum vero possimus. Nobis velit iste eveniet atque aspernatur! Repellendus illum nulla similique quia.</p> <p>Magni sapiente dolorum dolorem expedita natus eaque aut nesciunt modi libero aspernatur omn
SublimeText2でDreamweaverと同じショートカットで改行タグ（br）を挿入できるようにする
Posted: 2013.02.14 / Category: 開発環境 / Tag: SublimeText DreamweaverはShift+Enterで改行タグ（br）が追加できて便利でした。 で、最近使ってるSublime Text 2 でも同じ事やりてえ！って こちら のページを拝見しましたが、自分の環境ではうまく動かずカスタマイズしてみました。 キーバインドの設定 メニューから「Preferences」→「Key Bindings – User」でjsonファイルが開きますので下記のようにします。 Default.sublime-keymap — user [ // brタグ挿入 { "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "<br>\n"}, "context": [
「コーディングを支える技術」著者公式ページ
世の中にはたくさんのプログラミング言語があります。そしてプログラミングに関する概念も、関数、型、スコープ、クラス、継承など、さまざまなものがあります。多くの言語で共通して使われる概念もあれば、一部の言語でしか使われない概念もあります。これらの概念は、なぜ生まれたのでしょうか。本書のテーマは、その「なぜ」を理解することです。 そのために本書では、言語設計者の視点に立ち、複数の言語を比較し、そして言語がどう変化してきたのかを解説します。いろいろな概念が「なぜ」生まれたのかを理解することで、なぜ使うべきか、いつ使うべきか、どう使うべきかを判断できるようになるでしょう。そして、今後生まれてくる新しい概念も、よりいっそう理解しやすくなることでしょう。 ■最新情報 ■目次 ■正誤情報 ■補足記事 ■技術評論社の書籍情報ページからは、 書籍内容に関するお問い合わせや、 学校・法人向け一括購入、テキスト採
Sublime Text 2でコンパイル編 ｜ クラスメソッド開発ブログ
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
知らない人は遅れてる？新Zen-Coding Emmet
頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。 早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加 Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge
米国人からコーディングについての怒りのメールを頂戴した - その手の平は尻もつかめるさ
"米国人からコーディングについての怒りのメールを頂戴した" の補足 - その手の平は尻もつかめるさ ↑の方で補足いたしました。(2012.09.04 追記) 最近、英語のメールでよく怒られます。moznion です。 海を隔てて共同作業しているアメリカ人から、僕のコーディングについてお叱りのメールを頂いたので、 自戒の念を込めて邦訳して記します。 書いてあることは「当然」とも言うべき内容ですが、僕はその「当然」も守れていなかったのかぁ〜と反省。 以下、邦訳(意訳)です。 1. 郷に入っては郷に従え 既にソースコードが存在しているって事は、そこには同時にコーディングスタイルも存在しているってことだ。 その既存のソースコードに手を加える場合、別のコーディングスタイルを導入してはならない。 もし君がバックエンドのソースコードを弄っているなら、バックエンドのコーディングスタイルで記述するんだ。 フ
コメントを生成して挿入するDreamweaver用拡張機能を作成しました | Topics | DB - KAYAC Designer's Blog （カヤック デザイナーブログ）
意匠部、渕上です。 htmlの閉じタグの手前にコメントを入れることがめんどくさくなったので、Dreamwaver用の拡張機能を作って解決することにしました。 どういうコメントかというと、以下のようなやつです。 <div id="container"> ～～～ <!-- /#container --></div> このコメントを入れることでコードの見通しがよくなるので絶対いれたほうがいいことはわかってるんですが、idやclass名を記述しなきゃいけないのがちょっと大変なんですねー。 ダウンロード ということで、作成した拡張機能はコチラ。 ダウンロード - End_comment.mxp インストール mxpファイルをダブルクリックするとAdobe Extention Managerが立ち上がりインストールされます。 インストールできないことがあります 「メニューを更新できませんでした」という
秀丸マクロでZen-Coding
概要 Zen-Coding とは、CSSセレクタ風の簡単な記述を、複雑なHTMLソースへ素早く変換することを軸にしたコーディング支援ツールです。 例えば、div h1 aが<div><h1><a href=""></a></h1></div>になります。 その Zen-Coding を秀丸エディタでも利用できるようにすることをめざした秀丸マクロです。 本家にある機能のうち、「HTML生成」「生成したHTMLで既存のソースをラッピング」のみを実装しています。 そのほかの機能は別項で紹介するいくつかの秀丸マクロに任せ、連携していただく方針です。 インストール 秀丸エディタ（ver 7.00 以降のみで確認）を入れてください。 マクロフォルダのパスを確認します。秀丸エディタの [その他] - [動作環境] - [パス] - [環境] - [マクロファイル用のフォルダ] で指定されているフォルダで
秀丸エディタを HTML や PHP や CSS が気持ち良く書ける環境にする
秀丸を最強のエディタとして活用できるようになるまでの道のりをメモしておきます。後で誰かの参考になれば幸いです。 秀丸のインストール まず秀丸は以下からダウンロードします。 秀まるおのホームページ(サイトー企画)?秀丸エディタ 秀丸のインストールの説明はこちらが分かりやすい。 http://hide.maruo.co.jp/software/install.html#HIDEMARU 基本的な操作や見栄え 秀丸の(その他)ファイルタイプ別の設定には癖があって、事前に設定のリストで用意しておいた設定をある拡張子のファイルに適用することで、今後その拡張子のファイルを開いた際は、その設定が適用されている状態になります。 設定のリストにある共通で設定すれば、他のすべての設定にも適用されるわけではなく、拡張子毎に設定をしていく必要がある(例えばPHPにはPHPファイルという設定を用意して適用する。CS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://luna-plate.com/archives/4637
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP
zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting