CSSで作ったボタンなどを押していると、テキスト等が選択状態になってしまうのを防ぐ user-select
テキストの選択状態になってしまうのが邪魔な場合に、CSSをつかって テキストの選択が出来ないようにする方法
jQueryをつかって、中身はそのままでHTMLタグを書き換える
HTMLタグを強制的に変更したいときに HTMLから操作がするのが難しいケースや、動的に変更させたいときに使える方法 jQueryを使ってHTMLのタグの中身はそのままで、タグのみを変更する […]
【簡単】コピペで設置 Feedlyの購読者数のカウントボタンを作る
Feedly の高読者数を取得して表示し FacebookやTwitterの様に、カウントを表示したボタンを作る方法
CSSのcontent: “”;に動的に、attrを使ってHTMLのdata-から文字を取得して入れる方法
CSSのcontentに動的に文字を当てはめることが出来るattrの使い方、動的に生成されるHTMLと相性がよく、IE8以上から一応利用することが出来る
ボタンをクリックした時に、波紋のようなエフェクト効果を与えるコード
ボタンをクリックした時に、波紋状のようなものが効果として表示されるエフェクト。border-radius、scale、opacityのをそれぞれ組み合わせて作られている
1つの要素と擬似要素でborderを使って、三角形のアウトラインを作り出すテクニック
CSSのborderをつかって、中身が無い繰り抜かれた状態の三角形を作り出すテクニック。2つの要素を重ねあわせて、重なる部分のborderだけを表示することで三角形を作り出す
CSSだけ、javascriptを使わずに作られた バーガーボタンを押すとスライドインして現れるメニュー
CSSだけで作られたトグルボタンを使ったメニュー。メニューが現れる際のアニメーション等にも凝ったメニューで比較的流用しやすいコードとなっている
HTML5のvideoを画面いっぱいの背景にする方法
HTML5のvideoタグを使って、ブラウザの画面いっぱいに動画を背景として流す方法です。 videoタグとちょっとのCSSで実現可能です。
古いIEのブラウザにネガティブな消極的な対応することで問題を解決する
WEB政策の宿敵 古いバージョンの Internet Explorer 略称：IE この古いIE 主にIE8以下はWEB制作する上でとても邪魔な存在なんですね 動作にバグがあったり、そもそもCSS2、CSS3に対応してい […]
PHPでのコメント(コメントアウト)を使って、一時的にコンテンツを非表示。実行させないようにする
コメントアウトをすることで出力・実行させないようにする PHPのみならず、プログラムにはコメントというものがあります このコメントはプログラムのコードとはされず 人が見やすくするために使われるものなのですが コメントアウ […]
HTML5、CSS3のブラウザ別対応表が簡単に確認できるサイト Can I use…
Can I use… http://caniuse.com/ CSSやHTMLだけではなく、SVGにjavascript APIも対応状況をブラウザごとに確認することができます 他にもPNGのアルファ値が対応 […]
CSSだけでピアノの鍵盤をメニューに仕立てたデザイン
Piano Menu ピアノの鍵盤をメニューに使った、CSSだけで作られたものです 面白いアイディアですね、あと鍵盤をマウスオーバーすると、それぞれから音が鳴ればもっと楽しいですね あとは、このままではメニューとは気づか […]
スマホ・タブレットに適したレスポンシブなドロップダウンメニュー
画面の幅によって自動で変形するメニューです スマホやタブレットにも最適なデザインに変動します Treehouse Contest – Responsive Nav 3段階で表示が変わります 第一 […]
操作が気持ちいい 子メニューがスライドインしてくるサイドバーメニュー ｛HTML・CSS｝
Sidebar Thing サイドメニューをマウスオーバーすると、子メニューがスライドインして上に重なるように表示されます またスライドインするアニメーションもちょうどいい具合で気持ちいい CSSだけで実装可能です &n […]
Brackets でw3cの構文チェックが出来る拡張機能 W3CValidation
W3XのHTML構文チェックをBlacketsで行えるようにする拡張機能
CSSで見出しの一文字目を大きくしたり、色をつけたりする方法
見出しのなどの一文字目を大きくしたり、色を変えたり、背景をつけたりする方法
文字をテキストを曲線に合わせてHTMLとCSSだけで実現するジェネレーター
文字を先に合わせて曲線や、円などにするCSSジェネレーター
Emmetが使えるフリーのエディタKomodo EditにEmmet を導入する方法
フリーのWeb制作ソフト Eomodo Edit にEmmetを導入する方法と、ショートカットを設定する方法
リアルタイムプレビューが出来るHTML、CSSエディタ 「 HTML Live 」
リアルタイムなプレビュー機能をもつHTMLエディタ、HTML Live
HTMLをそのままウェブサイトに表示したい、そんな時に便利なWebサービス Blogtool
手間いらずHTMLを簡単エスケープ出来る WEBサービス Blogtool
