レスポンシブイメージのポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替える ｜ Tips Note by TAM
2017.10.06 レスポンシブイメージのポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替える スマホでは縦長の画像を表示したいけれど、PCでは横長の画像を表示したいということがよくあります。 そんな時にはJavaScriptで横幅を判定して切り替えるという方法がよくとられると思います。例えば、以下のような方法ですね。 jQueryでウィンドウサイズによって画像を切り替える 最近では、pictureタグなどを使ったいわゆるレスポンシブイメージを使える環境が増えてきてきているのをご存知でしょうか。 レスポンシブイメージとは、「画像を読み込む前に、ブラウザ側で横幅や解像度などを考慮して、指定された、もしくは最適な画像ファイルだけを読み込んでくれるHTMLのネイティブな機能」です。対応しているブラウザであればCSSもJavaScriptも使わずに使用できます。
SassとPostCSSを組み合わせて作るCSS開発環境 ｜ Tips Note by TAM
突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではない はい、これです。 この記事で言いたいことは、これがほぼ全てです。 僕は、PostCSSを、コンパイルしてCSSを生成するSassのようなものだと思っていました！ ですが、そもそもSassを使っていたので全くと言っていいほど必要性を感じてませんでした。 PostCSSは自分で必要な機能だけを選べるからカスタマイズ性がある！楽しい！軽い！ とか言われても、Sass遅くないし、むしろ必要な機能を選んで構成するのがめんどくさいと思ってました。というか今も思ってます。 ポストプロセッサーとしてのPostCSS PostCSSというくらいなので、ポストプロセッサーとして、生成されたCSSに対して後処理をすることに使えます。 (導入するプラグインによっては
Movable Typeの構築や運用時によく使うプラグイン8選 ｜ Tips Note by TAM
先日、MT7のプレビューイベントに参加しました。MT7楽しみですね！ 今日はMT7の話ではなく、Movable Typeのプラグインの話です。 個人的に構築や運用の時によく使うプラグインがだいぶ固定されてきたので紹介します！ MTAppjQuery 管理画面でオリジナルのJavaScriptやCSSが使えるようになるプラグイン！ 主に投稿画面のレイアウトの調整などに使うことが多いです！ 先日、紹介記事を書いたので、使い方や活用方法など参考にしてみてください。 MTAppjQueryで管理画面を使いやすくするカスタマイズ6選 MTAppjQuery公式サイト PageBute htmlをページ分割してくれる定番プラグイン！もはや説明不要ですね。 色々とテンプレートタグが用意されていて、柔軟な表示に対応できるので助かっています。 静的ページ用ページ分割プラグイン:PageBute QuickR
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM
「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
URLの異なるPCサイトとスマホサイトのSEOについて ｜ Tips Note by TAM
今回はPCサイトとスマホサイトを異なるURLで作成する際に必要になっていくる対応策についてまとめていきたいと思います。 PCサイトとスマホサイトで別々のURLで作成するとはどういうこと？ PCサイトのURL：http://www.tam-tam.co.jp/ スマホサイトのURL：http://www.tam-tam.co.jp/sp/ 上記のように、同一コンテンツがPCサイトのURL・スマホサイトのURLの2つ存在する事になります。 このまま何も対処をしなければ、重複コンテンツとみなされペナルティを受ける可能性があります。 対処方法 alternate属性の設定（PCサイトに設定） canonical属性の設定（SPサイトに設定） リダイレクト設定をする 1. alternate属性の設定（PCサイトに設定） まず、GooglebotがPCサイトを訪れた際に、同一コンテンツのスマホサイト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
