サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www.marukin-ad.co.jp
レスポンシブコーディングにおいてCSSのメディアクエリによる分岐は必須ですが、JavaScriptの分岐にもメディアクエリと同じようなものがあるのをご存知でしょうか? 一般的にJavaScriptでブラウザサイズによる条件分岐は$(window).width()やresizeを利用したものが多いですが、サイズ変更のたびに処理を実行するのでパフォーマンスに影響がありました。そこでブレイクポイントのみを監視して切り替わったタイミングで1度だけイベントを発生させるwindow.matchMediaについてご紹介します。 まず$(window).width()やresizeを使った分岐とwindow.matchMediaを使った分岐を比較してみます。 $(window).width()とresizeを使った分岐 $(window).on('load resize', function(){ let
アンカーリンクにはページ内リンクや、ページをまたいで特定の場所にリンクさせる方法があります。特定の場所へリンクさせることができるので便利ですが、ヘッダーなどがフローティングでページ上部に固定されている場合は、何も対策をしないとアンカー位置がそれらのナビと重なってしまいます。今回はその対処法を紹介したいと思います。 デモページ デモページは前提として、ヘッダーがフローティングしていて、各ページのタグに固有のidが指定されているものとします。 source1:ページ内リンク(ページ内アンカーリンクを押した際の挙動) $(function () { var headH = $("header").outerHeight(); //ヘッダーの高さを取得 var animeSpeed = 500; //アニメーションスピード $("a[href^='#']").on({ "click": funct
最近はWEBページを制作する際に、動画を埋め込むことが増えていると感じています。 ですので、今回は動画を制御する際に使用するJSを自分なりにまとめてみようと思います。 なお、今回の記事ではvideoタグで読み込んだものを対象にしますので、youtubeの埋め込みには使用できません。 videoタグの基本の書き方 <video src="〇〇.mp4" autoplay muted loop webkit-playsinline playsinline></video> 自分がよく書く書き方はこの様になっています。埋め込んだ動画を自動再生させるには、mutedを設定し、音を消しておかないと再生されないので注意してください。元動画の音の有無に関わらず、この設定は必要になります。playsinlineはiOSでページ内埋め込みさせるために必要になります。 次に、JSで制御させる方法を何個か紹介い
お問い合わせページ等でフォームを導入する際、毎回のように使わせていただいているシンクグラフィカ様のメールフォームプロCGIですが、利用している方も多いかと思います。また、フォームの導入を考えているけど、システム関係の知識は無いから…。と敬遠してしまっている方も中にはいるでしょう。 今回は、初めてメールフォームプロを導入する方や、まだ使い慣れていない方向けに、基本的な設置方法とカスタマイズについて覚書も兼ねて解説しようと思います。 ダウンロード シンクグラフィカ様のダウンロードページのボタンから最新版のファイルをダウンロードします。(最新バージョン 4.2.5:2019109月3現在) 特に理由がない場合は最新バージョンをダウンロードしましょう。 サーバーの環境によっては不具合を起こす可能性もあります。導入は自己責任でお願いします。 導入する場合は、企業ごとのセキュリティポリシーに従って検討
デザインをする際に、他のデザインを参考にすることは常です。その際、「これ見覚えあるな」とか「あれと似てるな」というものを見かけることもあります。 パクリを疑われてメディアでバッシングを受けたり指摘される際に、「これはパクリじゃない、オマージュだ!」や「○○○をパロディとして~」と個々の言い分もあります。こういった場面でよく聞く「オマージュ」「パロディ」「パクリ」、それぞれ違いが曖昧なので調べてみました。 芸術や文学において、尊敬する作家や作品に影響を受けて、似たような作品を創作する事を指す用語である。しばしば「リスペクト」(尊敬、敬意)と同義に用いられる。(Wikipediaより) 単純に「似たシーンがある」ことを指してオマージュとは言えません。尊敬・賞賛の意味を込めて、元の作品をそのまま流用するのではなく、独自の表現をもって表現されます。例えば、よく言われるのが「スターウォーズ」です。監
ページをスクロールしていき任意の要素が見えたときに、その要素をアニメーションさせたいということがあると思います。wow.jsと同じようなことがしたいと言えばわかりやすいでしょうか。 wow.jsはとても簡単に様々な動きが付けられますが、Animation.cssと一緒に使用する都合上、実現が難しい動きもあったりします。今回は、そういった状況でも対応できる、動きを自由に付けられるようなJavaScriptを自作してみました。 $(window).scroll(function(){ var top = $("ターゲットとなる要素").offset().top; // ターゲットの位置取得 var position = top - $(window).height(); // 発火させたい位置 if($(window).scrollTop() > position){ // 要素が見えたときの
「ブロークングリッドデザイン(レイアウト)」は、規則性のある境界線で構成されたレイアウトを一部分くずしたレイアウトのことです。数年前からじわじわ出現し、今年もデザインの一手法としてメジャーな存在であり続けることは必至です。効果としては、不規則な部分を意図的に作り出し、ユーザーの視線を惹きつけ、面白い(興味をそそったり、遊びの感覚を与える)デザインを作り出します。 というとで、今回はブロークングリッドレイアウトを成功させるための6つのポイントをご紹介します。 1:まずはグリッドデザインを理解する グリッドデザインとは画面を縦横に分断する直線(ガイド)で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法です。利点としては、情報がまとまりユーザーに分かり易いレイアウトが容易になる。サイト内のデザインに一貫性をもたせられる。デザインする側もユーザーも簡単で理解しやす
WEBページの制作は、デザインとコーディングを分業している会社も多いと思います。デザイナーからコーディング担当者にバトンタッチしてから、余計な説明や打ち合わせを極力少なく、スムーズにコーディングを進めてもらうデータを制作するための心得をまとめました。初期設定をはじめ基本的なことがほとんどですので、WEBデザインを始めて間もない方にはぜひ見たいただきたいです。今回はAdobe Photoshop CCを使うことを想定して解説します。 ■デザインを始める前のPhotoshop初期設定 カラーモードを「RGB」に設定 寸法単位を「px(ピクセル)」に設定 1px未満のにじみを発生させないようオプション設定 1. カラーモードを「RGB」に設定 WebページはRGBモニターで表示することを想定しています。制作前に必ずカラーモードを「RGB」に設定しましょう。 ▼新規作成時に「カラーモード」 > R
WordPressで「特定のカテゴリーにベーシック認証をかけたい」とご要望をいただくことがあります。 例えば、メルマガ会員だけに見せたい記事があるときなどに使用します。 プラグインを使えばいい!と言う声もあるかと思いますが、プラグインは必要以上に導入しないほうが安全です。 プラグイン導入を最低限に 理由1:サイトが重くなる 使いすぎるとサイトが重くなり、ページの読み込みに時間がかかります。 読み込み時間が長いとせっかく良い記事を書いてもユーザーが離れる原因となります。 理由2:相互性がなくなる可能性 WordPressは頻繁にバージョンアップが行われます。 そのため、バージョンアップの際にプラグインが対応しなくなる可能性があるのです。 理由3:コンフリクトの可能性 たくさんプラグインを使用すると他のプラグインとコンフリクトを起こし正常に動作しなくなることがあります。 カテゴリーにベーシック
WEBフォントを使用すると、ブラウザに左右されず、デザイナーの意図したフォントがWEB上で表示されます。企業やブランドのイメージを伝えるために、ブラウザに左右されないフォントが使えると便利ですよね。最近では日本語でも無料のWEBフォントが普及しており、気軽にWEBフォントをサイトに取り入れることができます。この記事では、無料WEBフォントを中心に紹介していきます。 WEBフォントのメリット・デメリット まずはWEBフォントのメリット・デメリットをみていきましょう。 メリット ・ブラウザに左右されずに、フォントの指定ができる。 ・レスポンシブサイトの場合、画像を使用しなくてもいいため、対応しやすい。 ・更新作業が楽。 ・コピペができる。 ・SEO対策にもなる。(タイトルなどに、画像を使用しないため) デメリット ・読み込む時間がかかる。 ・タイムラグがでてしまう場合がある。(標準フォント表示
Yahoo! JAPAN - インターネット クリエイティブアワード2006 一般の部 テーマ部門 金賞受賞作品 Yahoo! JAPAN Internet Creative Award 2006 (general department - theme section) : GOLD テーマ:一人ひとりができる環境対策 身近に出来る環境対策とその影響を、ゲームを通して楽しみながら学べるように制作しました。自然環境は私たちの行動次第で良くもなれば悪くもなります。主人公「ココロン」が住む地球をデフォルメした架空世界で、それを体感してください。「エコ」と「エゴ」のバランスをいかにとるかが、このゲームの攻略のポイントになります。 Theme : Individual actions to protect environment We produced this game for the purpo
Copyright ©MARUKIN AD Co.,Ltd. All right reserved.
デザインで●まるをつくる WEBサイトのデザイン、グラフィックデザイン制作、ブランディングで更に高いビジネス効果を。 デザインでお客様企業とその先の顧客のコミュニケーションをもっと円滑に。 採用WEBサイト・コーポレートWEBサイト Web 製品ブランドWEBサイト・イメージ動画 Web / Movie eスポーツイベント ビジュアルデザイン Branding / Logo / Print / Web 新規事業ブランディング Branding / Logo / Print / Web / Movie ロゴマーク・WEBサイト・パンフレット Logo / Web / Print ブランド・EC WEBサイト/パッケージ/雑誌広告/カレンダー Web / Print 学校案内・WEBサイト Print / Web ポスター・コーポレートWEBサイト・会社案内 Branding / Web /
このページを最初にブックマークしてみませんか?
『WEBデザイン・グラフィック制作 ブランディング|マルキンアド株式会社(群馬県)』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く