WEBデザインの勉強

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

世界地図をベクターデータで表示する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>

jQuery UIのDraggableで要素をドラッグできるようにする

デモはこちら http://efu.sakura.ne.jp/web/drag/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Draggable</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>

Googleフォームに自動返信機能を付ける

Googleドライブからフォームを作成し、 フォームの編集画面に行くメニューから「スクリプトエディタ」を選択する「無題のプロジェクト」を選択し、任意の名前をつけプロジェクト名を変更するエディタ内に最初から記述してある function myFunction(){ } を削…

コンテンツを縦横斜めにスライドさせるjQuery faux-3D Viewport

デモはこちら http://efu.sakura.ne.jp/web/3d/jQueryとjQuery easingを読み込んでおく HTML <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery faux-3D Viewport</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>

要素が下から上に表示されるアニメーション

下から上が上手くいかなかったのでメモ デモはこちら http://efu.sakura.ne.jp/web/btmtop/ <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> </link></meta></head></html>

コマンドプロンプト

コマンドプロンプト(cmd.exe)とは コマンドと呼ばれる命令文を用いてさまざまな処理を行うことができる。 MACはターミナル コマンドプロンプトの開きかた アプリケーションの場所 C:\Windows\System32\cmd.exeWindows 8以降ならスタートボタンを右クリックし…

Styled Maps Wizard

GoogleMAPの色変更のスタイルの設定をWEB上で簡単に設定することができる。 Styled Maps Wizard 日本語版 日本語版 Google Maps API Styled Map Wizard デモはこちら http://efu.sakura.ne.jp/web/styledmapwizard/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Styled Map Wizard</title> <style> #map { widt</meta></head></html>…

2列に並んだリストを押すと押したエリアの下がアコーディオンで開く

デモはこちら http://efu.sakura.ne.jp/web/accordion2/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <…</link></meta></head></html>

簡単にGoogleMAPがカスタマイズできるウェブサービスGoogle Map Builder

デモはこちら http://efu.sakura.ne.jp/web/mapbuilder/ デモのテーマは「Black and White」を使用しました。 サイトはこちら mapbuildr.com HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Map Builder</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>

ループアニメーション

デモはこちら 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>

Twitterの高度な検索/検索オプション

Twitterウィジェットの検索結果タイムラインを サイトに埋め込みたい時に使用したのでメモ 高度な検索 twitter.comsupport.twitter.com OR演算子 阪神 OR タイガース阪神かタイガースを含むツイートを表示 -演算子 阪神 -タイガース阪神の検索結果からタイガ…

Google Chormeの Developer Toolsを開いた状態でページを開くとPaused in debuggerという表示が出る時に消す方法

自動でブレークポイントを設けてしまっている模様。停止マーク?をクリックして黒に戻すAnyXHRのチェックを外す

要素が順番にフェードインしながらスライドダウン

デモはこちら http://efu.sakura.ne.jp/web/fisd/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>SlideDown</title> <style> body { background: #FCFAF2; border-top: 10px solid #0C0C0C; margin: 0; } ul { width: 900px; height: 400px; margin: 50px auto 0; letter-spacing: -0.4em; font-size: …</meta></head></html>

Google Fonts いろいろメモ

CSS

GoogleFontsを色々試したもの http://efu.sakura.ne.jp/web/googlefonts/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Fonts</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:700"> </link></link></meta></head></html>

Thunderbird アドオン

Quicktext addons.mozilla.org

GoogleMAPにオリジナルマーカーや吹き出しが簡単に設置できるjQueryプラグインAxGmap

objc-lovers.comGoogleMAPにオリジナルマーカーや吹き出しが簡単に設置できるjQueryプラグイン マップの色変更には対応していない デモはこちら http://efu.sakura.ne.jp/web/axgmap/GitHubからファイルをダウンロードする github.com「jQuery」と「Google M…

SublimeText 環境設定(Prefarences)

Settings - User メニュー Prefarences→Settings - User { "color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",//テキスト領域の配色 "theme": "Seti.sublime-theme",//UIの外観 "draw_white_space": "all",//スペースやタブを可視化 "fon…

スクロールバーのデザインを変更したり惰性スクロールが実装できるjQueryプラグインNiceScroll

github.comGitHubからファイルを落としてくる。 ファイルを開き 「jquery.nicescroll.js」もしくは「jquery.nicescroll.min.js」を 取り出し読みこむ デモ http://efu.sakura.ne.jp/web/nicescroll/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>NiceScroll</title> <style> .test { padding-top: 1000px; } .e</meta></head></html>…

Sass

CSS

sass-lang.com koala-app.com

Chart.js

折れ線グラフ、棒グラフ、レーダーチャート、円グラフ、鶏頭図、ドーナツグラフなどを canvasで作成できるJavaScriptライブラリwww.chartjs.org 準備 公式サイトからファイルをダウンロードし、「Chart.js」を読みこむ。 CDNもある <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> レーダーチャート デモは…

js-redirect-module

github.comデバイスを判別して深い階層になってもリダイレクト処理が簡単にできるライブラリ。 「/」から「/sp/」や「/sp/」から「/」などにも対応。 デモはこちら http://efu.sakura.ne.jp/web/js-redirect-module/ 使い方 GitHubからファイルをダウンロー…

Markdown

Markdownとは 段落(p) 改行(br) 見出し(h) リスト(ul li) 番号付きリスト(ol li) リンク(a) 画像の挿入 ファイルのダウンロード テキストの強調(strong) テキストの強調(em) 引用 水平線 打消し線 関連記事 Markdownとは 文書を記述するための軽量マ…

1枚の画像で雲を左から右へ無限に流れるアニメーション

<html lang="ja"> <head> <meta charset="UTF-8"> <title>雲が左から右に無限に流れるアニメーション</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> <div class="bg_cloud" id="bg"></div></body></html>

徐々に早くなる回転アニメーション

CSS3で徐々に早くなる回転アニメーションを作成する。 デモはこちら http://efu.sakura.ne.jp/web/rotation/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>徐々に回転が早くなるアニメーション</title> <style> .gear { width: 200px; -webkit-animation: spin 4.3s cubic-bezier(1,0,.87,.62) infinite; animation:</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>

Colorbox

高機能なモーダルウインドウプラグイン 画像だけでなく、YouTube等iframe読み込み、やインラインhtml、ajaxでファイルの読み込みなどをモーダルウインドウで表示することができる。Colorbox - a jQuery lightbox デモはこちら http://efu.sakura.ne.jp/web/c…

CSSの記述順序

CSS

厳密な決まりはないが、Mozilaで推薦されているガイドラインがある。https://www.mozilla.org/ja/css/base/content.css (現在観覧不可) /* Suggested order: * display * list-style * position * float * clear * width * height * margin * padding * bord…

CSSで長体/平体を表現

transform: scale()で文字の縦横方向の大きさを伸ばしたり 小さくしたりすることで長体や平体を再現。 デモはこちら http://efu.sakura.ne.jp/web/font/ 長体 .text { -webkit-transform: scale(1, 2.1); -ms-transform: scale(0.6, 1); -o-transform: scale…

bez

CSS3のアニメーションのイージングを指定できるcubic-bezierのような書きかたで jQueryのeasingを記述できるjQueryプラグインgithub.com $(".content").animate({ 'top': -2000 }, 500, $.bez([0.68, -0.55, 0.265, 1.55])); 関連記事 mmmmofu.hatenablog.com

cssText

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

aタグをクリック時に一旦リンクを無効にしてアニメーションした後にページ遷移

<p><a href="./top/" target="_self">リンクボタン</a></p> $('a[target="_self"]').click(function(){ var url = $(this).attr('href'); $('.contents').delay(300).animate({'opacity':0},800,"easeInOutBack", function(){ location.href = url; }); return false; }); 一旦「return false」でaタグを…

画像系ジェネレーター

www.stripemania.comwww.stripegenerator.comwww.lizaphoenix.com 参考サイト coliss.com

Twitter ウィジェットのカスタマイズ

ウィジェットの作り方 Twitterにログインした状態で、自分のアイコンをクリック→設定→ウィジェット→新規作成 パラメータ パラメータ 値 data-chrome noheader(ヘッダー非表示)、nofooter(フッター非表示)、noborders(境界線を非表示)、noscrollbar(タイ…

雪を降らせるプラグインJQuery-Snowfall

デモはこちら http://efu.sakura.ne.jp/web/snowfall/GitHubからファイルをダウンロードする github.comダウンロードしたファイルの中から 「snowfall.jquery.js」を取り出し読みこむ $(function() { $(document).snowfall(); }); これでデフォルトの設定で…

HTMLメール

HTMLメールとは テキストのみではなく、HTMLで記述し、画像を挿入したり文字に装飾を加えたりしたメールのこと。 メールソフトによってHTMLの解釈が変わるので注意が必要。 主要メールソフト Gmail thunderbird Outlook 各メールソフトのCSS対応状況はこちら…

gitで管理しないファイルを指定

git

.gitignoreファイルを作成し、gitで管理しないファイルを記入する。例: node_modules .DS_Storeこのように記述すると上記のファイルが無視される。 ディレクトリ毎に作成することができ、 深い階層の記述が優先される 参考サイト www.tam-tam.co.jp

particles.js

幾何学模様のパーティクルを作れるライブラリvincentgarreau.comデモはこちら http://efu.sakura.ne.jp/web/particles/ 公式サイトからファイルをダウンロードする。 空のdivに任意のID名を付ける。 JSファイルを変更しない場合は「particles-js」とする。ap…

Server Side Includes (SSI)

Server Side Includes | サーバー・サイド・インクルード (SSI)とは Webサーバの機能の1つである。 HTMLの中にWebサーバ側で実行するコマンドを埋め込んでおき、その実行結果をクライアントサーバに返す仕組みである。ただしWebサーバ自体がSSIに対応または…

jQuery Easing Plugin

jQueryのアニメーションのイージングは最初の状態だと「linear」と「swing」しか使えないが、 jQueryプラグインの「jQuery Easing Plugin」を使用すると、 様々なイージングを使用することができる。 デフォルトは「swing」サイトからファイルをダウンロード…

cookie.js

github.comcookie.jsはcookieを簡単に操作できるjQueryプラグインGitHubからダウンロードして読み込む cookieを保存する方法 $.cookie("KEY", "VALUE", { expires: 1 }); KEYにcookieの名前、VALUEに値を入力する。 {}の中には様々なオプションを設定するこ…

yuga.js

yuga.js :: Kyosuke.jpちょっとした実装を自動でしてくれたり、追加したりすることができるJavaScriptライブラリ基本的に読みこむだけで動作する 機能一覧 画像ロールオーバー 通常のボタン画像とロールオーバー用の画像を用意し、 ロールオーバー用の画像の…

ガラケー(ガラパゴス携帯)のコーディング

DTD(文書型定義) xmlを宣言 XHTMLの場合htmlタグの前に 「XML宣言」と「DOCTYPE宣言」を記入しておく必要がある。 DOCTYPE宣言 XML宣言 <p></p> htmlタグ

HTTPステータスコード(Status Code)

1xx Informational 情報 2xx Success 成功 200 OK 成功 3xx Redirection リダイレクション 4xx Client Error クライアントエラー リクエストに誤りがある。401 Not Found 未検出 5xx Server Error サーバエラー 参考サイト postd.ccHTTPステータスコード - W…