Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

HTMLからイベントハンドラを切り離す!救世主イベントリスナー

前回イベントハンドラについて書いた。JavaScriptのイベントハンドラをまとめてみた このイベントハンドラなのだがやや問題があり、今回紹介するイベントリスナーを使ったほうが良いということを学んだので、まとめてみる。イベントハンドラをHTMLから切り離…

JavaScriptのイベントハンドラをまとめてみた

動的なJavaScriptの実行を可能とするイベントハンドラについて学んだことをまとめておく。イベントハンドラとは 通常JavaScriptはWEBサイト(HTMLファイル)の読み込み時に実行されるが、ボタンをクリックする、テキストフォームを選択するなどイベントが発…

これはオシャレ!デザインとアニメーションが秀逸なメニューを実装するJSライブラリ

いつか使いたいと思ったので書いておく。 オシャレなデザインと、かっこいいアニメーションが魅力的なメニューが簡単に実装できる。下記リンクよりDemoページに飛ぶことが出来るので、一度試してみていただきたい。RESPONSIVE MULTI-LEVEL MENU

select-multipleで複数選択した際にJSでoptionを取得する方法

DOM関連の記事を書いているときにelementオブジェクトのselectedIndexプロパティについてふと疑問に思ったことがあったので、わかったことを書いておく。 selectedIndexとはselectタグ内のoptionにアクセスし、何番目のoptionが選択されているかを返すプロパ…

【DOM連載#3】JavaScriptのDOMでHTML要素を追加・削除

DOMの連載記事、最後の3回目は要素の生成、追加、削除について書く。本題に入る前にノードという概念について簡単に書いておく。ノードとは ノードとはHTMLへアクセスするためのインターフェースである。全12種類のノードがあるが、代表的なものは4つ。一つ…

【DOM連載#2】JavaScriptのDOMでHTML要素を編集

DOMの連載記事、2回目は要素の属性や文字列の扱いについて書く。属性、文字列を取得したり、書き換えたりすることが可能だ。 前提としてHTML要素が特定できていなければ編集することが出来ない。なので、要素の参照が分からないという方は以下の記事をどうぞ…

【DOM連載#1】JavaScriptのDOMでHTML要素を参照

最近DOMについて改めて学びなおし、気づきが多かったので連載という形で書き残しておこうと思う。1回目はDOMでのHTML要素の参照について。まずDOMとは何かについて、一応引用しておく。 Document Object Model (DOM) は HTML や XML 文書のためのプログラミ…

これから技術ブログを始めるなら知っておきたい5つのツール

これから技術ブログを始めようという人のために、僕が使えると思ったツールを5つ紹介しようと思う。 コード表示 技術ブログならやはりコードは載せていくだろう。各ブログサービスに標準で用意されている機能やWordPressならプラグインを使って書くことも出…

クリップボードにコピーの実装は難しい?「zClip」が一発解決

ブラウザからクリップボードに文字列をコピーする機能を実装したく調べた結果、便利なJSライブラリがあったので書いておく。zClip

その数300以上!大量のJSライブラリを配信する「cdnjs」がすごい

最近JSライブラリを試すことが多くPC上での管理が破綻しかけていたなか、大量のJSライブラリがまとめられたCDNを発見したので書いておく。ライブラリを軽く試してみたいという人におすすめ。cdnjs

サイトツアーの作成に軽量&IE対応の「Intro.js」をおすすめする

サイトツアーを実現するJSライブラリに興味を持ったので10個以上を見てみた。で、Intro.jsがとても良かったので書いておく。 Intro.js

超軽量&IE対応のレスポンシブナビゲーションバー「responsive-nav.js」

これはいつか使えそうだと思ったので、備忘として書き残しておく。レスポンシブなナビゲーションバーが簡単に実装できるJSライブラリ。RESPONSIVE NAV

Sublime Textから卒業?オンラインエディタのJS Binが便利すぎる

結構前からあるツールのようだが、便利だと思ったので書いておく。 ネットを見ていて「このコード試してみたいな」ということは良くある。で、その都度HTMLファイルを作成し、エディタで編集し、ブラウザで開くとしていると結構手間。 そんな手間を省いてく…

あなたのサイトは大丈夫?WordPressのセキュリティを強化する2つの方法

今日こんなニュースが報道されていた。 全世界のWordPressサイトに大規模攻撃; デフォルトのアドミンユーザ名’admin’がねらわれている 今、WordPressを使っているブログに対する大規模無差別攻撃が行われている。その大半は辞書を使用する力ずくの攻撃で、と…

これは簡単!weinreを使い10の手順でスマホをデバッグする方法

はてなブログをスマホから見るとデフォルトではスマホ用表示がされる。これはスマホからのアクセスと判断した際に、専用のCSSを適用しているためである。(http://hatenablog.com/css/touch/blog-touch.css) このスマホ用CSSで気に入らない部分があったので…

「Sublime Text 2」入門!使い始める前にやっておきたい4つのこと

僕が最強!と思っているエディタ、Sublime Text 2。これからコーディングを始めようと思っている人にぜひおすすめしたいエディタである。 今日はこれからSublime Text 2を使い始めようという人のために、使い始める前にやっておきたい4つのことを紹介する。…

MIT?GPL?ライセンスって何ぞ?jsdo.itから学ぶライセンス入門

現在、GitHubやjsdo.itなどのWeb上で無料で公開、配布されているソースコードは数え切れないほどある。あるライブラリを使えば望む機能が簡単に実装でき、Webサービスを制作する開発者にとっては実装の手間が省けるためとてもありがたいものである。しかしそ…

HTML/CSSの落とし穴!?初心者向け覚えておきたい基本ルール5つ

すっかり春らしくなってきた今日この頃。何らかのきっかけでHTML/CSSを使うことになった人もいるのではなかろうか。今日は初心者の方向けに覚えておきたい基本ルールを5つ紹介する。これを知らないとその内ハマることになると思う。またGoogle社内で推奨され…

CSSセレクタ多すぎ覚えられない!CSS3対応セレクタリストを作ってみた

CSS

CSSセレクタって本当にたくさんあるじゃないですか。それらを全部覚えとくなんて無理な話じゃないですか┐(´ー`)┌ というわけで備忘と、学習目的でセレクタのリストを作ってみた。CSS3対応。サンプル少なくてすいません。こんなのあるんだ的な気づきとなれば…

これからはてなブログを始める人向け!知らなきゃ損する10個の機能

僕はWordPressを運用した経験がある。WordPressでは豊富なプラグインが用意されており、それらを取り込むことで様々な機能の拡張が可能であった。自由度が高い分、プラグイン同士の干渉など考慮すべき点も多く、難しくもあったのだが。 一方、はてなブログで…

ブログをはじめた。

SIerで働くしがなきSE。 Web系プログラミングに興味を持ち、学んだことをこのブログへ書き留めていく。SI事情や、仕事観も気が向いたら書いていこうと思う。