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

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

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

自分のポートフォリオサイト用記録

わからなくなった部分のメモ☆レスポンシブで、spサイズのときcssのoverflow: hidden; を解除する overflow-スタイルシートリファレンス:参考サイト☆埋め込み動画(youtube)を可変サイズに Youtubeなど埋め込み動画をスマホ表示用に可変サイズにする | ウ…

jQuery:無限スクロール

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>

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>

CSS3:flexbox

CSSを一行プラスするだけで横並びにできる 横並びになった要素の高さが最初から揃ってる 要素を上下左右、好きな順序に並び替えられる 高さの異なる横並びの要素を、簡単に上下中央揃えにできるナビゲーション版 Flexboxを使ったナビゲーション:完成版にリ…

レスポンシブ:VOGUEのマネ

全面レイアウト:完成版にリンク 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>

100vh:ヒーローヘッダー

ヒーローヘッダー:完成版にリンク 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 のプラグイン:完成版にリンク 埋め込みタイムライン | 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>

サイト練習:背景が動画:英語版

背景が動画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★ビデオタグの使い方 ★ビデオの上に文章が重なるの…

CSS:レスポンシブウェブデザイン

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>

CSS:RetinaDisplay対応の画像

RetinaDisplay対応:完成版にリンク★高解像度ディスプレイで表示するために、2倍のサイズの画像を用意する ★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>

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:メディアクエリ:楽しいおかず2

楽しいおかず:完成版にリンク★レイアウトはかわらず、固定のまま <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>

jQuery:メディアクエリ:楽しいおかず1

楽しいおかず:完成版にリンク★PCサイズ、タブレットサイズ、スマホサイズのそれぞれでレイアウトが変わる設定★メディアクエリ対応のとき必ず挿入 ★ファビコンも忘れない meta name="viewport" content="width=device-width" link rel="shortcut icon" href=…

jQuery:プラグイン:bxSlider

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

jQuery:プラグイン:LightBox

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

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>

CSS3:hover時のアニメーション

テキストp295~ transform:完成版にリンク★transition / transform / translate の使い方に気をつける <html> <head> <meta charset="utf-8"> <title>テキストp295~ transform</title> <style> div { width: 200px; height: 200px; } p { font-weight: bold; text-align: center; padding-top: 20px; } /*---------</meta></head></html>…

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~テキストの変更と取得…

JavaScript習熟度テスト:6〜10問目

【問6】現在の時刻(~時~分~秒)を表示させなさい。 習得度確認試験_6問目 <html lang="ja"> <head> <meta charset="utf-8"> <title>習得度確認試験_6問目</title> </head> <body> <script> var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); document.write( '<h3>現在の</h3></body></html>…

JavaScript習熟度テスト:1〜5問目

【問1】サムネール(5個)にマウスを乗せたとき、メイン画像が変化するように記述しなさい。 習得度確認試験_1問目 <html lang="ja"> <head> <meta charset="utf-8"> <title>習得度確認試験_1問目</title> <link rel="stylesheet" href="style_q01.css"> </head> <body> <div class="imgBox"> <h1>【問1】</h1> <div class="thumbnail"> </div></div></body></html>

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…

サイト練習:パスタ

パスタとワインの店 atella:完成版にリンク★ポジションレイアウトを習ったばかりだったので、ポジションで組んでしまったのですが、実際にはフロートなどで組んだ方が安定するのでそうするべき、というコメントをいただいて、ショックをうけました。 ヘッダ…

サイト練習:日本の四季

日本の四季:完成版にリンク★googleで検索にひっかかるためには、とにかくトップページは index.html でなければならない。リンクするサイトは、同じ階層につくらない。 <html lang="ja"> <head> <meta charset="utf-8"> <title>日本の四季</title> <link href="css/top.css" rel="stylesheet"> </head> <body> <section class="container"> <header> <h1>日本の四季</h1> <p>日本の気候は温暖でおだやかで…</p></header></section></body></html>

サイト練習:卵料理カフェ

卵料理カフェ Cockeyolly:完成版にリンク★難しかったところ 文章と写真をdivで囲い、写真を右上に表示するためには、写真と文章をpタグで囲い、写真を前にもってくる。それに float: right; を指定する。 <html> <head> <meta charset="utf-8"> <title>卵料理カフェ Cockeyolly</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="sidebar"> </div></div></body></html>

気になるサイト:イベント編

東京クラフトマップ [http://tokyocraftmap.jp :title]【フォント】 日本語:13px/1.231 'Asap', "MS Pゴシック", "MS PGothic", "MS ゴシック", "MS Gothic", "Osaka-等幅", Osaka-mono ; 英語:'Montserrat', sans-serif; GoogleFonts 有料フォント…

内容に興味のあるサイト

アイヌ語口承文芸コーパス グロス付き An Audio Corpus of Ainu Folklore もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作ったもう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディ…

CSS:リセット

メディアクエリ時のフォントサイズの指定 /*どのような画面でも見やすい文字に自動調整する機能(モバイル対応)*/ /* font-size */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 32px…