2016-01-01から1年間の記事一覧
わからなくなった部分のメモ☆レスポンシブで、spサイズのときcssのoverflow: hidden; を解除する overflow－スタイルシートリファレンス：参考サイト☆埋め込み動画（youtube）を可変サイズに Youtubeなど埋め込み動画をスマホ表示用に可変サイズにする | ウ…
Jockum Nordström｜絵画の本：完成版にリンク ※これをスクロール分、別フォルダで作成する <html lang="ja"> <head> <meta charset="UTF-8"> <title>Jockum Nordström｜絵画の本</title> <link rel="stylesheet" href="../css/style.css"> <link href="https://fonts.googleapis.com/css?family=PT+Serif:700" rel="stylesheet" type="text/css"> …</link></link></meta></head></html>
TimeSwitch｜トップ：完成版にリンク <html lang="ja"> <head> <meta charset="UTF-8"> <title>TimeSwitch｜トップ</title> <meta name="viewport" content="width=device-width"> <meta name="apple-mobile-web-app-title" content="TimeSwitch"> </meta></meta></meta></head></html>
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>
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>…
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>…
メガドロップダウンメニュー：完成版にリンク ※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>
CSSを一行プラスするだけで横並びにできる 横並びになった要素の高さが最初から揃ってる 要素を上下左右、好きな順序に並び替えられる 高さの異なる横並びの要素を、簡単に上下中央揃えにできるナビゲーション版 Flexboxを使ったナビゲーション：完成版にリ…
全面レイアウト：完成版にリンク VOGUE JAPAN 15th Anniversary 1999～2014：参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>全面レイアウト</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>
タッチアイコンを設定する：完成版にリンク タッチアイコンの設定方法 - WEBサイト制作の勉強｜フェリカテクニカルアカデミー：参考サイト作成した画像 192px × 192px、pngデータ <html lang="ja"> <head> <meta charset="utf-8"> <title>タッチアイコンを設定する</title> <meta name="apple-mobile-web-app-title" content="testtest"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
ヒーローヘッダー：完成版にリンク height:100vh という単位 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ヒーローヘッダー</title> <style> html,body,h1,p { margin: 0; padding: 0; } #box1 { background: url(img/hato.JPG) no-repeat; width: 100%; height: 100vh; background-size: cover; } #box2 { backgro</meta></head></html>…
twitter のプラグイン：完成版にリンク 埋め込みタイムライン | Twitter Developers：参考サイト Login on Twitter：参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>twitter のプラグイン</title> <style> #twitter { width: 30%; } </style> </head> <body> <div id="twitter"> </div></body></html>
フィルタリング：MixItUp：完成版にリンク MixItUp：参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>フィルタリング：MixItUp</title> <link rel="stylesheet" href="css/mixitup.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </link></meta></head></html>
slickの使い方：完成版にリンク レスポンシブに強いカルーセルスライダーslickの使い方｜Gimmick log：参考サイト <html lang="ja"> <head> <meta charset="utf-8"> <title>slickの使い方</title> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> <script src="js/jquery-2.2.1.min.js"></script> </link></link></meta></head></html>
LightBox＋カルーセルパネル：完成版にリンク <html lang="ja"> <head> <meta charset="utf-8"> <title>LightBox＋カルーセルパネル</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/scrollable-horizontal.css" > <link rel="stylesheet" href="css/lightbox.css" > </link></link></link></meta></head></html>
display-tableを使ったタブパネル：完成版にリンク <html lang="ja"> <head> <meta charset="utf-8"> <title>display-tableを使ったタブパネル</title> <link rel="stylesheet" href="css/style_tab01.css"> <script src="js/jquery-2.2.1.min.js"></script> <script src="js/current.js"></script> </head> <body> </body></html>
★SVGファイルについて ・SVGファイルはベクトルデータで構成されているので、拡大してもぼやけない 1 イラレでファイルを作成 2 オブジェクト > アートボード > 選択オブジェクトにあわせる 3 別名で保存 > svg枝豆隊長のデータは、もとファイル（png）だと…
枝豆隊長：完成版にリンク★以前の枝豆隊長に手を加える ・ハンバーガーメニューを作ってみる - 別ファイルで作成して、スマホ画面用のメディアクエリ部分に当てはめる - 幅指定、ボーダーの指定を修正する ・ハンバーガーメニューで推奨されるサイズは44px以…
★CSS3とjQueryでのアニメーションの使い分け 極力CSSでアニメーションさせる★hoverでは無く、jQueryのclickイベントを使ってtransformを適用させる練習 toggleClass ：指定したCSSクラスが要素に無ければ追加し、あれば削除する。アニメーション１：完成版に…
★h1とpについては、必ず文章を入力すること！ ★画像にしてはいけない。大企業だけが、画像をいれることをしてよい。 ★検索するひとは、会社名でなく、地域やサービス内容で検索する。 ※サイトについて、画像と文章が一致していませんが、練習のため。 観光ガ…
★レギュレーション：複数ページをつくるときのルールになる型 いつでも作れるようにしておく ◎縦ナビゲーション 縦ナビゲーション：完成版にリンク <html lang="ja"> <head> <meta charset="utf-8"> <title>縦ナビゲーション</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ }); }); </script> <style> /*re…</meta></head></html>
【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>
使い方がわからないので、先生のサイトのキャプチャを掲載させていただきます、 先生すみません...
枝豆隊長：完成サイトにリンク★メディアクエリ時に、リストで組んでいるボタンが二段になる際の、borderの指示の仕方、nth-childに気をつける。 ★ボタンの色設定が、センスがいるなぁと思い、手こずった。 <html lang="ja"> <head> <meta charset="utf-8"> <title>枝豆隊長</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style_mame.css"> </link></meta></meta></head></html>
背景が動画2：完成版にリンク NASA：文章をお借りしています Mazwai：動画をお借りしています Google Fonts：google fonts★ビデオタグの使い方 ★ビデオの上に文章が重なるので、ビデオにはz-indexを振り分けている <html lang="ja"> <head> <meta charset="utf-8"> <title>背景が動画2</title> </meta></head></html>
背景が動画：完成版にリンク 上野動物園の歴史 ｜ 上野動物園公式サイト - 東京ズーネット：文章をお借りしています NHKクリエイティブ・ライブラリー：動画をお借りしています Google Fonts：google fonts★ビデオタグの使い方 ★ビデオの上に文章が重なるの…
RWD：完成版にリンク★レスポンシブルレイアウトの際、どこに%を指定するのか <html lang="ja"> <head> <meta charset="utf-8"> <title>RWD</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header><h1>header</h1></header> <nav> <ul> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li></ul></nav></div></body></html>
RetinaDisplay対応：完成版にリンク★高解像度ディスプレイで表示するために、２倍のサイズの画像を用意する ★googlechromeで検証する機能があり、端末を持っていなくても確認が可能 <html lang="ja"> <head> <meta charset="utf-8"> <title>RetinaDisplay対応</title> <link rel="stylesheet" href="retina01.css"> <meta name="viewport" content="width=device-width"> </meta></link></meta></head></html>
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>
楽しいおかず：完成版にリンク★レイアウトはかわらず、固定のまま <html> <head> <meta charset="utf-8"> <title>楽しいおかず</title> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/> </link></meta></meta></head></html>
