WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

JavaScript

CSS3の色指定 HSL

色をランダムで配置 http://efu.sakura.ne.jp/web/hsl/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>HSL</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <style> body { background: #333; } </style> </link></meta></head></html>

現在いるページのナビゲーションにクラスを追加

デモ http://efu.sakura.ne.jp/web/menu3/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>ナビゲーションのカレント</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </link></link></meta></head></html>

viewportの変更

デモ http://efu.sakura.ne.jp/web/viewport/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>iPadで見た場合viewportを変更</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></meta></head></html>

YouTubeAPI サムネイルをクリックで動画を切り替える

デモ http://efu.sakura.ne.jp/web/youtubeapi/index2.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>YouTube API サムネイルクリックで動画切替え</title> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </link></meta></head></html>

ブラウザ判定

デモ http://efu.sakura.ne.jp/web/useragent/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>ブラウザ判定</title> <style> .text { font-size: 32px; text-align: center; margin: 50px 0; } </style> </head> <body> <p class="text">お使いのブラウザは<span></span>です。</p> </body></html>

Windowオブジェクト

windowオブジェクトはJavaScriptにあらかじめ用意されているオブジェクト。 全てのオブジェクトの親(グローバルオブジェクト)で windowの情報を取得したり操作や設定することができる。 windowの表記は省略することが可能http://efu.sakura.ne.jp/web/wind…

window.locationでURL情報を取得

デモ http://efu.sakura.ne.jp/web/location/?1481711331426#hash <html lang="ja"> <head> <meta charset="UTF-8"> <title>location</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> .text01 { font-size: 36px; text-align: center; } </style> <script> $(function…</meta></head></html>

ユーザーエージェントでスマホ用にviewportを切り替える

$(function(){ var contentWidth = 750; var iphone = navigator.userAgent.search(/iPhone/); var android = navigator.userAgent.search(/Android/); var ipad = navigator.userAgent.search(/iPad/); var ipod = navigator.userAgent.search(/iPod/); if(…

ループアニメーション

デモはこちら http://efu.sakura.ne.jp/web/loop/velocityjs.org HTML <html lang="en"> <head> <meta charset="UTF-8"> <title>Velocity.jsでループアニメーション</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </link></meta></head></html>

ボタンを押したらプリントアウト/プリントアウトする時のCSSを変更

ボタンを押したらプリントアウトの画面が立ち上がる。その際に余計なものを消し、プリントアウトしたいものだけ表示させる。 デモはこちら http://efu.sakura.ne.jp/web/print/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>print</title> <link rel="stylesheet" href="css/style.css"> <style> @media print{ header, footer, .print_btn, .sidebar { display: …</link></meta></head></html>

cssText

「!important」を使用したい時など $(".rubiks_cube").css({'cssText': 'marginp:0 !important;padding:0 !important;' }); HTMLのstyle属性を上書きするので、 HTMLのstyle属性で指定したstyle、もしくはJSで変更したstyleが無効になる。 参考サイト www.we…

YouTubeのチャンネル最新動画を埋め込む

YouTubeチャンネルFeedを取得する。 https://www.youtube.com/feeds/videos.xml?channel_id=【チャンネルID】チャンネルIDを調べるには埋め込みたいYouYubeチャンネルのページへ行き、 URLを確認する。 channel/の後にある文字がチャンネルIDなので 上のURL…

カーニングを自動調整してくれるJS「FLAutoKerning.js」

HTMLで文字詰めするタイポグラフィー用JS | fladdict サイトからファイルをダウンロードし、 jQueryと併せて「FLAutoKerning.js」を読みこむ。自分で設定を追加することができる。

WEBサイトをiOSでアプリケーションのように表示

WEBサイトをiOSで見た時にSafariのアドレスバーやツールバーを表示させたくない場合 アプリケーションのように表示する方法HTMLのheadに下記metaを記入する <meta name="apple-mobile-web-app-capable" content="yes"> SafariのUIを変更してくれる。ページ遷移をするとSafariに飛んでしまうので JavaScriptでそのまま</meta>…

YouTube API

YouTube APIを使用し、 再生、一時停止、1分前へ、1分先へ、音量アップ、音量ダウン、ミュートにする ボタンを作る。参考:developers.google.comwww.tam-tam.co.jp デモ http://efu.sakura.ne.jp/web/youtubeapi/ <div id="sample"></div> <div> <button id="play">再生</button> <button id="pause">一時停止</button> <button id="prev">1分前へ</button> <button id="next">1分先へ</button></div>

演算子

代入演算子 右の値を左に代入 演算子 名称 意味 = 代入 x=y += 加算代入 x=x+y -= 減算代入 x=x-y *= 乗算代入 x=x*y /= 除算代入 x=x/y 比較演算子 左の値と右の値を比較する 演算子 意味 == 右と左の値が正しかったらture 文字列の数字と数値でも比較して…

for文で配列に一致していなかったら処理をスキップする

var _array1 = [ {kay1:aaa, kay2: bbb, kay3: ccc, kay4:ddd}, {kay1:eee, kay2: fff, kay3: ggg, kay4:hhh}, {kay1:iii, kay2: jjj, kay3: kkk, kay4:lll}, {kay1:mmm, kay2: nnn, kay3: ooo, kay4:ppp} ]; var _array2 = ['bbb','jjj']; for (var i=0; i

画像をウインドウにフィットさせる

$(window).on('resize',function(){ setBG(); }); function setBG() { var imgW = 画像の横幅; var imgH = 画像の高さ; var winW = $(window).width(); var winH = $(window).height(); var scaleW = winW / imgW; var scaleH = winH / imgH; var fixScale =…

ディレクトリによってパスを変更

JavaScript var domain = ''; if (location.href.search(/振り分けしたいパスの一部/g) !== -1){ domain = '振り分けしたいパス/'; } else { domain = '/'; } PHP 下記を振り分けたい箇所に入れる

YouTube動画の切替え

ボタンを押した時に複数の動画をJavaScriptで切り替える HTML <div class="movie"> <ul class="movie__nav clearfix"> <li class="movie__select" id="vkSCLvIaCcI">動画1</li> <li class="movie__select" id="bto1GpdAKEA">動画2</li> </ul> <div class="cast__movie"> <a target="_blank" href="https://www.youtube.com/watch?v=vkSCLvIaCcI"> </a></div></div>

アコーディオンパネル

HTML <dl> <dt>タイトル</dt> <dd class="news news__detail">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> <dl> <dt>タイトル</dt> <dd class="news news__detail">テキストテキストテキストテキ</dd></dl>…

GoogleMap APIでGoogleMapをカスタマイズ

参考サイト lopan.jpcreator.aainc.co.jpobjc-lovers.comsyncer.jpphpjavascriptroom.com

SNSシェアボタン-Facebook

Facebook(いいねまたはシェア) developers.facebook.com Facebookで用意されているボタンを使う場合 HTML <div class="fb_btn" data-href="対象のURL" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> HTML,JS bodyの中に記述しておく <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = …

SNSシェアボタン-Twitter

Twitter Twitterボタン | AboutTwitterで用意されているボタンを使用する場合 HTML <a class="twitter-share-button" href="https://twitter.com/share" data-dnt="true">Tweet</a> 「Tweet」という文字がJavaScriptによってシェアボタンに変わる JS body内に記入する <script> window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=w…

要素があるかどうかを判定する

.is() 要素の集合体が指定したセレクターにマッチしている、または指定した関数等の条件を満たしている場合にtrueを返します。 http://js.studio-kingdom.com/jquery/traversing/is if ($("#target").is(":hidden")) { //非表示のときの処理 } else { //表示…

Dateオブジェクト

Dateオブジェクトとは 日付や時刻を扱うことが可能な、JavaScript の Date インスタンスを生成します。 new Date() new Date() new Date()は現在の日付や時刻を返す getFullYear() new Date().getFullYear() .getFullYear()は日時の「年」を表す4ケタの整数…

現在の日付から任意の日付の差を計算

NEWのアイコンを付けたいときなど var delDay = 20; //何日間 var oldDay = new Date(2016/5/1); //任意の日付をDateオブジェクトの引数で渡す(時間は省略してあるので00:00:00) var newDay = newDate(); //現在の日付を取得 var date = Math.floor((newDa…

IE対応「html5shiv.js」「css3-mediaqueries-js」

html5shiv.js HTML5で制作したサイトをInternetExplorer8(IE8)以前のバージョンで閲覧すると、レイアウトが崩れる。 これはHTML5から新たに導入されたタグaside,article,header,nav,section,footerなどを解釈してくれないため。これらのタグをIE8以前のバー…

Ajax

Ajax (エイジャックス)とは、Asynchronous JavaScript + XML の略で、非同期通信を利用してデータを取得したり、動的にウェブページの内容を書き換える技術のことです。 http://ajax.pgtop.net/category/4229716-1.html 非同期通信は、通信を開始したら次…

ユーザーエージェントでページ切替え

スマートフォンやタブレットで見た時に スマートフォン用サイトに飛ばしたいときなど。 $(function(){ var iphone = navigator.userAgent.search(/iPhone/); var ipad = navigator.userAgent.search(/iPad/); var ipod = navigator.userAgent.search(/iPod/)…

JavaScript基礎

JavaScriptとは HTML+CSSで作られていたWEBページにJavaScriptを組み合わせると 今まで静的なページしか作れなかったのが、 動きや機能をつけることができるようになる。 プログラムは 初期値 演算 出力 がある。 JavaScriptの記述方法 ~ JavaScriptのタグ h…