読者です 読者をやめる 読者になる 読者になる

Webデザインのこと、いろいろ

Webデザインの学習をはじめた初心者のブログです。

jQuery:CSS3: KIRINのサイトを真似する

ZOU|TOP PAGE:完成版にリンク jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 | BlackFlag:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>ZOU|TOP PAGE</title> <meta name="viewport" width="device-width"> </meta></meta></head></html>

jQuery:プラグイン:Masonry

isotope:完成版にリンク Masonry:本家サイト jQuery プラグイン Masonry の使い方と設定 | Web Design Leaves:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>isotope</title> <style> html,body,p { margin: 0; padding: 0; line-height: 1.0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Got</meta></head></html>…

jQuery:プラグイン:isotope

isotope:完成版にリンク Isotope:本家サイト [JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope | コリス:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>isotope</title> <style> html,body,p { margin: 0; padding: 0; line-height: 1.0; font-family: "ヒラギノ角ゴ Pro W</meta></head></html>…

jQuery:flexbox:メガドロップダウンメニュー

メガドロップダウンメニュー:完成版にリンク ※WORKSのみ実装していますメガドロップダウン - Webデザインの勉強 ちょっとだけプログラムの勉強:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>メガドロップダウンメニュー</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> </link></meta></head></html>

jQuery:プラグイン:FlexSlider2:SVG:枝豆隊長

枝豆隊長:完成版にリンク★以前の枝豆隊長に手を加える ・ハンバーガーメニューを作ってみる - 別ファイルで作成して、スマホ画面用のメディアクエリ部分に当てはめる - 幅指定、ボーダーの指定を修正する ・ハンバーガーメニューで推奨されるサイズは44px以…

jQuery:onclickイベント:アニメーション:toggleClassとslideToggle

★CSS3とjQueryでのアニメーションの使い分け 極力CSSでアニメーションさせる★hoverでは無く、jQueryのclickイベントを使ってtransformを適用させる練習 toggleClass :指定したCSSクラスが要素に無ければ追加し、あれば削除する。アニメーション1:完成版に…

jQuery:おさらい

【1問目】 ブログ0619_まとめ_idセレクタ <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_idセレクタ</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('#test').on('click',function(){ $(this).text('クリックされました'); }); }); </script> </meta></head></html>

jQuery:プラグイン:fancybox

fancyboxの使い方:完成版にリンク fancyBox - Fancy jQuery Lightbox Alternative:本家サイト★画像だけでなく、googlemap、作成したサイト、文章、youtubeなどをライトボックスのように表示することができる <html lang="ja"> <head> <meta charset="utf-8"> <title>fancyboxの使い方</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

jQuery:モバイルファーストの考え方

メディアクエリのモバイルファースト:完成版にリンク★メディアクエリを最初にモバイルサイズから制作し、タブレットサイズ、PCサイズ、と情報量を増やしていく方法 <html> <head> <meta charset="utf-8"> <title>メディアクエリのモバイルファースト</title> <link rel="stylesheet" href="0324_mobile_first.css"> </head> <body> <div id="container"> <div class="box" id="box1">box1</div> </div></body></html>

jQuery:プラグイン:LightBox

Light Box:完成版にリンク 【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。 - ONZE:参考サイト★ a href="000.png" data-lightbox="XXX" data-lightbox という名前を追加して、グループを作成する ★JavaScriptについては /body の直前に挿入…

jQuery:プラグイン:bxSlider

bxslider:完成版にリンク jQuery Content Slider | Responsive jQuery Slider | bxSlider:本家サイト jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ! | Web Design Magazine:参考サイト★ダウンロードしたcss内の、ファイルのリ…

jQuery:アコーディオンパネル:縦スライド

01 アコーディオンパネルその1の1 slideDown slideUp を使う ブログ0607_アニメーション効果:完成版にリンク <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0607_アニメーション効果</title> </meta></head></html>

jQuery:基本6

51 addClass() Class属性の追加:検証画面でみると変化がわかる jQueryの練習 - p70~class属性の追加と削除:完成版にリンク <script> $(document).ready(function(){ //ページが開いたら $('button').on('click',function() { $('p').addClass('red'); }); }); </script> </head> <body> <p><button></button></p></body>…

jQuery:基本5

41 appendTo() もともと存在していた要素の文書内の位置を変更する appendTo() 指定した要素を、他の要素の内部の最後に移動 jQueryの練習 - p61~HTMLの移動:完成版にリンク <script> $(function(){ $('#push').on('click',function(){ $('strong').appendTo('p'); </script>…

jQuery:基本4 HTML/CSSを操作する命令

32 テキストの変更と取得 jQueryの練習 - p56~テキストの変更と取得:完成版にリンク <script> $(function(){ $('#push').on('click',function(){ $('p#first').text('変更後'); }); }); </script> </head> <body> <button id="push">押す</button> <p id="first">変更前</p> </body> 33 テキストの取得 jQueryの練習 - p56~テキストの変更と取得…

jQuery:基本3

21 [attribute!='value'] 特定の属性が、特定の値を持たない要素を選択できるセレクターです。 jQueryの練習 - p44~属性セレクタ:完成版にリンク <script> $(document).ready(function(){ $("li[title!='first']").css('color','coral'); }); </script> </head> <body> <ul> <li title="first">どんどこどんどこ</li></ul></body>…

jQuery:基本2

11 only-child擬似クラス セレクタに特定の要素が1つだけ含まれる場合 jQueryの練習 - p38:完成版にリンク <script> $(document).ready(function(){ $('li span:only-child').css('color','coral'); }); </script> </head> <body> <ul> <li id="first">HTML5+CSS3</li> <li id="second"><span>Java</span>Script</li> <li id="third">jQuery</li> </ul></body>

jQuery:基本1

01 cssをかえる jQueryの練習 - p26:完成版にリンク <script> $(document).ready(function() { $('li').css('color','red'); // シングルクォーテーションでよい }); </script> </head> <body> <ul> <li>HTML5+CSS3</li> <li>JavaScript</li> <li>jQuery</li> <li>ActionScript</li> <li>PHP+MySQL</li> </ul> </body> 02 idを指定してcssをかえる jQuery…