webpackでJavaScriptライブラリを利用する
webpackでJavaScriptライブラリを利用する webpackで様々なJavaScriptライブラリをコマンドラインからインストールして利用する事が可能になります。 webpackのインストールと利用方法 まずプロジェクトフォルダで以下のコマンドでpackage.jsonを作成します。 npm init -y 次にwebpackを以下のコマンドでインストールします。 npm install --save-dev webpack webpackをインストールしたならpackage.jsonと同一階層にwebpack.config.jsという設定ファイルを作成します。 設定内容はひとまず以下のようにしておきます。これは./src/script.jsの内容をコンパイルして./dist/script.jsに出力するという命令です。 module.exports = { entry: __
Androidの「target-densitydpi」でviewportの調整
Androidの「target-densitydpi」でviewportの調整 どうも色々調べているとAndroidのviewport調整はtarget-densitydpiというプロパティで行うのがよさそうです。 「target-densitydpi」はAndroid2.0以上で利用でき、表示時のdpi(dots per inch/1インチの中に何ドット表示するか)を指定できます。 <meta name="viewport" content="width=device-width;target-densitydpi=device-dpi"> device-dpiを指定すると画面解像度とディスプレイ表示が同じサイズになります。これでかなり直感的でわかりやすくなると思いますが、画像が多いデザインだととファイルサイズが気になるところです。 キーワード指定では「low-dpi(120dpi)」、
floatした際に背景が消える件【css tip】
floatした際に背景が消える件【css tip】 親ボックスに背景を適用して、内包する子ボックスに対してfloatを適用した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ width:204px; background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適用した場合、以下のような表示に
商品画像掲載のページ構成CSS
商品画像掲載のページ構成CSS ネタ元：商品画像掲載のページ構成css or table? なかなか語られることのない、Web制作の問題点が議論されています。 この問題はheightLine.jsを使ったり、tableで組むことで解決できるのですが、なんかそれをやると負けた気がする人がいるのも理解できます。 ですので、私が最近使っている方法を紹介。 サンプル コードに関してはサンプルから参照してください。 行ごとにブロックレベル要素で包み、その要素(サンプルではul要素)に対して、商品のリスト表示に使っている要素(サンプルではli要素)にかかっている物とおなじfloatプロパティを適用します。 副産物として、行ごとにブロックレベル要素で包んでいるのでclassを適用することにより背景色を変更することができます。 このマークアップも好みが分かれる所だと思いますが参考までに 関連エントリー 高
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
「CSS Reloaded」CSS3の実践的な使い方をご紹介！の感想
「CSS Reloaded」CSS3の実践的な使い方をご紹介！の感想 先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介！」に行ってきました。 資料が公開されました。 ■出典元：CSS Reloaded ■著者；John Allsopp ■リンク：Web Directions East 以下、内容を復習もかねてまとめてみました。（サンプルやブラウザ対応などは私が補足したものです。） CSSの歴史 1996年ぐらいからありました。 2000年にCSSのサポートが良いMac IEが登場 2000-2005年はCSS3の開発がストップ 2000-2008年でブラウザが劇的にCSSに対応していく。(ブラウザ Reloaded) 各ブラウザはCSS3を試験的に実装 プリフィックスをプロパティの先頭につける事によってCSS3を実装することが可能。 Firef
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
