はてなブックマーク

オジー WordPress歴8年 副業でデザイン/開発を受託→法人化 WordPressで会社HPをオリジナルテーマで作成 主軸はデザイン、たまにフロントエンドのコードも書きます 事業会社/受託会社 両方経験あり WEB、アプリに関わらずデジタルを対象にしたデザインを行う際に気をつけたいのが様々な状態を考慮するという点です。デザインを納品した後にディレクターやエンジニアから「この時のデザインってどうなるんですか」という抜け漏れをなくすためにも、「UIスタック」を常に意識してデザインすることを心がけましょう。 UIスタックとは UIの5つの状態のこと。 ブランクステート（Blank State）ロードステート（Loading State）パーシャルステート（Partial State）エラーステート（Error State）理想ステート（Ideal State） ブランクステート（Blank

オジー WordPress歴8年 副業でデザイン/開発を受託→法人化 WordPressで会社HPをオリジナルテーマで作成 主軸はデザイン、たまにフロントエンドのコードも書きます 事業会社/受託会社 両方経験あり jQueryプラグインで様々な画像スライダー（作成者には本当に感謝です。。。）があると思いますが、その中でも僕が使っていて使いやすく簡単に導入できたSlickを紹介したいと思います。 基本的には、HTML、CSS、jQueryの基本的なスキルがあれば使用できるものですがなくてもなんとかなってしまいます。プラグインのいいところでもあり、悪いところでもありますね。 今回紹介するSlickはjQueryを書きますがシンプルでわかりやすく、かつカスタマイズもいろいろとしやすい優れもののプラグインです。 https://kenwheeler.github.io/slick/ インストール

オジー WordPress歴8年 副業でデザイン/開発を受託→法人化 WordPressで会社HPをオリジナルテーマで作成 主軸はデザイン、たまにフロントエンドのコードも書きます 事業会社/受託会社 両方経験あり CSSで要素非表示にする際の主な方法としてdisplay:none;とvisibility:hidden;があると思いますが、先日コーディングしていてふとこの二つの違いを知らないなーと思ったので調べてまとめました。 あまりvisibility:hiddenの方はdisplay:noneに比べて利用する機会が少なかったため、今まで違いを知らずにいたのですが、この二つの違いを理解して使うことで様々な要素の表示・非表示に対応できると思います。 display:none; CSSプロパティのdisplayで指定できる値の一つ。他に指定できる値は「inline」とか「block」とかなどが

オジー WordPress歴8年 副業でデザイン/開発を受託→法人化 WordPressで会社HPをオリジナルテーマで作成 主軸はデザイン、たまにフロントエンドのコードも書きます 事業会社/受託会社 両方経験あり 今回はCSSのみで画像スライダーを実装していきたいと思います。画像スライダーというとjQueryのプラグインやJavascriptを書いて実装するケースが多いと思いますが、実はCSSだけでも実装できます。 では、CSSのみで画像スライダーを実装していきたいと思います。 デモ https://codepen.io/keisuke1989/embed/ZEWaYqo?height=265&theme-id=dark&default-tab=css,result HTML <div id="css-slider"> <div class="slider-wrapper"> <div c

オジー WordPress歴8年 副業でデザイン/開発を受託→法人化 WordPressで会社HPをオリジナルテーマで作成 主軸はデザイン、たまにフロントエンドのコードも書きます 事業会社/受託会社 両方経験あり よくフォームでの値が変わったら〇〇という監視をするときにchangeを使うことがあると思いますが、divなどの中身が変更されたときに使用するのはご存知ですか？　changeが使えればいいのですが、changeではdivの変更を受け取ることができません。そんなときはDOMSubtreeModified propertychangeを使用することで監視することができます。 今回はその使用方法を紹介したいと思います。 コード $(document).ready(function() { $('.div_change_lst').on('DOMSubtreeModified proper

オジー WordPress歴8年 副業でデザイン/開発を受託→法人化 WordPressで会社HPをオリジナルテーマで作成 主軸はデザイン、たまにフロントエンドのコードも書きます 事業会社/受託会社 両方経験あり 題名の通りカスタム投稿タイプを絞って検索したりしたいなーってときのための方法を今回はご紹介します。作業量的にはそんなに多くないですし、コードの内容も複雑ではないのである程度コードをかじったことがる初心者の方なら普通に実装できると思います。 カスタム投稿タイプ「test」というものだけを検索したい設定で説明していきます。 検索フォームの設置 <form method="get" id="testSearch" action="<?php echo home_url('/'); ?>"> <input type="text" name="s" id="testSearchInput"