覚えるのはこれだけ！Pug(Jade)のよく使う9つの書き方 ｜ Tips Note by TAM
以前Pug(Jade)を使った制作環境を作る方法を紹介しました。 Pug(Jade)で効率的なマークアップ環境を作る 今回はPugでマークアップをしていくときに、よく使う書き方を紹介します。 ベースになるルールは9個あります。 タグ名はHTMLタグになる 改行をしてインデントをつければ入れ子になる インライン要素や改行にはパイプライン（|）を使う（ここだけ慣れが必要） HTMLはドット（.）で終わる要素の中に入れておけば解釈される 属性は丸括弧内に記述する クラス属性はドット（.）、ID属性はシャープ（#）で表す コメントにはHTMLとして出力されるものと、されないものがある イコール（=）を使えばエスケープできる インクルード（include [ファイル名へのパス]）で共通化したファイルを挿入できる Pugとはなにか？ Sassを使ってCSSを作成している人は多いと思いますが、PugはH
【imageswitch】jQueryでウィンドウサイズによって画像を切り替える ｜ Tips Note by TAM
レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。 backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。 そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。 ウィンドウサイズを検知して画像ファイル名を置換する HTML側は.js-image-switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます（ここでは仮に768pxとします）。.js-image-switchにはCSSでス
Sassに慣れてきたら、mixin集「Bourbon」を使ってみよう！ ｜ Tips Note by TAM
みなさん、楽しいSassライフを送っていますか？ 「とりあえず.cssを.scssに変えて、ネストにしたりして使ってるよ！」という方、そろそろmixinを取り入れてみませんか？ Sassってなんでしょ？という方は、以前「Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！」という記事を書いたので、ぜひそちらをお読み下さい。 Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！ mixinとは？ スタイルを定義するのは通常のCSSと同じですが、使い回しを前提とした、JSで言うところの関数のようなものを作れるのがmixinです。 言葉だけではよくわかりませんね。mixinはこういう書き方をします。 hoge.scss の中身 /* @mixinで始まって半角スペース＋半角英数。.（ドット）や#（シャープ）はつけない */ @mixin myborder { border-bot
Amazonのメガドロップダウンメニューの動作を実現する「jQuery-menu-aim.js」の使い方 ｜ Tips Note by TAM
Amazonのメガドロップダウンメニューはこちらの記事で紹介されている通り、 Javascriptを使用することによってスムーズな操作性を実現しています。 今回はこの記事の最後で紹介されている、 Amazonのメガドロップダウンメニューと同様の動きを実現するプラグイン 「jQuery-menu-aim.js」の使い方を解説いたします。 プラグインは、GitHubからzipファイルをダウンロードします。 zipファイルには、プラグイン本体（jquery.menu-aim.js）の他にサンプルファイル（exampleフォルダ）が同梱されています。 以降ではこのサンプルファイルを元に実装方法を解説いたします。 他のプラグインと同様jQuery本体を読み込んだ後に、先ほどダウンロードしたプラグインのjsファイルを読み込みます。 プラグインを実行するための記述は下記の通りです。 $menu.menu
Facebookページに複数の「いいね！」ボタンを設置したい！ ｜ Tips Note by TAM
「いいね！」ボタンは、読者からの反応が直接反映されるので 1つだけではなく複数設置したい場面があると思います。 （人気商品を知りたい、ランキングを作りたい など） （例） プラザ/PLAZA（ルミネ有楽町店） ※公開終了 → ※赤で囲んだ部分が「いいね！」ボタン。 ところが、 Facebookページ 1ページに対し、 「いいね！」ボタンは 1つしか置くことができません。 それでもやっぱり複数の「いいね！」ボタンを置きたかったので、 独自に考えたてみた複数の「いいね！」ボタンを設置する 2つの設置例をご紹介いたします。 ※非常に無理矢理感のある方法ですので、推奨はいたしません。 Facebookの仕様変更等にも十分ご注意ください。 （例） ・ASCII.jp Web Professional 「書籍紹介」 ※公開終了 「いいね！」ボタンから、 各書籍の詳細情報のページへリンクしています。 ▼
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
