cssをよく使う人なら既におなじみ、transitionプロパティによるアニメーション。 例えばhoverをしたとき、スムーズに画像を拡大等してくれます。 コードの例 使用比較 See the Pen デフォルトアニメーション by kkdd (@kk8kk) on CodePen. これでもアニメーションが滑らかになって十分ではあるのですが、アニメーションをがっつり使うならcubic-bezierというイージング（動きの加減速）をさらに細かく自分で指定できる関数を使用した方 […]
Webサイトを見ると最初に色が敷かれてから画像などが表示、そのあと敷かれた色は非表示に…というアニメーションをよく見かけると思います。 言葉にするとややこしいですが図にすると下のような感じです。 これは、CSSのアニメーショと少しのjsで対応できます。 早速作り方の詳細を見ていきましょう。 実際にアニメーションを作ってみよう とりあえず実際に作成したデモと、これから使用するコードをまとめておきます。 js CSS HTML 上記のものを使用して解説していきます。 jquery […]
初めて入れるアプリは起動時に「どういうアプリなんだろう…？」と恐る恐る使うことがたまにあります。 そんな気持ちを少しでも和らげてくれるのが『ウォークスルー画面』です。 アプリ初回起動時などに特徴や使い方などを解説してくれる画面て見覚えがありませんか？ それを『ウォークスルー画面』と呼びます。 今回はそんないろんなアプリの『ウォークスルー画面』を集めてみましたので、デザインなどの参考にどうぞ。 GO LINE 公式アカウント SODA しまむら タイミー Ponta みてね も […]
WordPressで一覧表示をする時、例えば現在から1週間以内、1か月以内、1年以内…など一定期間内のものだけ表示させたいということがあるかと思います。 そんな時はWP_Queryの引数内の『date_query』を使用してうまく表示できるようにします。 投稿の一覧表示に『date_query』を使う まずは通常の投稿のループを記述して、その中に『date_query』を追加していきます。 今回は現在から、という指定なのでbeforeについてはnowを指定しています。 aft […]
WordPressには 購読者 寄稿者 投稿者 エディター 管理者 といった5つの権限がデフォルトで存在します。 これは記事を登録できる人、記事は登録できず閲覧だけできる人…などの設定がされています。 ただ、運用での条件に合った権限がないという場合もあります。 そんな時は『User Role Editor』という自分の好きなように権限を割り振ることのできるプラグインを使います。 まずはプラグインをインストール まずはプラグインのインストール画面から『User Role Edi […]
カスタムフィールドのプラグインとして便利な『Smart Custom Fields』。 無料ながら繰り返しフィールドも使えたり重宝しているのですが、『メディア』を使用するときに「メディアを絞り込む」の部分が「すべてのメディア」になっているにも関わらず画像だけが表示される現象が起きます。 絞り込みを切り替えたら表示されるのですが、PDFなどをメインで登録したいときなどは若干不便です。 今回は「すべてのメディア」で画像以外のメディアがきちんと表示される方法をご紹介します。 とはい […]
borderにグラデーション、いざやってみようと思うとあれ？borderプロパティに対してグラデーションをかけたらいいのかな？と少し戸惑います。 ちょっとしたコツさえつかめばすぐに再現できますので、ためしてみましょう！ 実際にやってみよう というわけで実際にやってみましょう。 See the Pen グラデーションborder by kkdd (@kk8kk) on CodePen. はい、できました。 cssだけで見てみましょう。 まずは通常のborderを指定します。ベー […]
WordPressではカテゴリーがデフォルトだとチェックボックスになっています。 運用の都合で複数にチェックをつけさせたくないな…という場合があるので、そんな時はチェックボックスをラジオボタンにしましょう。 functions.phpに記述をしていこう ※必ずfunctions.phpのバックアップを取りつつ作業をしてください。 通常の『投稿』の場合 通常投稿のカテゴリーの場合は、以下のようにfunctionsに記述を行います。 まずはチェックボックス部分、『#categor […]
様々なデバイス対応をしなければいけない昨今、フォントサイズの指定は悩みどころだったりしますね。 そこで『clamp()』関数を使用すれば1行でフォントサイズの最小値、基準値、最大値を指定することができ、使いようによってはメディアクエリで細かく指定する手間が省けます。 clamp()を実際に使ってみよう では実際の挙動を見てみましょう。 例えば2vwを基準値としたいとき、PCぐらいの表示だと大きすぎるので最大値を20pxに、スマホぐらいの表示だと小さくなりすぎないように最小値を […]
YouTubeなどに投稿する動画で必要になる素材。 今回は基本的にフリーで手に入れられる素材を提供してくださっているサイトをご紹介します。 ※サイトや素材自体によって規約は変わるので、きちんと確認してからのご使用をお願いします！ YouTuberのための素材屋さん 名前の通りYouTuberのためのような動画素材を配布してくれているサイトです。 mp4を配布してくれているので、Adobe Premiere Proなどのクロマキー機能で背景を透過して使用しましょう。 動画AC […]
忘れた頃にごく稀に使うことになるクリッカブルマップ。 レスポンシブでは設定したエリアがずれてしまうので『image-map-resizer』というjsに頼ります。 jQuery非依存で結構簡単に導入できます。 画像とHTMLを用意 とりあえずクリッカブルマップに使用する画像を用意します。 HTMLについては『HTML Imagemap Generator』さんを使用します。 画像をドラッグ&ドロップしましょう。 あとは右側のツールを使って図形をなぞるだけです。大変便 […]
iOSで100vhを使った場合、大きいviewportを基準にするため、小さいviewportの時はアドレスバーの分はみ出てしまったりステータスバーで予想外に隠れてしまったり…ということがあったりしますよね。 そんな時は新しい単位『svh』『lvh』『dvh』を使いましょう。 ちなみにこちらはiOS15.4以上から対応している単位なのでandroid対応も含めご注意ください。 『svh』について 『svh』では小さいviewportの方に合わせてくれます。 たぶんsmall […]
初心者だと何を選んだらいいのかわからなくなったり、そこそこ経験のある人でも同じようなものを選んでしまったりで悩んでしまう『配色』。 今回はそんな配色のヒントを得られるサイトをご紹介します。 Color Drop 4つの色の組み合わせがずらっと用意されているサイトです。 気になる色をクリックすると右側にカラーコードが発行されるので、あとはコピーするだけ。 用意されている色に限りはありますが、シンプルなものを求めている方におすすめです。 実は地味に画像から色を抽出したりカラーコー […]
前回はGrid CSSの『grid-row』『grid-column』を使用してでレイアウトを組んでみました！ 今回はそこから応用的なことをしていきましょう。 グリッド領域に名前をつけて、表示場所の指定に使用する 今回はグリッド領域それぞれに名前をつけて表示場所の指定に使用する方法をご紹介します。 （ちなみに『グリッド領域』の概念についてはこちらをご参照ください） いまいち最初はピンとこないと思いますので実際の画面などを使いながら説明していきます。 See the Pen G […]
Androidアプリを多言語対応したい！という時「あれ？そういえば画像はどう対応したらいいんだろう…」と悩む方もいらっしゃると思います。私がそうでした。 今回はそんな方向けの記事です。 ちなみにもともとアプリは形になっていて、テキストベースの言語の切り替えができている前提のお話です。 drawbleのフォルダを言語ごとに用意して入れていく 最初は戸惑うのですが、答えは結構単純で『drawableフォルダを各言語ごとに作成して該当する言語の画像を入れていく』が正解です。 例えば […]
前回初歩をご紹介したCSS Grid。 今回はもっといかにもグリッドレイアウト、という感じのことに挑戦したいと思います。 グリッド線の定義を知ろう まずはグリッド線の定義を知りましょう。基本的にはy軸、x軸的な考え方です。 y軸＝row x軸＝column として定義していきます。 上の画像を見ると要素の区切りになるようなところに数字が振ってあるかと思います。 『column』『row』それぞれ振っている数字を使うことで、うまくレイアウトをしていくことができます。 定義を利用 […]
これまではIE対応もそこそこ必要・flexboxでなんとなくこと足りていたのでふわっとした知識だった『CSS Grid』。IE対応も無事なくなったのでこれを機に知識を少しずつ入れて模索中です。 基本的な部分を紹介するので、勉強中の方は一緒に頑張りましょう。 ボックスをグリッドで並べてみる とりあえず基礎的な感じで、ボックスをこんな感じでグリッドで並べてみます。 See the Pen CSS Grid by kkdd (@kk8kk) on CodePen. 基本のcssを使 […]
Androidアプリでラジオボタンを通常のボタンのようにして、かつ『選択時』『非選択時』のボタンを変えたい…ということがあるかと思います。 そんな時はdrawableに要素を用意して、背景色や文字色に指定するだけで簡単に変更することができます。 ラジオボタンを設置 それではプロジェクトを開きましょう。 とりあえずはラジオボタンを2つ設置しました。 今回はボタンぽくしたいのでラジオボタンのデフォルト要素をクリアします。 buttonに対して『@null』を指定してください。 こ […]
『乗算』などを再現できるcssのブレンドモード（mix-blend-mode）。 大変便利なのですが、背景色だけ乗算をして文字はそのまま…ということが工夫をしないと地味に難しかったりします。 上の画像のように表現をしたかったのに、何も考えずに背景色と一緒にブレンドモード（今回は乗算）を設定すると以下のような感じになってしまいます。 See the Pen ブレンドモード（テキストが埋もれる） by kkdd (@kk8kk) on CodePen. 要はテキストも一緒に乗算に […]
サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcssの方を解説していきましょう。 HTML HTMLの方では上部に背景画像を置くエリア『.ma […]
Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 Android Studioを開こう まずはAndroid Studioを開いて、ファイルの一覧を確認します。 ベクター […]
例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]
Can I useというサイトをご存じでしょうか。 IEがそろそろお役目を果たしそうなのでCSSの対応をあまり気にすることもなくなったかな…と思っていたのですが、気づけば新しいCSSプロパティが増えている昨今。 そんな時「あれ、このCSSはこのブラウザで使えるのかな？」と思ったとき調べるのに便利なのがCan I useです。 ※2022年4月現在の情報です 使い方 CSSプロパティの対応状況を確認したい CSSプロパティの対応を確認するには、まずTOP画面上部の『Can I […]
今更ですがCodepenを登録して使い始めました。 英語でよくわからない、という方のために登録して初歩的な使い方をするまでをご紹介します。 Codepenって？ よく見かけると思うこれです。 See the Pen Codepenって？ by kkdd (@kk8kk) on CodePen. 簡単に説明するとCodepenとは、オンライン上でHTML・CSS・JSを書いて、実際の動きを手軽に確認することができるサービスです。 また、実際に書いたコードは保存しておくことができ […]
スクロールをしたとき、要素の区切りのところで止まってほしいなあなんてことはないでしょうか。 そんな時はCSSのscroll-snap-typeを使うと、特に細かいこだわりさえなければjsに頼らなくてもあっさりと実現できます。 いまいち挙動がわからないかもしれないので、実際に見てみましょう。 縦スクロールをしてみる See the Pen Untitled by kkdd (@kk8kk) on CodePen. ちょっとずつ要素を縦スクロールするとわかりやすいと思うのですが、 […]
運営会社:株式会社8bit
制作サービス
運営サービス
