サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
www.dataplan.jp
Illustratorで、背景の柄や模様などを作るときに欠かせないスウォッチ機能を使って ストライプ柄を簡単に作る方法をご紹介します。 STEP1 「長方形ツール」で、作りたいストライプ幅の長方形を1つ作ります。 (長方形の大きさは適当で大丈夫です) 今回はW:14px H:110pxで作りました。(かなり適当です) 長方形の線は色なしに設定します。 STEP2 長方形をコピー(Ctrl + C)して、前面にペースト(Ctrl + F)します。 重なった状態の長方形を二つとも選択した状態で①「整列」の「キーオブジェクトに整列」にチェックを入れます。 ※整列タブが表示されていない場合は「ウィンドウ」から「整列」にチェックを入れて表示させます。 ②「等間隔に分布:」の図をクリック →長方形が二つ、均等に並びました。 ※ShiftキーとAltキーを同時に長押ししたまま長方形をドラッグして複製して
ホームページ制作・DTP制作をおこなう上で色は非常に重要なものです。 しかし、ホームページと印刷物の色の表現が違うことをご存知ですか? ここでは色の表現方法である、加法混色と減法混色をご紹介します。 色の表現方法は大きく分けて2種類! 2つ以上の異なる色を混ぜ合わせることによって別の色を作ることを「混色」といいます。 混色は、混ぜれば混ぜるほど明るくなる「加法混色」と、混ぜれば混ぜるほど暗くなる「減法混色」の2つに大きく分けられています。 加法混色とは、赤(R)・緑(G)・青(B)を組み合わせて色を表現する方法です。 加法混色は、色を重ねるごとに明るくなり3つの色を重ねると白になります。 この赤(R)・緑(G)・青(B)は「色光の三原色」とも呼ばれます。 スポットライト・パソコンなどのディスプレイから発せられる色は加法混色で表現されています。 ホームページはディスプレイを通して閲覧するので
ホームページのコンテンツをスクロールするだけで切り替えるjQueryのプラグインは多々あります。 今回紹介するのはコンテンツごと水平にスクロールすることができるプラグインです。 jquery.horizonScroll.jsのデモサイト スクロールすると左右にコンテンツがスライドします。 WEBサイトに載せる内容によっては、このようなスライドさせる見せ方も面白いと思います。 導入も簡単なのでチェックしてみてください。 「jquery.horizonScroll.js」で水平スクロール 下記ページから「jquery.horizonScroll.js」をダウンロードします。 https://github.com/trgraglia/jquery.horizonScroll.js ファイル読込 「jquery.horizonScroll.js」を動作するのに必要なファイルを読み込みます。 <li
ホームページを制作する時にお問い合わせや資料請求などのフォームを設置することがあるかと思います。 そのフォーム内の入力項目で住所の入力欄があった場合、郵便番号を入力しただけで該当する住所が自動入力されたら便利ですよね。 下記のjQueryプラグインを使用すれば簡単に導入することが可能です。 jquery.jpostal.js 今回は「jquery.jpostal.js」というjQueryのプラグインを使用して郵便番号から住所を自動入力する方法をご紹介します。 郵便番号から住所を自動入力「jquery.jpostal.js」の使い方 使い方はとても簡単です。 下記に「jquery.jpostal.js」を使用する時の手順を説明します。 ※例:郵便番号と住所の入力欄が1個ずつの場合 ファイル読込 jQueryと「jquery.jpostal.js」を読み込みます。 <script type="
最近暑い日が続いてますね。仙台では最高気温26℃!あつっ! 他県に比べればまだ快適な方かもしれませんが、今からこんなに暑いと夏が怖くなってきますな。 さてさて、みなさま、organicやreferralという言葉を聞いたことありますか? これらはGoogleアナリティクスの集客に出てくる言葉です。 今回はorganic search、referral、direct等の意味や違いについてご説明します。 そもそもGoogleアナリティクスの集客って何? Googleアナリティクスの集客ではWebサイトに訪れるまでの経路の割合を知ることが出来ます。 経路の種類のことをチャンネルといい、主に以下のように分類されています。 organic search referral direct social organic search organic searchは、基本的に検索エンジンの検索結果ページから
Illustratorでパターンを使うとき、色を変更したり大きさを変えたいと思ったことはありませんか? 自分でパターンを作ることももちろんですが、 既存のパターンを利用して楽に変更することができます。 そこで、今回はパターンの色と大きさを変える方法をご紹介します。 まずは既存のパターンを図形(オブジェクト)に適応させる パターンの色を変えるため、まずは既存のパターンを図形(オブジェクト)に適応させます。 今回はドットの模様にしました。 1.「ウィンドウ」から「スウォッチ」をクリックしてスウォッチパネルを表示させる 2.スウォッチパネルの右上にあるメニューをクリックして「スウォッチライブラリを開く」→「パターン」→「ベーシック」→「ベーシック_点」を選択 3.長方形ツールなどで四角形を書きパターンを適応させます。 Illustratorでパターンの色を変える方法 1.ここからが色の変更方法で
WEBサイトを閲覧していると急に画面が白くなってエラーページが表示されることがあります。 下記のような表示です。 これは、サーバからブラウザに発信されるHTTPのステータスコードです。レスポンスコードとも言われます。 何かエラーがあった場合などにサーバからブラウザに返されます。 エラーが無く正常にサーバにアクセスできている場合は、ユーザーには表示されません。 エラーコードの代表的なもので403、404、500、503エラーなどがありますが、見たことがありますでしょうか? ホームページやブログを運営している方であれば、WEBサイトでエラーが起きた時に何が原因なのかすぐにわかるので、覚えておいた方が良いと思います。 下記にWEB運営で知っておきたいHTTPステータスコードの説明を記載します。 403、404、500、503などのステータスコードについて HTTPステータスコードは100番台から
以前、パララックス効果(視差効果)を用いたサイトをご紹介しました! スクロールで動く!パララックスを使用したユニークなサイト このようなかっこいいサイト、つくってみたいですよね! パララックスの実装をするためにさまざまなプラグインが存在しますが、 今回はプラグインを使わないで、簡単に作成する方法を書いてみたいと思います。 作成の流れとしては 1.スクロール量を取得する 2.positionのCSSを変更して動かす というものです。 デモページ 今回、私がプラグインを使わないで作成したパララックスを用いたサイトはこちら。 パララックスを使用したデモページ 夏も終わるというのにカブトムシですが。 このように、ひとつずつ動きを変えることもできます。 スクロール量を取得、出力する まずはスクロール量を取得、出力してみます。 実際は出力しなくてもいいのですが、今回は表示させてみました。 jQuery
今回は仕事に使うにはちょっとかけ離れた、グリッチエフェクト(またはグリッチノイズ)に触れてみたいと思います。 グリッチ(故障)とは映像などの破損により生じる画像の乱れや、ゲームにおけるバグが起こった時の画面の乱れなどを言います。 グラフィックデザインにおいては、意図せずできたグリッチを有効活用したり、Photoshopなどを使って人工的に作ったりする方法があります。 今回はそのグリッチエフェクトを簡単に処理してくれる「ImageGlitcher」を使ってみました。 加工までの流れ 以下のURLで加工ができます。 https://www.airtightinteractive.com/demos/js/imageglitcher/ 7つのサンプル画像を使用するか、「Drop Image Here」のところへ加工したい画像をドラッグアンドドロップします。 「GLITCHINESS」「BRIGH
会社近くで良さそうな昼飯を探していますがなかなか見つからなくて困ってます。コスパがよくてうまいところを見つけたい・・・。 今回は墨溜まりを作る方法を紹介したいと思います。結構手軽にいい味を出したテキストができるのでぜひ覚えてみてください。 墨溜りの作り方 適当なテキストを作成し、「効果」メニューの「パス」の「パスのオフセット」を選択します。 ①「オフセット」の項目を今回は「2px」と入力します。フォントのサイズによって入力する数値が異なるので注意です。 ②「角の形状」を「ラウンド」にします。 ③「角の比率」はここでは「4」にします。 ④各項目入力後「OK」をクリック。 次に「アピアランス」パネルにある「パスのオフセット」を選択した状態で、※のアイコンをクリックし、「パスのオフセット」を複製します。 ①複製後、下のほうの「パスのオフセット」をクリックし、ダイアログを表示します。 ②オフセット
CSSで背景画像をブラウザのサイズ全体に固定させて表示させることができます。 そこで今回はスクロールした際に別の要素を間に入れて背景画像を切り替えてみました。 文章だとなかなか伝えるのが難しいですね。 サンプルを作成したので、使用方法を下記に記載します。 スクロール時に背景画像を切り替える 背景画像に使用する画像を複数用意します。 ※例では2つの画像を用意しています。 HTML 背景画像で使用する要素とスクロールさせる要素を交互に記述します。 <body> <div class="bg_fixed1"></div> <div class="scroll"></div> <div class="bg_fixed2"></div> <div class="scroll"></div> </body>
こんにちは!貴重なゴールデンウィーク二日目に酷い風邪をひきました。そう、私です。 昨日、近所の親戚から佐市(さいち)の秋保おはぎ1ダースいただきました。 先日の「月曜から夜ふかし」でマツコさんが食べてましたね。もはや仙台名物です。 さて、今回はPhotoshopからCSS3を書き出すことが出来るプラグインご紹介します。 ホームページの制作では、Photoshopを使っていますか? そんなあなたにオススメ! Photoshopで作ったグラデーションや角丸、シャドウなどのデザインを CSS3に変換できちゃう便利なプラグインがあるんです! PhotoshopからCSS3に書き出してくれる、それがCSS3Ps! 「CSS3Ps」は、Photoshopで作った角丸四角形や、レイヤー効果のシャドウ、カラーオーバーレイ、 グラデーションなどを、自動でCSS3に書き出してくれるエクステンション。 なんと無
前回はTwitterのツイート数を個別に取得する方法を記事にしました。 今回はFacebookのいいね数について記載します。 Twitterと同様にFacebookもAPIを利用するとURLを指定するだけで、そのページのいいね数を取得することができます。 オリジナルのソーシャルボタンを作りたい、カウント数だけを取得したいという場合の参考になれば嬉しいです。 Facebookのいいね数を取得する いいね数を取得する場合、下記のURLにアクセスすると指定したページのいいね数とコメント数を取得することができます。
開閉するアコーディオンメニューなどに+(プラス)のアイコンをつけて、 クリックしたら-(マイナス)や×(バツ)のアイコンに変えたい! なんてことありませんか? 今回は、+と-(プラスとマイナス)、+と×(プラスとバツ)のアイコンをクリックで切り替えるアニメーションをご紹介します。 jqueryで開閉とクラスの追加削除を行い、CSSでアニメーションを行っています。 アニメーションのデモページはこちら 上が+と-(プラスとマイナス)、下が+と×(プラスとバツ)のアイコンをクリックで切り替えるアニメーションです。 デモページはこちら $(function(){ $(".accordionbox dt").on("click", function() { $(this).next().slideToggle(); // activeが存在する場合 if ($(this).children(".ac
波紋と聞いてビビッときた方、私とともだちになりましょう! そう!仙台が誇る漫画、ジョジョですよね(。゚ω゚) 今回は簡単に波紋を修得でき、、、いえ、、、 マウスに合わせて波紋をかけるjQueryプラグイン「jQuery Ripples」をご紹介します。 動きがキレイでいつまでもマウスを動かしていたくなりますよ。 jQuery Ripples http://sirxemic.github.io/jquery.ripples/ 下記に「jQuery Ripples」を使用する時の手順を説明します! その前に注意点 Chromeではローカルで動きを確認することが出来ませんでした。また、IE10以前のバージョンに未対応、スマートフォンブラウザでも閲覧できないので注意してください。 「jQuery Ripples」プラグインの使用方法 ファイル読込 下記から「jquery.ripples」をダウンロ
トップページ スタッフブログ HTML 検索エンジンの巡回(クロール)を拒否 noindex、nofollowのmetaタグとrobots.txtの設定方法 ホームページを公開すると検索エンジンがアップロードしたページのクロールを行い、 公開したページがインデックスされるようになります。 そして、検索エンジンにインデックスされると検索結果に表示されます。 ホームページを制作しているとGoogleなどの検索エンジンからインデックスされないように設定することがあります。 例えば下記のような場合です。 テストで公開しているページ 管理画面などのログインページ コンテンツの内容が薄いページ 検索結果に表示されても意味がないページや検索されなくないといった場合、 robots metaタグやrobots.txtで検索エンジンを制御することが可能です。 今回はrobots metaタグの設定やrobo
ホームページ制作時、コンテンツ内のテキスト量が多い場合などコンテンツの一部を隠して「続きを読む」リンクを付けて表示させることがあります。 今回はその様な時に便利なjQueryのプラグイン「Readmore.js」をご紹介します。 Readmore.js 「Readmore.js」は「続きを読む」などのリンクで要素の開く閉じるを簡単に組み込むことができるjQueryのプラグインです。 このプラグインでは最初に表示するエリアを高さで指定できるのが便利なポイントです。 下記に「Readmore.js」プラグインの使用方法を記載します。 「Readmore.js」プラグインの使用方法 まずは下記ページから「Readmore.js」をダウンロードします。 https://github.com/jedfoster/Readmore.js ファイル読込 jQueryとダウンロードした「Readmore.
トップページ スタッフブログ jQuery テキストを順番に表示!様々なアニメーションで動かせるjQueryのプラグイン「textillate.js」 ホームページ上のテキストに動きをつけて文字や文章を目立たせたい! と思ったことはありませんか? jQueryのプラグイン「textillate.js」を使用するとホームページに表示するテキストに様々なアニメーションをつけることができます。 Textillate.js キャッチコピーなどに動きを出してアピールしても面白いかと思います。 今回はjQueryのプラグイン「textillate.js」の使用方法を紹介します。 jQueryのプラグイン「textillate.js」の使用方法 使用方法は簡単です。 下記のページから「textillate.js」をダウンロードします。 https://github.com/jschr/textillat
WEBサイトのページに雪を降らすような効果を出せるjQueryのプラグイン「JQuery-Snowfall」をご紹介します。 このプラグインを使用すると指定した要素に対して、雪を降らせることができます。 画像を使用することができるので、雪以外にも桜など季節ごとに変更したら面白いと思います。 下記に「JQuery-Snowfall」の使い方を記載します。 「JQuery-Snowfall」を使用して雪を降らせる方法 下記のページから「JQuery-Snowfall」をダウンロードします。 JQuery-Snowfall ファイル読込 jQuery、ダウンロードした「JQuery-Snowfall」を読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jqu
ホームページを制作する際にアイコンを使用して構築することは多くあると思います。 簡単なアイコンであれば画像を使わなくてもCSSだけでも作成することができます。 画像をあまり使いたくない場合などに良いかもしれないです。 今回は、丸、三角、四角などの簡単なアイコンを画像を使わずにCSSだけで作る方法をご紹介します。 CSSで簡単なアイコンの作成 それぞれのCSSの記述例を記載します。 丸のアイコン .circle { display: inline-block; width: 50px; height: 50px; background: #67A6EB; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px; border-radius: 5
ホームページのアクセス解析をする時にGoogleアナリティクスのキーボードショートカットというショートカット機能があることをご存知でしょうか? Googleアナリティクスのキーボードショートカットを利用すると、今日とか昨日とかの日付指定をカレンダーを使わずにキーボードの操作だけで画面を切り替えることができるのです。 この機能を知っているとGoogleアナリティクスでの操作が楽に行えるようになり、解析時の作業効率も上がると思います。 実際、私も頻繁に利用しています!超便利です! 今回はGoogleアナリティクスのキーボードショートカットについて使い方などを紹介します。 Googleアナリティクスのキーボードショートカットについて Googleアナリティクスの画面で「Shift」+「?」を押すとキーボードショートカットの機能が一覧で表示されます。 アナリティクスの画面で下記のシュートカットを押
#wrap{ width:800px; height:500px; margin:30px auto 0; background-image: -o-linear-gradient(bottom, #4DB6EB 0%, #99D8DE 100%); background-image: -moz-linear-gradient(bottom, #4DB6EB 0%, #99D8DE 100%); background-image: -webkit-linear-gradient(bottom, #4DB6EB 0%, #99D8DE 100%); background-image: -ms-linear-gradient(bottom, #4DB6EB 0%, #99D8DE 100%); background-image: linear-gradient(to bottom, #4DB6
今回はjQueryのプラグイン「jQuery Scrollify」をご紹介します。 「jQuery Scrollify」はWEBサイトのページをスクロールした際に、画面ごとにちょうどいい位置までスクロールさせることができるプラグインです。 セクションごとに画面が分かれているページなどに活用できます。 また、スマホにも対応しております。 下記に「jQuery Scrollify」の設置方法を記載します。 「jQuery Scrollify」の設置方法 下記のページから「jQuery Scrollify」をダウンロードします。 jQuery Scrollify ファイル読込 jQuery、jQuery Easing Plugin、ダウンロードしたファイルを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com
※2015年6月26日時点で確認したところ仕様が変わったようで、スマートフォンでも画像の上端から表示されるようになりました。記事の内容の一部が異なりますのでご注意ください。 スマホでFacebookページのカバー写真を見てみると、画像が切れていたり、ズレていたりして変だなと感じたことはありませんか?今回はこの問題を解決していきましょう。 PCサイズで作った画像をスマホで見るとこうなる PCで閲覧したFacebookページのカバー写真は851px × 315pxのサイズで表示されます。 ところが、スマホでは表示サイズが違うんです。スマホのカバー写真はPCに比べて少し縦長なのです。それにより、縦サイズが足りないため画像の両端が切れて表示されてしまいます。確かにこのサイズの画像をそのまま縮小してしまうと、縦幅がほぼ無くなってしまうので仕方のない事です。しかし、PCもスマホも同様の画像しか設定でき
PHPのフレームワーク「FuelPHP」を使用した時の開発メモです。 FuelPHPでSessionクラスを使用した時に下記のエラーが表示されました。 Fuel\Core\FuelException [ Error ]: The session data stored by the application in the cookie exceeds 4Kb. Select a different session storage driver. これはセッションに保存するデータの容量が4KBを超えているというエラーです。 FuelPHPではセッションの保存先がデフォルトでクッキーに保存されるようになっております。 なので4KB以上のデータを保存する際に制限がかかってしまいます。 しかし、開発を行なっていると大きいデータを保存したいという場合も出てくると思います。 FuelPHPのSessio
色々なWEBサイトを見ていてページをスクロールしていくと、ブラウザの画面上に表示されたタイミングで画像や要素が出現したりなど、様々なイベントを発生しているサイトを見ることがあります。 今回はある特定の要素が画面に現れたタイミングで処理を行うことができるjQueryのプラグイン「jquery.inview」をご紹介します。「jquery.inview」を使用すると要素が見えたタイミングでイベントを発生することができるので動きのあるページを作成することが可能になります。 ランディングページなどで注目させたい箇所やアピールしたい箇所に動きをつけて、閲覧者に興味を惹かせることができるかもしれませんね。 「jquery.inview」で画面に表示された時に処理を実行 今回は、指定した要素が画面に表示されたタイミングでフェードインして要素を出現させる方法を記述します。 下記のページから「jquery.
ホームページ制作で吹き出しを使ったデザインを作成することがあります。 備忘録がてらサンプルをいくつか作成したので、CSSで作る吹き出し12パターンをまとめてご紹介します。 CSSで作る吹き出しのメリットとデメリット CSSで作るメリット 画像を使わないのでデザインの変更が楽にできる 中に入れるテキストの長さを自由に変更できる スマホ対応が楽にできる Retinaディスプレイでも綺麗に見える CSSで作るデメリット ブラウザによってレンダリングに差が出る場合がある 特になんの処理もしていない場合、IE8以下は角丸が使用できないのでちゃんと表示されません。 用途に合わせて使用してみてください。 吹き出しサンプル 「枠線ありの吹き出し」と「枠線なしの吹き出し」は汎用性が高そうなので1つずつサンプルを用意しました。 枠線ありの吹き出し その1 その2 その3 その4 枠線を作る場合三角の部分を2つ
今回はjQueryのプラグイン「infiniteSlide」をご紹介します。 「infiniteSlide」は横方向に繰り返し画像をスクロールさせることができるプラグインです。 WEBサイトのメイン画像などは複数の画像を使用して、自動で繰り返しスライドさせたいということがあると思います。 jQueryのプラグインでも画像をスライドさせる物はたくさん存在しますが、 とてもシンプルで活用できそうだったので下記に使用方法を記載します。 「infiniteSlide」で無限に画像をスクロールする方法 下記のページから「infiniteSlide」をダウンロードします。 https://github.com/woodroots/infiniteslide ファイル読込 jQuery、ダウンロードした「infiniteSlide」を読み込みます。 <script type="text/javascri
WEBサイトを制作している時に新着情報やお知らせをニュースティッカーで表示したい場合があります。 今回はシンプルなニュースティッカーを簡単に実装することができるjQueryのプラグイン「jquery.simpleTicker.js」を使用してみたのでご紹介します。 シンプルにテキストを切り替えるだけであれば利用できそうです。 テキストを切り替える時のエフェクトは「fade」「roll」「slide」で指定できます。 「jquery.simpleTicker.js」の使用方法 下記のページから「Basic Table」をダウンロードします。 https://github.com/miraoto/jquery.simpleTicker.js ファイル読込 jQueryとダウンロードした「jquery.simpleTicker.js」を読み込みます。 cssはサイトに合わせて変更します。 <li
次のページ
このページを最初にブックマークしてみませんか?
『www.dataplan.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く