トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1
後学のためにトレンドのJSを調べていたのですが、 jQueryから入って、フロントエンドのアニメーション・マウスイベント程度しか利用しないデザイナーの私でも導入できそうなJSを見つけました。 目次1 CrateJSとは？2 CreateJSの基本のカタチ2.1 HTML2.2 Javascript部分3 円オブジェクトを生成する4 トゥイーンアニメーションで動かしてみる CrateJSとは？ CreatJS こちらのJS、特徴はjQueryのようにメソッドチェーンで複数の処理 […]
グラフを描画できるライブラリのまとめ
こんにちは、工藤です。 今回はグラフを描画できるライブラリをご紹介します。 目次1 vis.js2 D3.js3 cola.js4 CHARTIST.JS5 Chart.js6 Flotr2 vis.js ネットワーク図を引っ張った時の動きが面白くて個人的に好きです。 あまりに複雑なものでなければアニメーションもサクサク動きます。 D3.js かなり自由度が高いライブラリらしく、とにかくサンプルの数が豊富にあります。 慣れている人は自分で細かい作りこみもできそうですね。 […]
【SEO対策】itemtype、itempropの調べ方【schema.org】
————————– 前回の記事 → 「【SEO対策・schema.org】itemscope、itemtype、itempropの基本」 基本についてはこちらの記事をご一読ください。 ————————– 今回は「自分のサイトに合うitemtype、itemprop […]
知っておくと便利なcssの小技 part7
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part7です。 今回はリセット系の2つです。 バックナンバー 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 目次1 safariのようなwebkit系のモバイル用ブラウザのフォーム要素をリセット2 max-width(height)をリセットする safariのようなwebkit系のモバイル用ブラウザのフォーム要素 […]
【SEO対策・schema.org】itemscope、itemtype、itempropの基本
—————————– 続編の記事を公開しました→「【SEO対策】itemtype・itempropの調べ方【schema.org】」 —————————– HTML5より、新しいプロパティが追加されました。（実質HTML4でも使えます） i […]
バナー・メインビジュアル デザイン集
今回はバナーとメインビジュアルを集めました。 個人的には、人物モデルの写真を組み合わせて作るデザインが気に入っています。 普段から、勉強も兼ねてこのデザインいいなと思った時には手元にデザインを残していたりします。
WEB/アプリ作成に役立つ！フリーアイコンのまとめ
こんにちは、工藤です。 今回はフリーでアイコンを提供してくださっているサイトをご紹介します。 目次1 icooon-mono2 Icon rainbow3 Material icons – Material Design4 iconmonstr5 Metrize Icons6 FLAT ICON DESIGN icooon-mono シンプルで使い勝手のいいアイコンだけではなく、ちょっと変わり種のものまで幅広く扱っているのが魅力的です。 なんと6000種類もあるよ […]
jQueryしか使えないデザイナーが流行りのReact.jsでHello Worldしてみる。
React.jsの理屈は後回し。とりあえずコードを書いてみたい。jQueryが古いと言われているのらしいので「こう書けばこうなる」くらいをやってみたい。 目次1 React.jsが来るらしい2 jsなのでまずはライブラリを読み込む3 文字を出力する React.jsが来るらしい jQueryで表面のベーシックなことだけしていたタイプの私には、React.jsは大変ハードルが高いです。検索して出てくる記事をいくつか読んでみたものの、そもそもの考え方から変えていかなければならない […]
【jQuery】〇月×日△時になったら表示を切り替えたい
例えばキャンペーン応募受付が夜中の0時までなので、その時間ピッタリにリンクを削除して、終了のメッセージを出したい。しかしその時間には寝ていたい、そんなとき。 「〇月×日△時になったら表示を切り替える」jsを組み込んでみましょう ※ただjsなので、厳密にソースを見られるとリンク先などがバレてしまいます。朝起きたらちょいと書き換えるくらいの温度感で済む場合なんかにご利用ください。 ※もうひとつ。画面を読み込んだタイミングでのみ動作します。表示中に時間が経過しても、リロードしないと […]
コンテンツを魅力的に演出できるjQueryプラグインのまとめ
こんにちは、工藤です。 今回は背景を魅力的に見せてくれるjsについてまとめてみました。 目次1 covervid2 particles.js3 StickyStack4 SHARDS5 rainyday.js6 multiScroll.js covervid 背景いっぱいに動画を表示してくれるプラグインです。 動画を使用するのにすごく軽量なところが魅力的です。 particles.js 幾何学模様を背景に表示してくれるプラグインです。 マウスの動きに合わせて幾何学模様 […]
【2017年版】CSSジェネレーターのまとめ
こんにちは、工藤です。 今回はCSSジェネレーターのまとめ2017年版です。 コーディングの際にいつも本当にお世話になっています…。 目次1 グラデーション1.1 Ultimate CSS Gradient Generator1.2 Blend1.3 shade1.4 CSS Gradient Generator1.5 Gradient Generator2 ボタン2.1 Grad32.2 CSS3 Button Generator2.3 Css Gradient Butto […]
コピペ可！CSSだけでレスポンシブテーブルをつくろう
こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 目次1 PC表示の時2 スマートフォン表示の時3 ソースコード4 ポイント5 YoutubeChannelのご紹介 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html css ポ […]
WEBブラウザからプッシュ通知を送信 【Push.js】の使い方
2017年のトレンド予測で「ネイティブアプリが減少、WEBアプリケーションに移行が本格化」というものがありました。 確かにAndroidとiOSで言語も異なるし、開発コストはいつもよりかかるし、ARなどの複雑な内容でなければわざわざネイティブアプリを作る必要はありません。 ネイティブアプリは少し前までプッシュ通知が送信可能という大きな利点を持っていたのですが、ついにWEBブラウザでもプッシュ通知が可能になりつつあります。 調べたところ、なんと便利なjsライブラリが存在するそう […]
Webデザインの参考に！ギャラリーサイトまとめ
こんにちは、工藤です。 今回はWebデザインの参考になる、ギャラリーサイトをまとめました。 目次1 日本語サイト1.1 I/O 30001.2 81-web1.3 MUUUUU.ORG1.4 ARTNOC.COM1.5 S5-Style1.6 Japan Web Design Gallery1.7 Web Design Clip1.8 WEB DESIGN GALLERY for WEB DESIGNERS1.9 responsive Web Design JP2 海外サイト […]
人物の写真を補正する
今回は人物のレタッチを紹介していきます。 使用するのはこちらの写真。 目次1 ヘアスタイルを修正2 服や小物の色を調整する3 肌や前髪をきれいに ヘアスタイルを修正 まず、看護師さんなので髪をまとてもらいましょう。 必要な箇所を選択し、切り抜いていきます。 とびでている髪の毛なんかも、除外してしまいましょう。 清潔感が欲しいので、耳を出します。 他の写真から耳を切り抜いて、色調を補正し、合成します。今回はカラーバランスで調整しました。 耳合成しました。これでヘアスタイルは完了 […]
ローディングアイコンを作成してくれるWebサービスのまとめ
こんにちは、工藤です。 今回はローディングアイコを作成してくれるWebサービスをまとめました。 Webサービスだとリアルタイムで色やスピードなどをチェックできるのが嬉しいですね。 目次1 画像で作成1.1 Loader Generator1.2 Preloaders1.3 Loadinfo1.4 Ajaxload2 CSSで作成2.1 SpinKit2.2 Single Element CSS Spinners2.3 CSS Load.net3 SVG/CSS/GIF で作成 […]
写真を美しく補正する
案件によっては、撮影などの機会がなく、担当の方が撮った写真を素材としてデザインをまとめるという状況も多々あります。 その時に少しでも写真が美しく見えるよう、写真の補正や簡単なレタッチを行うことがあります。 そのうちによくやる補正の方法をいくつかご紹介したいと思います。 photoshopでどんどんこなしていきましょう。 目次1 全写真共通1.1 写真の輪郭をくっきりさせる2 建物編2.1 主役の建物を垂直にする2.2 建物を切り抜いて背景の天気をよくする 全写真共通 写真の輪 […]
スマートフォン用メニューのjQuery/CSS3プラグインまとめ【2017年版】
こんにちは、工藤です。 今回はスマートフォン用メニューのプラグインをまとめました。 実用的なものから動きが面白いなと思ったものまで様々です。 目次1 アコーディオンメニュー1.1 slicknav1.2 jQuery slimMenu1.3 MeanMenu2 ドロワーメニュー2.1 Drawer2.2 jQuery.offcanvas2.3 Pure Drawer2.4 Bouncy Material Design navigation drawer in CSS2.5 T […]
社会人のための三角関数復習[基本編]
前回書いた扇形状にアニメーションする記事、非常に残念な動きをしています。無念としか言いようがありません。 これを機におさらいをしてみようと、過去の薄れかけている記憶を呼び覚まし、高校数学の「三角関数」を調べてきました。 円弧上の点の座標を求める必要がある場合、これの理解がもう必須なんですよね。「Math.sin(x)」とかで値だけ出すことは可能なのですが、そもそも関係を理解していないと正しく関数を組めません。 目次1 sin、cos、tanの基本の公式2 円弧上の点を求める三 […]
svgで扇形を書きたかった。
勉強も兼ねて、円グラフのようにぐるっと描写するjsを書きたかったのですが、どうにもうまくいきませんでした。。 角度の計算がおかしいんだろうなと思うのですが、どうにも数学が苦手で、もう少し調査してリベンジしたいです。 単純に90度ごとだととても簡単なのですが、終点の座標が曲線の部分にかかってくると三角関数が関わってくるので数学が苦手な人間にとってはとても大変なんですよね。 このソースコードだと、こんな図形になります。90度の単純な扇形。 pathタグの「d=”M 0 […]
知っておくと便利なcssの小技 part6
こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part6をご紹介します。 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 目次1 括弧付きの数字リスト2 文字を省略する 括弧付きの数字リスト 単純に数字だけではなく、括弧付きでリストを作りたいときはありませんか？ そんな時に使える方法です。 今回のポイントはcounter-incrementプロパティを使うことです。 ま […]
知っておくと便利なcssの小技 part5
こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part5をご紹介します。 今回はレスポンシブ関連のものです。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 目次1 ウィンドウサイズによってテキストを改行させたい2 テーブルのレイアウトをウィンドウサイズによって変更する ウィンドウサイズによってテキストを改行させたい レスポン […]
年末年始休暇のお知らせ
平素は格別のお引き立てをたまわりまして誠にありがとうございます。 当社では以下の日程で年末年始休暇を取らせていただきます。 2016/12/28(水)～2017/1/4(水) 12/28(水)については緊急対応以外の業務以外の通常業務は行いませんので、ご容赦願います。 なお、12/28以降にご連絡いただきましたご依頼については、年明けの1/5(木)からの対応とさせていただきます。 運用中の各種Webサービスについても、緊急性の高い不具合対応以外のサポートについては、年明けの1 […]
簡単にスクリーンショットが撮れるChrome・Firefox向けプラグイン
こんにちは、工藤です。 今回はページ全体のスクリーンショットを撮るのに便利なプラグインをご紹介します。 Chrome・Firefox向けです。 目次1 Awesome Screenshot Plus2 FireShot3 FireShot4 Firefoxの開発者ツール Awesome Screenshot Plus ChromeFirefox 個人的にお世話になっている『Awesome Screenshot Plus』です。 とにかくかゆいところまで手が届きます。ブラウザの […]
GIFアニメは次世代へ！動くpng画像、apng形式の作り方
（動かない場合、firefoxまたはChromeで確認すると動きます。） 上記の画像はapng形式のアニメーション画像。 gifアニメーションと違い、アルファ情報を含めることもできます。ファイルサイズもgifアニメと大差はないとのこと。 いつの間にかLINEクリエイターズスタンプにてapngの取り扱いも開始していて、今後アプリの作成なんかではどんどん主流になっていくと思うので今のうちに作り方を確認しておきたいと思います。 目次1 フリーソフトを使って作成します。2 詳細な手順 […]
運営会社:株式会社8bit
制作サービス
運営サービス
