WEB制作– category –

WEB、アプリに関わらずデジタルを対象にしたデザインを行う際に気をつけたいのが様々な状態を考慮するという点です。デザインを納品した後にディレクターやエンジニアから「この時のデザインってどうなるんですか」という抜け漏れをなくすためにも、「UIス...

CSSを使用していてなにか隣り合った要素を指定したいなって思ったことないですか？例えばtitleというクラスの次に.descriptionと続いた場合のみ、descriptionに特定のプロパティを指定したいなど。 そういうときに活躍するのが隣接セレクタです。 【対応ブ...

jQueryプラグインで様々な画像スライダー（作成者には本当に感謝です。。。）があると思いますが、その中でも僕が使っていて使いやすく簡単に導入できたSlickを紹介したいと思います。 基本的には、HTML、CSS、jQueryの基本的なスキルがあれば使用できるも...

どうも、ブラウザで小さく表示したいと思ったときに10px以下でフォントサイズを指定してもブラウザの最小フォントサイズ（10px）で表示されてしまいますよね？そんなときに無理矢理CSSで小さくする方法をご紹介します。 文字の可読性の点で言うと10px以下...

おさらいですが投稿に設定してあるアイキャッチ画像を取得してタイトルとかと一緒に表示する方法を今回ご紹介したいと思います。Wordpressといえば独自のタグがありますがそれを使用することによってわずか数行でデータベースから画像のパスを取ってくるな...

「ビジュアルヒエラルキー」とは視覚的階層ルールのことです。WEBサービス、アプリ、資料でも視覚に訴えるものを作成するときには役立つ知識ですのでデザイナー以外の方でも参考にしていただえればと。 【なぜビジュアルヒエラルキーが必要なのか？】 視覚...

私がデザインを初めたてのころにレビューで指摘されていた点、今自分がレビューするときに意識して見ている点についてまとめました。 だいたいが下記項目に分類されるかと思います。 グルーピング強弱色のバランスあしらいのトンマナ視線誘導フォントの利...

通常ユーザーはページ上のすべての言葉を読みません。その代わりにあるパターンに沿ってスキャンをします。UIを作る上でこのスキャンの法則を知って構築するのとしないのではユーザーの情報に到達しやすさが異なってきます。 そこで今回は、ユーザーの視線...

CSSの基礎でもあるフォントサイズを指定するときみなさんは何を使用していますか？em,rem,%,pxのうちのどれかだと思いますがそれぞれのメリットやデメリットは理解して使っているのでしょうか？ 僕自身よくわからないままemを使ったりしていたので、振り返...

今回はCSSのみで画像スライダーを実装していきたいと思います。画像スライダーというとjQueryのプラグインやJavascriptを書いて実装するケースが多いと思いますが、実はCSSだけでも実装できます。 では、CSSのみで画像スライダーを実装していきたいと思い...

題名の通りカスタム投稿タイプを絞って検索したりしたいなーってときのための方法を今回はご紹介します。作業量的にはそんなに多くないですし、コードの内容も複雑ではないのである程度コードをかじったことがる初心者の方なら普通に実装できると思います...

jQueryを使用していると.click()で手軽にクリックイベントを設定することができますが、.append()などで後から追加したDOM要素に.click()を指定しても反応しないので、その対処法を今回ご紹介します。 【コード】 変更前 $('.js-clickBtn').click(function...

よくフォームでの値が変わったら〇〇という監視をするときにchangeを使うことがあると思いますが、divなどの中身が変更されたときに使用するのはご存知ですか？　changeが使えればいいのですが、changeではdivの変更を受け取ることができません。そんなと...

あまり知られていないですがimgタグにはsrcやalt以外にもdecodingという属性を設定することができます。こちらの属性はimgをどのように読み込むかを指定するもので、設定自体も簡単なので、ぜひ設定しておくことをおすすめいたします。 また、画像のデコー...

CSSで要素非表示にする際の主な方法としてdisplay:none;とvisibility:hidden;があると思いますが、先日コーディングしていてふとこの二つの違いを知らないなーと思ったので調べてまとめました。 あまりvisibility:hiddenの方はdisplay:noneに比べて利用す...