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

HTML5+Canvasで学ぶ物理アニメーションの基礎

www.webopixel.net

ColorBox.jsでimgをクリックすると動画の表示

参考サイト cly7796.netwisdommingle.com kachibito.net Colorbox.jsをダウンロードし、以下のように指定する。(動画はYoutubeの埋め込みコードより) <html> <head> <meta charset='utf-8'/> <title>Colorbox Examples</title> <style> body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;} a:link, a:visited</meta></head></html>…

react.js,bable,googleフォント

app.codegrid.net app.codegrid.net photoshopvip.net

canvas

Canvasとは - Canvas - HTML5.JP

Gulpの使い方と便利なプラグインの動画(schoo)

schoo.jp

正規表現、meta refresh

正規表現 手を動かしながら覚える正規表現<基礎入門編> meta refresh <meta http-equiv="refresh" content="秒数;URL=URL"> 自動的に特定のページにジャンプさせる -HTMLタグ辞典-meta refreshタグ0秒のSEO効果と301リダイレクト推奨理由</meta>

IE対応書き方

IE用CSSハックの簡単な書き方とIE10以上への対応 | web codery

clearfix,display;table

clearfix floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17display:table; 要素をトップ、ミドル、ボトムの3種類に配置することができ、コンテンツの量が変化しても自動的に位置を調整してくれる <html lang="ja"> <head> <meta charset="UTF-8"> <title>clearFix、display:tab</title></meta></head></html>…

サムネイル付きスライド

HTML <html lang="js"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> </meta></head></html>

jQuery inviewプラグイン

on-ze.com

レンダリング、Web GL,addEventlistener,Node.js,バブリング、function(e),SMACSSによるCSS設計

web-directors.netdeveloper.mozilla.orgEvent Listener: イベントリスナ [JavaScript / DOM] js.studio-kingdom.comtaneppa.net d.hatena.ne.jp shgam.hatenadiary.jpwww.ibm.com

最近個人で作成したラインスタンプ

初めてラインスタンプを作成してみました!! よければ購入お願いしますm_m store.line.me

可視範囲に入ってからli要素の表示を、要素の順番ごとに少しずつずらす方法

今回は可視範囲の判定をjsでして、可視範囲に入った時にactiveというクラスを付けました。 目的はdisplay:inline-block;で並べている画像を要素の順番ごとに送らせて表示させることで、その設定はcssのanimation機能を使用しました。HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>

動画読み込み方法

https://support.google.com/youtube/answer/171780?hl=ja http://wisdommingle.com/youtube-embedded-player-parameter-customize/

ページャー(ナビゲーションボタン)

現在いるページのURLと同じリンク先を持つナビゲーションボタンのみ色を変えて、現在のページ位置を知ることができます。 HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>pager</title> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet"> </link></link></meta></head></html>

mapタグの簡単な書き方

マップ <MAP> <AREA> - HTMLタグリファレンス/Tips Dreamweaver ヘルプ | イメージマップを作成する方法 (Dreamweaver CC)</area></map>

display:inline-block;使用時の隙間の解消

http://inspire-tech.jp/2011/06/inline_block_spaces/

ページ遷移に使えそうなプラグイン

ページやブロック要素の切り替えがかっこいいプラグイン6選(jQuery・JSなど) | 株式会社LIG git.blivesta.com tympanus.net

css3 アニメーション基本的なこと

www.css-lecture.com 【CSS3】CSSのtransformの値を4つ紹介【scale、translate、rotate、skew】qiita.com

オススメ紹介されたサイト(デザイン系のツール)

blogs.adobe.com Adobe Evangelists | Adobe TVblogs.adobe.com

Sublime text プラグインのEmmetでコーディングスピードをアップ

catcher-in-the-tech.net Cheat Sheet

display機能の違い

taneppa.net

最近見たjQueryプラグイン、CSS3アニメーションなど

digipress.digi-state.comdigipress.digi-state.comdigipress.digi-state.comdigipress.digi-state.com develo.org

photoshop アクション作成

アクションの作成および再生方法 (Photoshop CC) バッチしょり 【バッチ処理】 コンピュータで、データをかなりの分量までためた時点で一遍に(小型機よりは大きい機械で)行う処理。 ▷ 「バッチ」は batch (=束)。一九八〇年代までは普通の処理法。一…

可視範囲に入ってからアニメーションさせる

weboook.blog22.fc2.com

windows7ショートカット、サイトルートパス

Windows 7 のショートカット キー | マイクロソフト アクセシビリティサイトルート相対パスについて(Dreamweaver)Adobe Dreamweaver * リンクおよびナビゲーションについて

差分を確認するツール

WinMerge 日本語版 テキストの比較 | WinMergeam1tanaka.hatenablog.com

ツール詳細

node.js eng-entrance.comgrant GRANT(ぐらんと)とは - コトバンク blog.webcreativepark.netsassとcompassの違い SassとCompassってどう違うのか調べてみた | kanonjiのブログフレームワークとは フレームワークとは?今更聞けないWebフレームワークを始め…

参考URL

|動きのあるLP|||| - http://store.world.co.jp/s/tk/feature/20160725/ http://store.world.co.jp/s/tk/feature/20161021/ http://store.world.co.jp/s/takeokikuchi/feature/pinkpanther/ http://store.world.co.jp/s/untitled/keyword/craftsmanship…

git

tracpath.comブランチの切り替え方法(tortoisegit) www.granfairs.com ブランチの切り替え方法(sourcetree) qiita.com わかりやすい解説 naichilab.blogspot.jp http://www.backlog.jp/git-guide/

zampのインストール

techacademy.jpルートパスの設定 http://webcollection.blog21.fc2.com/blog-entry-10.htmlhttp://webnetamemo.com/server/201509181768

参照

http://store.world.co.jp/s/untitled/keyword/plusmagazine/04/?inbnid=15316100772&link_id=153_M_Sbnr_01 webkikaku.co.jp

HTML5試験問題

html5exam.jp

ビジネスマナー

もっと伝わるコミュニケーション術 -会話編- https://schoo.jp/class/2966もっと伝わるコミュニケーション術 -プレゼン編- https://schoo.jp/class/2967話し下手ほどうまくいく、聞く技術「アクティブリスニング」 -準備編- https://schoo.jp/class/2950聞く…

デザインのレギュレーションについて

http://hpotest.bek.jp/test/guideline/design.html

スムーススクロール

syncer.jp

指定した要素を斜めに指定する方法

www.htmq.com cssでskewを使っているサイト http://www.joycevherck.com/

アクセシビリティと色の関係に関するサイト、本、著者

サイト これでわかる!Webアクセシビリティって?JIS X 8341-3って? from Web Accessibility Infrastructure Committee (WAIC) www.slideshare.net https://liginc.co.jp/web/design/other-design/21595 waic.jp 書籍 デザイニングアクセシビリティ https:/…

修正に参考するサイト

[jQuery] スクロールに応じて背景を変更する - かちびと.net【コピペOK】フッターまで行ったら消えるor表示するjavascript | ホームページ・ウェブサイト制作www.webopixel.netweboook.blog22.fc2.comkeitahirai.net

モリサワフォントの参照先

www.morisawa.co.jp

次回作成LP案

①酒類のキャンペーンページ(飲むシチュエーション、合う食べ物、美味しい飲み方、キャンペーン、イベント) www.kirin.co.jp ②クレジットカードもしくはポイントカードの申し込みへの誘導LP(特典と今だけのキャンペーンを売り出す感じ) クレジットカード入…

背景スクロール時に色を変える時に参考にするサイト

muuuuu.org recruit.istyle.co.jp coliss.com webkaru.netwww.honshibori-mag.jp

次回作成LPにつけるプラグインの参照

http://www.m-hand.info/blog/5589/ http://idangero.us/swiper/demos/#.V_UQhpOLSAw

photoshopで写真のゴミを消す方法,写真の一部の色を変更する,photoshopで文字を丸文字に

photoshopで写真のゴミを消す方法 digitalfan.jp写真の一部の色を変更する techacademy.jp photoshopで文字を丸文字に a.know-how.fc2.com

meta情報について、jsについて

mata情報について www.useful-notes.com メタタグによる文字コード指定の有効性 www.task-notes.com 検索除外にする digital-marketing.jpSEO関連 qiita.com jsについて preload.js qiita.comswapimg.js include.js 団塊爺ちゃんの備忘録

次回LPを制作するときに参考にするサイト

薬事法関連 http://www.yakujihou.com/content/rule.html#list2 web60.co.jpPPC広告とは、リスティング広告に代表される、クリックされることによって課金されるタイプの広告(クリック課金型広告)のことです。web60.co.jp web60.co.jp 次回制作LPのコン…

photoshop 1つのPSDデータから画像の書き出し方法(スライスツールではなく選択範囲ツールでスライス範囲を定義する方法)

★今回はイラレで配置した画像をPhotoshopにスマートオブジェクトで配置し、それを希望の位置、幅、高さで画像として書き出す方法を紹介します。イラレデータ スマートオブジェクトでphotoshopで配置したデータ ①スマートオブジェクトの上に新規レイヤーを追…

WEbディレクション検定(PDF版) 用語意味

1:コアコンピタンス コア・コンピタンスとは、企業の中核となる強みのこと。 ゲイリー・ハメルとプラハラードが「顧客に対して、他社には真似のできない自社ならではの価値を提供する、企業の中核的な力」として定義した。 両氏は実例として、ホンダのエン…

レスポンシブの一覧チェック

mattkersley.com

LP1制作用参考サイト(旅行)

制作したLP(PC版) EAトラベル ちょこっと旅|日本旅行女子旅特集 女子におすすめの海外ツアー 東京発|ルックJTB www.my-fav.jptrapics.hankyu-travel.com www.my-fav.jp 作成予定LP内容(EAトラベルで行く フランス・イタリア・スペイン 名所を廻る10日間…