かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Code Snippets | CSS-Tricks
A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
[JS]異なる高さのdiv要素の高さを揃えるだけのシンプルなスクリプト -Equalbox | コリス
Equalbox.js デモページ [ad#ad-2] Equalbox.jsの実装 HTML 各div要素はjQueryのセレクタで指定できるように、idなどを指定します。 <div id="box-container"> <div id="box1" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> </div> <div id="box2" class="box"> <p>dsfsdfsdfsdf</p> </div> <div id="box3" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdf
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
uuAltCSS.js - README
uuAltCSS.js は Webページデザイン を簡単にする JavaScript ライブラリです。 独自のアプローチで、ブラウザ と CSS を切り離し、 古いブラウザでも最新の CSS の仕様に基づいたデザインを可能にします。 また、WebKit系ブラウザでしか利用できないはずの最先端の機能を、様々なブラウザで利用可能にします。 Features - 特徴 CSS3 Selector ready - CSS3 セレクタによる Webページデザインが可能になります。 No! CSS Hack - CSS Hack は一切使えません。 ブラウザ毎のレンダリングの違いはコンディショナルセレクタでスマートに解決できます。 Include cutting-edge technologies - 未来の技術を先取り。豪華なオマケ付きです。 Acid2 Safe - u
display: table, display: table-cell を IE6, IE7 で使えるようにした - latest log
オリジナル uuAltCSS.js を導入 IE6 IE7 Safari4 <!doctype html><html><head><title></title> <style> .cell1, .disptblcell1 { width: 20%; background-color: #FFCC66; } .cell2, .disptblcell2 { width: 29%; background-color: #CC6633; } .cell3, .disptblcell3 { width: 30%; background-color: #FF9966; } .disptbl { display: table; } .disptblcell1 { display: table-cell; } .disptblcell2 { display: table-cell; } .disptblc
コピペで使える言語・コマンドリファレンス - ITproリファレンス：ITpro
HTMLやCSS、DynamicHTML、JavaScriptやPerl、Windowsコマンド、ネットワークコマンド、Linuxコマンドといった、Webサイト構築やアプリ開発に欠かせないプログラミング言語とコマンドのリファレンスマニュアルです。各項目のサンプルコードは、コピーし貼り付けてすぐに使えます。入門講座も用意しました。ぜひブックマークしてお役立てください。 HTML HTMLは、Webコンテンツを作成する上で、最も基礎となる記述言語です。各タグについての概要や属性などをサンプルを交えて説明します。 HTMLリファレンス（107項目） HTMLリファレンスの使い方 HTML入門 CSS CSSは、Webページのレイアウトなどといったコンテンツの見栄えを指定する記述言語です。各スタイルの概要や使い方を説明します。 CSSリファレンス（73項目） CSSリファレンスの使い方 CSSの基
※追加・修正 IT関係やWebデザイナーは絶対に読むべきブログ・サイト
サイトやブログ作り・デザインを考えている時に参考になる記事や影響力の大きいブログやサイトをまとめてみました。 IT関係やデザイナーは絶対に読むべきブログ・サイト 僕も多分、皆さんもお世話になっている方も多いと思いますが 改めて、僕がよく参考にしたり、楽しませてもらったりしているブログやサイトをまとめてみました。 2つのブログを追加させてもらいました。 「ホームページを作る人のネタ帳」さん jQueryやWebデザインと様々な幅の広い話題で毎日を飽きさせてくれないブログです。 なにより、多くの人から愛されているブログだと感じます。 「photoshop vip」 Photoshopのチュートリアルなどを豊富に紹介しています。 Webデザイナー関係の人は、ぜひ見ましょう。 「コリス」さん フリーな素材からJavascriptやCSSなど紹介しています。 更新頻度ま高いので必見です!!! 「We
【ハウツー】HTML＋CSS＋JavaScriptでiPhone/Androidアプリ開発「PhoneGap」 (1) HTML＋CSS＋ＪavaScriptでiPhone/Androidアプリを開発 - PhoneGapとは | エンタープライズ | マイコミジャーナル
Notobiは11月1日(米国時間)、PhoneGapの最新版であるPhoneGap 0.9.2をリリースした。PhoneGapはクロスプラットフォーム・モバイルアプリケーションの開発フレームワーク。デベロッパはHTML＋CSS＋JavaScriptを用いて、iPhone/Android/BlackBerry/Symbian/Palmのネイティブアプリケーションを開発できる。各デバイスのモーションセンサやカメラ、GPSにはPhoneGapにて提供されているJavaScript APIをもちいて操作する。同ライブラリはThe "New" BSD LicenseおよびThe MIT Licenseのデュアルライセンスのもとで公開されているオープンソースソフトウェア。 PhoneGapでのスマートフォン別機能対応表 - PhoneGap Supported Featuresより抜粋 iPhone
いろいろな言語のコーディング規約，スタイルガイドのリスト — TRIVIAL TECHNOLOGIES 2.0
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 みんなのブロックチェーンは，ブロックチェーンの入門書。暗号やハッシュなどを含め，基礎からブロックチェーンの仕組みを学べる書籍です。 いろんな方に「新しい技術を学ぶことの楽しさ」を感じ取ってくれたら著者として嬉しいです:-)。お金は技術的にどのように定義されるのか。 みんなのIoTは，モノのインターネットと呼ばれるIoTの入門書です。IoTの基本について，読者に寄り添って優しく解説しました。裏テーマは一番とっつきやすいPython入門書。サポートページはこちら みんなのPython 第四版は，より分かりやすい入門書を目指し，機械学習やデータサイエンスの章も追加して第三版を大幅に書き換えました。Python 3.6にも華
[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック
CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
JavaScriptコーディングに関するテクニックやパフォーマンス等のリファレンス集:phpspot開発日誌
最近発見した、JavaScriptコーディングに関するテクニックやパフォーマンス等の参考になりそうなエントリをリファレンスをまとめてみました。 Avoiding Problems With JavaScript’s getElementById Method in Internet Explorer 7 | Impressive Webs IE7のgetElementByIdで起こる問題を避けるためのTIPS集。 How to add a CSS Link programmatically using JavaScript <link>タグをJavaScriptによって動的に作成してCSSを動的に設定するコード例 JavaScript CSS Selector Benchmarks CSSセレクタでDOMにアクセスする際の各フレームワークでの速度ベンチマーク比較 6 Ways To Wor
これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック:phpspot開発日誌
Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
