WEBデザインの勉強

WEB制作初心者が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カーネルのソースコード管理に用いるためにリーナス・トーバルズによって開発され、それ以降ほかの多くのプロジェクトで…