Gruntで始めるWeb制作の自動化
Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
イベントデリゲートで理解するjQueryのonメソッド
イベントデリゲートで理解するjQueryのonメソッド このエントリーはjQuery Advent Calendar 2013の 1日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) イベントデリゲートとonメソッドについて解説します。 onメソッドはjQuery 1.7で新たに追加されたメソッドで、それまで利用されていたbindメソッドやliveメソッド、delegeteメソッドの代わりに利用できるメソッドです。 onメソッドの使い方を理解するにはJavaScriptのイベントバブリングを利用したイベントデリゲートを知るのが一番よいでしょう。 イベントバブリングとは? clickなどのイベントはイベントが発生した要素から親要素に伝播されます。これをイベントバブリングといいます。簡単なサンプルで解説し
File APIを使ってみよう
File APIを使ってみよう このエントリーはjQuery Advent Calendar 2013の 5日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はFile APIを利用してローカルファイルの内容をページに表示する方法を解説します。 File APIが利用できるブラウザではwindowオブジェクトにFileプロパティが設定されているので以下のようなスクリプトでFile APIが利用できるブラウザと利用できないブラウザで処理を切り分けることができます。 if(window.File){ alert("File APIが利用できます"); }else{ alert("File APIが利用できません"); } サンプル1 ちなみにIEはIE10からFile APIが利用できます。 Fil
jQueryのstopメソッドとfinishメソッド
jQueryのstopメソッドとfinishメソッド このエントリーはjQuery Advent Calendar 2013の 3日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 3日目はアニメーションの制御に利用するjQueryのstopメソッドとfinishメソッドについて解説します。 アニメーションの基本 jQueryのアニメーションはキューと呼ばれるものに格納されます。たとえば次のように4つのアニメーションを指定した場合、それぞれキューに格納され、最初のアニメーションが終了した場合に次のアニメーションが、さらに終了した際に次のアニメーションがといった具合に実行されていきます。 $("div").animate({ left:100 }).animate({ top:100 }).animat
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
jQuery 1.9.0におけるhover()
jQuery 1.9.0におけるhover() jQuery Core 1.9 Upgrade Guideの日本語解説がいくつか出ていて、間違った内容が記述されてるので補足と訂正をしておきます。 [jQuery/Javascript]jQuery Core 1.9 Upgrade Guideの翻訳というか解説 | Wood-Roots.blog jQuery 1.9 で変わったところを調べてみる。 | バシャログ。 共に「hover() が非推奨に」となってるがこれは間違い。 As of 1.9, the event name string "hover" is no longer supported as a synonym for "mouseenter mouseleave". This allows applications to attach and trigger a cu
[to-R]JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信
Tailwind CSSで任意のメディアクエリを指定する Tailwind CSSでは簡単にメディアクエリの指定が可能です。 2023年11月 2日 00:40 カテゴリー CSS Tailwind CSSでdisabled Tailwind CSSでdisabled属性がついた要素に対してスタイルを当てたい場合には、disabled擬似クラスを利用して指定を行います。 2023年10月19日 15:32 カテゴリー CSS Vue.jsでコンポーネントの要素をpropsによって切り替える Vue.jsでボタンコンポーネントなどを作成する場合、ユースケースに応じてHTMLの実体をa要素とbutton要素と切り替えたいケースというのが発生します。 2023年9月15日 11:18 カテゴリー JavaScript Nuxt3でESLintの設定をする 案件でNuxt3のESLint設定をする
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
