かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
コピペで簡単！レスポンシブ対応の固定ヘッダーナビ作成！ | 刈谷、豊田でウェブサイト制作！合同会社beReady
豊田、刈谷、知立、安城でホームページ制作をやっている合同会社beReadyの奥山です！ 僕は基本的に寝るときはエアコンをつけていないのですが、さすがに暑いので竹マットを敷いて寝ています。 寝返りうつたびにひんやりとして、かなり体温下がります。あとは熱さまシートの枕のやつですね。 あれも体がじんわり冷えていくのが体感できて、おすすめです。 竹シーツ セミダブル「竹駒シーツ」(#9897640)【IT】【tm】セミダブル：約108×176cm冷感寝具 敷きパッド 冷感シーツ ひんやりマット 冷感 敷パッド 竹 マット 価格：2980円（税込、送料無料) (2016/7/30時点) というわけで今回はヘッダーのグローバルメニューのレスポンシブ対応をコピペで使えるコードと解説を行っていきたいと思います！ 結構時間かかりました！！笑 ぜひ見ていってください。 レスポンシブなヘッダーグローバルメニュー
csv2tablejQuery でCSVをテーブル表示
あと、最近のブログはここ JavaScript++かも日記 Facebookの仮想通貨Libra/Diemが来春リリースらしいので久しぶりに触ってみてます Facebookの仮想通貨Libra/Diem関連 |Blog | Demo | Facbook JavaScript部 | jQuery › Downloads › Plugins › csv2table | ( ccchart/ jQchart ) nightly- testing themeroller width jQuery 1.3. test-tm.htm blog デフォルトCSSのリセット方法 Reset the CSS ( default style sheet of csv2table ) csv2tableのデフォルトCSSをリセットし、自由にCSS設定する。 このページに$.csv2table.cssReset(
HTMLの<table>内をソートできるjQueryプラグイン - Qiita
jQueryプラグインとして作ってはみたものの、sortableという名前がいろいろとかぶっていることに気づいたので、github公開はよしてこっちに 使い方 <table> に sortable クラスを付与 ソートしたい <thead> の <th> に sort_number または sort_number_attr クラスを付与 <th> に sort_number_attr クラスを付与した列の <td> には、sort-value 属性でソート順の数値を指定 ソートアルゴリズムはマージソートなので安定ソート ソートのキーにした列の <td> には sort_by_asc および sort_by_desc クラスが付与されるので、cssで色をつけたりできる コード ;(function($) { $.fn.sortableInit = function(){ var elemen
10 million bugs in my code @nanoris : jQuery, table の列幅を変更する [1.0]
2013年08月01日16:34 jQuery, table の列幅を変更する [1.0] カテゴリJavaScript 1 Col.1 Col.2 Col.3 Col.4 Col.5 Col.6 Col.7 th.mousemove - マウスカーソルを変更する。ドラッグ中の幅を変更する。 th.mousedown - ドラッグモードに遷移する。 windows.mouseup - ドラッグモードを終了する。 サンプルコード <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> //$ が jquery 以外で使用されている競合を回避する。 (function($){ //$=JQuery var sheet_nm =
Ginpen.com | Powered by JavaScript and JapaneseSushi
JavaScript and Web by Ginpei
css3のanimationで作る永久ループのスライドショー | パソコン倶楽部りんご
「Pure CSS3 Cycle Slider」をお手本にして、css3のanimationで永久ループするスライドショーを作ります。 とても美しい動作ですので、まずは動作を確認して下さい。 画像にマウスホーバーすると、スライドが止まる マウスホーバーで画像に対応するh1が現れる スライドの表示秒数を伝える工夫もされている マークアップをキチンと考える 最終的にCSSで動作させるのか、jQueryで動作させるのかに関わらず、まずはきちんとマークアップします。そうすると以下の利点があります。 スライドの中身が、クリックさせたいリンクの列挙だとすれば、SEOの効果も望めます。単に画像を動かすのと、見出しタグ付きの要素が動いているのとでは大違いです。 対象ブラウザに合わせて、実装方法を選択できます。例えば、古いIEなどでも動かしたければ、古いIEにだけIEの条件コメントで自作のjQueryを読み
CSS だけで Web ページのフェードイン表示を実装する方法 | q-Az
jQuery を使って実装する方法が過去には一般的でしたが、フェードインだけであれば CSS だけで実装が可能です。 現在このページもその CSS が適用されていますので、ポワーンとフェードインでページが表示がされたと思います。更新する度にフェードインします。 CSS だけでフェードイン body { animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; } @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }body にアニメーションを施すことでフェードイン表示が可能です。これだけで簡単に
[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
showjin.me