WEBデザインの勉強

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

立体的なテキスト

デモ http://efu.sakura.ne.jp/web/text/ <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="https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy"> </link></link></meta></head></html>

text-shadowいろいろ

CSS

デモ http://efu.sakura.ne.jp/web/textshadow/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>textshadow</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

画像の遅延読み込みをするjQueryプラグインlazyload

サイトが重い、画像の量が多い時などにGitHub github.comデモ http://efu.sakura.ne.jp/web/lazyload/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>lazyload</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/waeb/common/css/reset.css"> <link rel="stylesheet" href="./style.css"> </link></link></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>

jQueryでパラパラアニメーション

デモ http://efu.sakura.ne.jp/web/flip/画像1枚ずつ横に動かしてアニメーションさせる <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="css/style.css"> </link></link></meta></head></html>

色をアニメーションさせることができるjQueryプラグインjQuery Color

github.comデモ http://efu.sakura.ne.jp/web/hover/jQueryのanimateは数値の値しかアニメーションさせることができない。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hover</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </head> …</html>

リストを円形にできるExtremes

公式サイト Extremes jQuery plug-inデモ http://efu.sakura.ne.jp/web/extremes/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>Extremes</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <style> body { background: #111; color: #666; } .extremes { mar…</link></meta></head></html>

色の変換ができるライブラリRGB color parser in JavaScript

公式サイト RGB color parser in JavaScript / Stoyan's phpied.comデモ http://efu.sakura.ne.jp/web/background/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの色の値を変換</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

HTML5のaudioやvideoの埋め込み・再生ができるjQueryプラグインjPlayer

公式サイト jplayer.orgデモ http://efu.sakura.ne.jp/web/jplayer/ ※音が流れます <html lang="ja"> <head> <meta charset="UTF-8"> <title>jPlayer</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

jQuery UI Datepicker

jqueryui.comjqueryui.comgithub.comデモ http://efu.sakura.ne.jp/web/datepicker/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Datepicker</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

jQuery UI Slider

公式サイト jqueryui.comデモ http://efu.sakura.ne.jp/web/slider/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Slider</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

Easy List Splitter

デモ http://efu.sakura.ne.jp/web/list/公式サイト www.madeincima.it <html lang="ja"> <head> <meta charset="UTF-8"> <title>Easy List Splitter</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

Swiper

jQueryを使用せずに使用できるスライダー公式サイト Swiper - Most Modern Mobile Touch Sliderデモ http://efu.sakura.ne.jp/web/swiper/ <html lang="ja"> <head> <div> <meta charset="UTF-8"> <title>swiper</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></div></head></html>

グラーデーションをアニメーション

http://efu.sakura.ne.jp/web/grd/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>グラデーション</title> <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"><…</link></link></meta></head></html>

ドロワーメニュー

デモ http://efu.sakura.ne.jp/web/drawermenu/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>ドロワーメニュー</title> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> </head> <body> </body></html>

スポットライト

http://efu.sakura.ne.jp/web/mask/以前書いた記事 mmmmofu.hatenablog.combackground-clip: textにした文字「●」をpaddingで動かしてスポットライト風にする。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>スポットライト</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>

Googleカレンダー埋め込みカスタマイズ

http://efu.sakura.ne.jp/web/googlecalendar/ パラメーター パラメーター 値 デフォルト 内容 showTabs 0(非表示) or 1(表示) 1 週・月・予定リスト切替タブ showPrint 0 or 1 1 印刷 showDate 0 or 1 1 表示年月切替タブ showNav 0 or 1 1 表示年月を移動…

Chromeの翻訳

言語を指定 <meta http-equiv="Content-Language" content="ja"> 翻訳を無効にする <meta name="google" value="notranslate"> <meta name="google" content="notranslate"></meta></meta></meta>

フォント

googlefonts.github.ioデモ http://efu.sakura.ne.jp/web/font-family/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>font-family</title> <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" /> </link></meta></head></html>

マウスオーバーした部分を拡大するjQueryプラグインelevatezoom.js

デモ http://efu.sakura.ne.jp/web/elevatezoom/ 公式サイト http://www.elevateweb.co.uk/image-zoom <html lang="ja"> <head> <meta charset="UTF-8"> <title>elevatezoom.js</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/jquery.elevateZoom-3.0.8.min.js"><…</meta></head></html>

要素を傾けて斜めにする

デモ http://efu.sakura.ne.jp/web/skew/ <html lang="en"> <head> <meta charset="UTF-8"> <title>傾き</title> <style> h1 { text-align: center; line-height: 500px; font-weight: bold; letter-spacing: 0.05em; font-size: 50px; font-family: "游ゴシック",YuGothic,"Helvetica","ヒラギノ角ゴ ProN W3", "Hiragino…</meta></head></html>

ページャー付きタブ切り替え

デモはこちら http://efu.sakura.ne.jp/web/paging/1ページ目2ページ目3ページ目 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページャー付きタブ切り替え</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> </meta></head></html>

CSSセレクター

全ての要素に適用 * 子要素子要素にのみ適用 > 隣接している要素にのみ適用 + 後にある要素にのみ適用 ~ 最初の文字に適用 :first-letter 最初の行に適用 :first-line n番目の要素に適用 :nth-of-type(n) 最後からn番目の要素に適用 :nth-last-of-type(n) 過…

画像を保存させないようにする対策

右クリック禁止(PC) 全体(HTML) <body oncontextmenu="return false;"> 画像にのみ(jQuery) $(function(){ $("img").on("contextmenu",function(){ return false; }); }); 長押しアクションを禁止(スマホ) img{ -webkit-touch-callout:none; -webkit-user-select:none; -moz-touch-callout:none; </body>…

SNSシェアボタン

参考サイト creatorclip.info はてなブックマーク はてなブックマークボタンの作成・設置について - はてなブックマーク <a href="http://b.hatena.ne.jp/entry/対象URL" target="_blank">オリジナル画像など</a> google+ボタン +1 Button | Google+ Platform for Web | Google Developers <a href="https://plus.google.com/share?url=対象URL" target="_blank">オリジナル画像など</a>

スライダーjQueryプラグイン slick

http://efu.sakura.ne.jp/web/slick/公式サイト kenwheeler.github.io ドットのページャーの横にPREV,NEXT(枚数が変化しても対応) <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"> </link></link></meta></head></html>

スクロール中はページトップが非表示になる

http://efu.sakura.ne.jp/web/pagetop/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>スクロール中はページトップが非表示になる</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

遅れて付いてくるメニュー

http://efu.sakura.ne.jp/web/menu2/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>遅れて付いてくるメニュー</title> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> </head> <body> </body></html>

IE互換モードの設定

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 互換モードの設定しないとユーザーがIEのバージョンを選択できてしまう。 「IE=edge」と指定すると最新の標準モードを指定できる。</meta>

テキストを画像でくり抜く

CSS

http://efu.sakura.ne.jp/web/cliptext/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>CLIP TEXT</title> <link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet"> </link></meta></head></html>

ブロックを隙間なく並べるjQueryプラグインMasonry

absoluteで位置を配置してくれる。 可変グリッドに対応masonry.desandro.comgithub.com デモはこちら http://efu.sakura.ne.jp/web/masonry/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <link href="https://fonts.googleapis.com/css?family=Asul:400,700" rel="stylesheet"> </link></meta></head></html>

Google スプレッドシートなどで頻繁に接続が切れる時の対処法

接続を試みています。オフラインでの編集を行うには、再接続に成功したときにオフライン同期をオンにしてください。 という表示が出た時。スプレッドシートトップ→メニュー→

transition

transition-property CSS Transitionsより引用 Property Name Type background-color color background-image only gradients background-position percentage, length border-bottom-color color border-bottom-width length border-color color border-lef…

Koalaを使用してSassのコンパイルをする

CSS

Koalaとは GUIのコンパイラ 事前準備 Rubyをインストール Sassを使用するにはRubyをインストールしなくてはならない。(MACは標準で搭載) RubyInstaller for Windows Sassをインストール sass-lang.comコマンドプロンプトで gem install sassと打つとインス…

HTML 属性

HTMLの属性とは、要素に情報を付加すること。デモ http://efu.sakura.ne.jp/web/global_attributes/ グローバル属性 全ての要素に使用できる属性 accesskey マウスやトラックパッドが使用できない環境でも リンクや入力フォームの部品をキーボードのキー操作…

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(…

日本地図をcanvasで表示できるjQueryプラグインJapan Map

デモ http://efu.sakura.ne.jp/web/japanmap/ takemaru-hirai.github.io 公式サイトからファイルを落としてくる jQuery本体とjquery.japan-map.min.jsを読みこむ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Japan Map</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </meta></head></html>

Canvasを使って雪を降らせるSnow in 3D

マウスを動かすと立体的に移動する。 デモはこちら http://efu.sakura.ne.jp/web/snow3/ 公式サイト JavaScript HTML5 Canvas Snow in 3D | Seb Lee-DelisleGitHub github.com HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript HTML5 Canvas Snow in 3D</title> <style> body { background-color: #000;</meta></head></html>…

雪を降らせることができるsnowparticle.js

こちらからお借りしました。 actyway.comjQueryに依存していない PC用とスマホ用がある デモはこちら http://efu.sakura.ne.jp/web/snow2/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Snow Particle</title> <script> (function(u,d,s){ var ins=function(url){var j=d.createElement('script');j.src=url;s.p</meta></head></html>…

世界地図をベクターデータで表示するjQuery Vector Maps

デモはこちら http://efu.sakura.ne.jp/web/vectormaps/jqvmap.com 公式サイトからファイルをダウンロードする HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Vector Maps</title> <link rel="stylesheet" href="css/jqvmap.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

文字をカーブさせることができるjQueryプラグインArctext.js

tympanus.net http://efu.sakura.ne.jp/web/arctext/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Arctext.js</title> <link href="https://fonts.googleapis.com/css?family=Chango" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

CSS3でメニューアイコンのアニメーション

デモ http://efu.sakura.ne.jp/web/menu/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>menu</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/script.js"></script> </head> <body> </body></html>

SouceTree

git

GitクライアントのSouceTreeを使用してBitbacketにファイルをプッシュする。 以前の記事 mmmmofu.hatenablog.com 事前準備 Bitbacketのアカウントを取得する。 bitbucket.org公式サイトからSouceTreeをダウンロードする。 ja.atlassian.com SouceTreeとBitba…

gitコマンド

git

変更が加えられたファイルを表示する git status 新規作成、修正、削除した全てのファイルをインデックスに登録(add)する git add -A addしたファイルをリポジトリ(状態を記録する場所)に記録する git commit -m"メッセージ(日本語可)" リモートリポジ…

git

git

gitとは git(ギット)は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。 Linuxカーネルのソースコード管理に用いるためにリーナス・トーバルズによって開発され、それ以降ほかの多くのプロジェクトで…

textillate.js

文字にエフェクトがかけらるjQueryプラグインTextillate.js 公式サイトではアニメーションの組み合わせを試すことができる。 デモはこちら http://efu.sakura.ne.jp/web/textillate/jQuery本体と、textillate.js、lettering.jsとanimate.cssを読みこんでおく…

SCROLLIFY

決められた要素ごとにスクロールできるjQueryプラグイン 公式サイト projects.lukehaas.me デモはこちら http://efu.sakura.ne.jp/web/scrollify/ ページャとスクロールボタンを設置 <html lang="ja"> <head> <meta charset="UTF-8"> <title>SCROLLIFY</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>