管理画面を作る：AdminLTE 基本編 - Qiita
管理画面を作るのは大変なので、なるべく手間を省きたい。Bootstrapでもいいが、意外としょぼくなるのと、何よりメニュ周りの制御が今ひとつな感じがする。そこで、管理画面作成に特化したCSSフレームワークを使ってみる。 いくつか選択肢はあるが、ここではAdminLTEを利用してみる。 bootstrapベースとはなっているが、いろいろと独自の癖があり、「bootstrapだと動くのに・・・」みたいなことがままある。 最初に注意 まじめに、TOPメニューから作って見たが、Dropdown等、基本的な機能がうまく動作しないことがあった。どうやら、他の要素に依存しているので、header(class="main-header")だけでなく、サイドバー(class="main-sidebar")や、コンテンツ(class="content-wrapper")、フッター(class="main-fo
最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
jQueryのサイドバー固定サブメニュー実装パターン
jQueryのサイドバー固定サブメニュー実装パターン 最近はモニターのサイズがワイドなってきていることもありサイドバーを固定する機会が増えてきましたね。 そこでjQueryを使用したサイドバー固定にしたときのサブメニューの動きをいくつかご紹介します。 投稿日2018年04月27日 更新日2019年09月19日 基本構造 navの子要素にulでマークアップします。 サブメニューはliの子要素のさらに子要素にulを入れ込みます。 HTML <aside id="sidebar"> <h1 id="brand-logo">Logo</h1> <nav id="global-nav"> <ul> <li><a href="#">Home</a></li> <li class="sub-menu"> <a href="#">About</a> <ul class="sub-menu-nav"> <l
【jQuery】複数の要素に対して繰り返し処理をする（each・for） - TASK NOTES
HTMLで特定の要素を全て取得して回したい場合はJavaScriptなどで繰り返し処理をしますが、jQueryを使った場合の方法をまとめます。 対象としてはこのようなHTMLの場合です。 <div class="comment">コメント1</div> <div class="comment">コメント2</div> <div class="comment">コメント3</div> ... .each()メソッド jQueryで繰り返しといえばeach()メソッドです。基本的な構文は以下の通り。 $('セレクタ').each(function(index, element){ 〜 }); 第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が参照されます。2つの引数はどちらも省略可能です。このメソッドを使えば要素数分、繰り返して指定した関数を実行してくれるわけですね。簡
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の
[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する
長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit
![[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e45aef30f59b2788e85409f3cf151e1c2b520743/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F08%2Ftemplate.jpg)
[JS]画像や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframe などもLightbox 風に表示させるにはjQueryプラグイン「Colorbox」が便利です。 カスタマイズしやすく、IE6でもそこそこ動きますので企業ページでも使える便利なプラグインです。
ドラッグ＆ドロップで並べ替える対象となる要素を指定
項目 3-1 項目 3-2 項目 3-3 実装例の動作について 「項目 1」にカーソルを合わせると、カーソルの形状が移動用カーソル形状になる。「項目 1」をドラッグし、「項目 2」のボックスの上に持ってくると、「項目 2」のボックスが上へ移動し、「項目 2」のボックスと「項目 3」のボックスの間にスペースができる。そのスペースへドロップすると、「項目 1」のボックスと「項目 2」のボックスが入れ替わり、「項目 2」「項目 1」「項目 3」のボックスの順番になる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jqu
ドラッグ＆ドロップで並べ替えた順番を送信
jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えた順番を、送信する方法。 「この並び順を送信」ボタンを押すと、「この順番でよろしいですか？」という確認ダイアログが出現し、「OK」を選択した場合、項目IDを送信する。 実装例（サンプル） 項目名 A (項目ID:1) 項目名 B (項目ID:2) 項目名 C (項目ID:3) 項目名 D (項目ID:4) 項目名 E (項目ID:5) 実装例の動作について 「項目名 A」をドラッグして、下へ動かし、「項目名 B」の上に持ってくると、「項目名 B」が上へ移動し、「項目名 B」と「項目名 C」の間にスペースができる。そのスペースへドロップすると、「項目名 A」と「項目名 B」が入れ替わり、「項目名 B」「項目名 A」「項目名 C」…の順番になる。 「この並び順を送信」ボタンを押すと、 項目名 B (項目ID
ノンデザイナーも必見！Twitter BootStrapの特徴と導入前に確認すべき事 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています（笑） 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ（表現が古い？）にしているそうです。将来がちょっと心配です・・・。 さて今回は、HTML5・CSS3・jQueryを使用したフロントエンドツールの王道「Twitter Bootstrap（※ver2.3.1）」のお話。 ※この記事を書いている最中にver3.0がリリースされました！（汗）後でゆっくり触ってみたいと思います。 ▲Twitter BootStrap ver2.3.1 Web制作者なら、一度は触れたことがあることと思います。 そのまま使ってみたり、カスタマイズして使ってみたり・・・。 使い方を間違えなければ、とても
Animsition
AnimsitionA simple and easy jQuery plugin for CSS animated page transitions.Download on GitHub Tweet 58 different animations Fadefade-infade-outFade Demo Fade upfade-in-up-smfade-in-upfade-in-up-lgfade-out-up-smfade-out-upfade-out-up-lgFade Up Demo Fade downfade-in-down-smfade-in-downfade-in-down-lgfade-out-down-smfade-out-downfade-out-down-lgFade Down Demo Fade leftfade-in-left-smfade-in-leftfade
Onsen UIの舞台裏で働くAngularJSの世界
AngularJS流のデータ／コントローラー／表示の実装方法と、AngularJSのディレクティブによるHTML要素の操作方法、データの追加、AngularJS機能のサービスについて解説する。 ← 前回 連載 INDEX 次回 → 前回は、Monacaで作成した“初めてのOnsen UIアプリ”のファイルの中身を調べ、それをAngularJS流に書き換えた。3回目の今回は、Onsen UIの舞台裏で働くAngularJSの世界に入っていく。 AngularJSはグーグル純正のJavaScriptフレームワークで、モデル、ビュー、コントローラー（MVC）というデザインパターンが採用されている。連載1回目で述べたように、Onsen UIを使ったMonacaアプリでJavaScriptをAngularJS流に記述できるようになると、AngularJSを直接扱わない標準的な方法よりも、アプリの“か
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 こんにちは、鴨田です。 タイトルが長くなってしまってすみません。 皆さんの中で、自分のサイトコンテンツの中で、 iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、 サイトコンテンツをレスポンシブレイアウトではなく、 固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小したい、 と思ったことがある人はいないでしょうか？ 前置きが大変長くなりましたが、 そんなことがあったけど出来なくて諦めたとか、 これからそんなことをしないといけないという方がいたら、 是非とも参考にしてください。 iframe内コンテンツの拡大縮小 例えば、このアシアルブログを横幅600px内で
jQuery MobileでAjaxで取得したページでスタイルシートを反映させる
jQuery MobileでAjaxで取得したページでスタイルシートを反映させる リクリのセミナーでjQuery MobileでAjaxで取得したページのスタイルシートが反映されないとの質問を受けました。 イメージとしてはこんな感じだと思います。 index1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 Bootstrap2版はこちら Datepicker for Bootstrap (別記事) 実装方法 ダウンロード / サンプル (v0.2.6) スクリプト <link href="bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="css/timepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-timepicker.js" type="text/javascript"> 時刻指定時
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ&ドロップにも対応の、JavaScript製タイムスケジューラー・「jq.schedule.js」
https://torina.top/detail/384/
hp-stylelink.com
GitHub - elclanrs/jq-idealforms: The ultimate framework for building and validating responsive HTML5 forms.
ブートストラップスターターテンプレート