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

Webデザインにまつわることを自分用にメモしています。

2016-04-01から1ヶ月間の記事一覧

Twitterのウィジェットをつくる

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>

jQuery:プラグイン:MixItUp:フィルタリング

フィルタリング: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>

jQuery:プラグイン:Slick

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>

jQuery:プラグイン:LightBox

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>

jQuery:タブパネル

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ファイルについて ・SVGファイルはベクトルデータで構成されているので、拡大してもぼやけない 1 イラレでファイルを作成 2 オブジェクト > アートボード > 選択オブジェクトにあわせる 3 別名で保存 > svg枝豆隊長のデータは、もとファイル(png)だと…

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

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

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

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

HTML:h1の扱い

★h1とpについては、必ず文章を入力すること! ★画像にしてはいけない。大企業だけが、画像をいれることをしてよい。 ★検索するひとは、会社名でなく、地域やサービス内容で検索する。 ※サイトについて、画像と文章が一致していませんが、練習のため。 観光ガ…

CSS:ナビゲーション:基本

★レギュレーション:複数ページをつくるときのルールになる型 いつでも作れるようにしておく ◎縦ナビゲーション 縦ナビゲーション:完成版にリンク <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>

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>

google fonts:使い方

使い方がわからないので、先生のサイトのキャプチャを掲載させていただきます、 先生すみません...

サイト練習:枝豆隊長

枝豆隊長:完成サイトにリンク★メディアクエリ時に、リストで組んでいるボタンが二段になる際の、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>