作成:2016/07/19 Web制作 > JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 メタ言語でなく、CSSで見たい方は「View Compiled CSS」でコンパイルして見てください。 ※CodepenのURLの末尾に「?editors=1100」を付与するとhtml/cssのみの編集画面で閲覧できるので、今回は全てのURL末尾に付与してます。 モーダルウィンドウ チェックボックスを使わないタイプ。擬似クラスである:targetを使い、アンカーリンク(#シャープ)にスタイルを適用しモーダルウィンドウを表示しています。 .foo:target { color: red; } :target擬似クラスを利用すれば、J
gulpから黒画面のコマンドを叩いて実行 gruntでlivereloadxを実行ってのはあったけど、gulpはなかったので載せてみた。 var gulp = require('gulp'), exec = require('child_process').exec; gulp.task('livereloadx', function(){ exec('livereloadx -s -p 8000'); }); gulp.task('livereloadx', ['livereloadx']); 最低限必要な記述。 node.js,livereloadx,gulpは別途コマンドラインでインストールしておいてください。 child_processを使うことで、gulpから黒画面のコマンドを叩いて実行させることが出来ます。 gulpfile.jsが存在するディレクトリでlivereloadxコ
ブラウザ上でWeb制作作業を行うことも多くなってきましたが、拡張機能は揃ってますか?DevToolsしか使っていないという方にはこの記事はまさにおすすめ。便利な拡張機能を使って、効率良くWeb制作をしましょう! FireFoxを使っているかたは、FireFoxの無料アドオンまとめも合わせてチェック! Chromeおすすめ拡張機能まとめ 25本 Web Developer 定番のWeb開発ツール。javascriptのオンオフや画像の非表示など多くのことができます。 Web Developer Checklist Web開発にやるべきことのチェックリストを作れる拡張機能。タスク一覧が表示されるシンプルなチェックリストです。 Page Ruler コンテンツのサイズをドラッグ&ドロップで測定できるChrome拡張機能。Webサイトのサムネイルの大きさや、コンテンツの間隔などを測定するときに使っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く