Webサイトを見ると最初に色が敷かれてから画像などが表示、そのあと敷かれた色は非表示に…というアニメーションをよく見かけると思います。 言葉にするとややこしいですが図にすると下のような感じです。 これは、CSSのアニメーショと少しのjsで対応できます。 早速作り方の詳細を見ていきましょう。 目次1 実際にアニメーションを作ってみよう1.1 jqueryなどを読み込ませておく1.2 HTMLを書く1.3 CSSとjsでアニメーションの設定をしていく1.3.1 色が敷かれて消えて […]
初めて入れるアプリは起動時に「どういうアプリなんだろう…？」と恐る恐る使うことがたまにあります。 そんな気持ちを少しでも和らげてくれるのが『ウォークスルー画面』です。 アプリ初回起動時などに特徴や使い方などを解説してくれる画面て見覚えがありませんか？ それを『ウォークスルー画面』と呼びます。 今回はそんないろんなアプリの『ウォークスルー画面』を集めてみましたので、デザインなどの参考にどうぞ。 目次1 GO2 LINE 公式アカウント3 SODA4 しまむら5 タイミー6 Po […]
WordPressで一覧表示をする時、例えば現在から1週間以内、1か月以内、1年以内…など一定期間内のものだけ表示させたいということがあるかと思います。 そんな時はWP_Queryの引数内の『date_query』を使用してうまく表示できるようにします。 投稿の一覧表示に『date_query』を使う まずは通常の投稿のループを記述して、その中に『date_query』を追加していきます。 今回は現在から、という指定なのでbeforeについてはnowを指定しています。 aft […]
WordPressには 購読者 寄稿者 投稿者 エディター 管理者 といった5つの権限がデフォルトで存在します。 これは記事を登録できる人、記事は登録できず閲覧だけできる人…などの設定がされています。 ただ、運用での条件に合った権限がないという場合もあります。 そんな時は『User Role Editor』という自分の好きなように権限を割り振ることのできるプラグインを使います。 目次1 まずはプラグインをインストール2 一般設定画面3 権限設定画面3.1 権限グループを作ろう […]
カスタムフィールドのプラグインとして便利な『Smart Custom Fields』。 無料ながら繰り返しフィールドも使えたり重宝しているのですが、『メディア』を使用するときに「メディアを絞り込む」の部分が「すべてのメディア」になっているにも関わらず画像だけが表示される現象が起きます。 絞り込みを切り替えたら表示されるのですが、PDFなどをメインで登録したいときなどは若干不便です。 今回は「すべてのメディア」で画像以外のメディアがきちんと表示される方法をご紹介します。 とはい […]
borderにグラデーション、いざやってみようと思うとあれ？borderプロパティに対してグラデーションをかけたらいいのかな？と少し戸惑います。 ちょっとしたコツさえつかめばすぐに再現できますので、ためしてみましょう！ 実際にやってみよう というわけで実際にやってみましょう。 See the Pen グラデーションborder by kkdd (@kk8kk) on CodePen. はい、できました。 cssだけで見てみましょう。 まずは通常のborderを指定します。ベー […]
WordPressではカテゴリーがデフォルトだとチェックボックスになっています。 運用の都合で複数にチェックをつけさせたくないな…という場合があるので、そんな時はチェックボックスをラジオボタンにしましょう。 目次1 functions.phpに記述をしていこう1.1 通常の『投稿』の場合1.2 カスタムタクソノミーの場合 functions.phpに記述をしていこう ※必ずfunctions.phpのバックアップを取りつつ作業をしてください。 通常の『投稿』の場合 通常投稿の […]
Google AnalyticsがGA4にアップデートされてから、デフォルトの状態では性別や年齢などのユーザー属性は取得できないようになりました。今回はその設定や手順を紹介します。 もしまだGA4に移行していなければ、ぜひこちらもご確認ください。 Googleアナリティクス現行verが2023年7月廃止！新verに移行する方法を解説 目次1 GA4はデフォルトではユーザー属性が取得できない2 Googleシグナルの設定方法2.1 1.GoogleAnalyticsのダッシュボ […]
様々なデバイス対応をしなければいけない昨今、フォントサイズの指定は悩みどころだったりしますね。 そこで『clamp()』関数を使用すれば1行でフォントサイズの最小値、基準値、最大値を指定することができ、使いようによってはメディアクエリで細かく指定する手間が省けます。 目次1 clamp()を実際に使ってみよう2 clamp()関数はフォントサイズ以外にも使える3 基準値に対して最大値か最小値だけ設定したい3.1 max関数3.2 min関数 clamp()を実際に使ってみよう […]
YouTubeなどに投稿する動画で必要になる素材。 今回は基本的にフリーで手に入れられる素材を提供してくださっているサイトをご紹介します。 ※サイトや素材自体によって規約は変わるので、きちんと確認してからのご使用をお願いします！ 目次1 YouTuberのための素材屋さん2 動画AC3 YouTubeオーディオライブラリ4 DOVA-SYNDROME5 効果音ラボ6 無料効果音7 魔王魂8 効果音辞典9 いらすとや10 イラストAC11 Loose Drawing12 ソコス […]
忘れた頃にごく稀に使うことになるクリッカブルマップ。 レスポンシブでは設定したエリアがずれてしまうので『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』を使用してでレイアウトを組んでみました！ 今回はそこから応用的なことをしていきましょう。 目次1 グリッド領域に名前をつけて、表示場所の指定に使用する1.1 表示場所を指定したグリッド領域のサイズ調整をする2 今回のポイント グリッド領域に名前をつけて、表示場所の指定に使用する 今回はグリッド領域それぞれに名前をつけて表示場所の指定に使用する方法をご紹介します。 （ちなみに『グリッド領域』の概念についてはこ […]
Androidアプリを多言語対応したい！という時「あれ？そういえば画像はどう対応したらいいんだろう…」と悩む方もいらっしゃると思います。私がそうでした。 今回はそんな方向けの記事です。 ちなみにもともとアプリは形になっていて、テキストベースの言語の切り替えができている前提のお話です。 目次1 drawbleのフォルダを言語ごとに用意して入れていく1.1 英語に対応したい1.2 中国語の中でさらに繁体語のみに対応したい2 Android Studioでの表示を確認しよう3 実際 […]
前回初歩をご紹介したCSS Grid。 今回はもっといかにもグリッドレイアウト、という感じのことに挑戦したいと思います。 目次1 グリッド線の定義を知ろう2 定義を利用して実際の動きを確認してみよう3 ショートハンドでの指定もできる4 今回のポイント グリッド線の定義を知ろう まずはグリッド線の定義を知りましょう。基本的にはy軸、x軸的な考え方です。 y軸＝row x軸＝column として定義していきます。 上の画像を見ると要素の区切りになるようなところに数字が振ってあるか […]
これまではIE対応もそこそこ必要・flexboxでなんとなくこと足りていたのでふわっとした知識だった『CSS Grid』。IE対応も無事なくなったのでこれを機に知識を少しずつ入れて模索中です。 基本的な部分を紹介するので、勉強中の方は一緒に頑張りましょう。 目次1 ボックスをグリッドで並べてみる1.1 基本のcssを使ってみる1.2 独自のサイズ指定の単位『fr』を使ってみる1.2.1 一部要素はpxで指定、それ以外を埋める1.2.2 2:1:1で指定する1.2.3 均等割り […]
目次1 PHPフレームワークって何？2 メリットとデメリット2.1 メリットから2.2 デメリット3 じゃあ今のシステムを置き換えた方がいいの？4 どんなフレームワークがあるの？4.1 Laravel4.2 CakePHP4.3 FuelPHP5 最後に PHPフレームワークって何？ フレームワークとはPHPで開発を行う上で必要な機能をあらかじめまとめた集合体のようなものです。 例えばバリデーションチェックやデータベースの操作、メール送信、ファイル処理など、一から作ると面倒く […]
前回のREST APIをiOSアプリでも使うお話です。 こちらも割と簡単ですが、Kotlin=Javaに比べると型に関してはシビアです。 目次1 インストール1.1 CocoaPodsでインストールする。2 使い方2.1 GETの場合2.2 POSTの場合 インストール CocoaPodsでインストールする。 ライブラリが対応していれば簡単ですね。 その後、 これでインストール完了です。 使い方 こちらもAndroidの時と同じような感じでできますが、今回はModelでデータ […]
前回のお話でREST APIを気軽に確認する内容を書きましたが、今回は実際にスマホアプリ内でREST APIのやりとりを行う方法をまとめます。 以前はOkHttpというライブラリを使うことが多く、現在もそれが主流になりますが、今回はkotlinで使えるRetrofitと呼ばれるライブラリを使っていきましょう 目次1 インストール2 使い方2.1 GETの場合2.2 POSTの場合2.3 PUT通信の場合3 まとめ インストール 通信するので当然アプリ側にインターネット接続の設 […]
みなさん、無音カメラ（Silent Camera）で撮影してますか？ いきなりグレーゾーンの発言ぽくなりましたが、App StoreもGoogle Playにも無音カメラは割とたくさんリリースされています。 そこで弊社でもその波（！？）に乗り、無音カメラのリリースを検討しました。 目次1 実際どうなった？2 リジェクト理由1 スパイウェアの扱いになった3 ちなみにGoogle Playでは？4 終わりに5 参考6 YoutubeChannelのご紹介 実際どうなった？ 結果か […]
昨今は無料で天気予報がWebで確認できますが、それはプログラムの世界でも同じ。 プログラムの場合はそういうデータをREST APIという形でJSON形式で受け取るのが一般的です。 REST APIとか RESTful APIとは、Webシステムを外部から利用するためのプログラムの呼び出し規約（API）の種類の一つで、「REST」（レスト）と呼ばれる設計原則に従って策定されたもの。 RESTそのものは適用範囲の広い抽象的なモデルだが、一般的にはRESTの考え方をWeb APIに […]
SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。 SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。 SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。 目次1 静止画のSVG2 基本のアニメーション2.1 […]
Androidアプリでラジオボタンを通常のボタンのようにして、かつ『選択時』『非選択時』のボタンを変えたい…ということがあるかと思います。 そんな時はdrawableに要素を用意して、背景色や文字色に指定するだけで簡単に変更することができます。 目次1 ラジオボタンを設置2 背景色を設定3 文字色を設定 ラジオボタンを設置 それではプロジェクトを開きましょう。 とりあえずはラジオボタンを2つ設置しました。 今回はボタンぽくしたいのでラジオボタンのデフォルト要素をクリアします。 […]
2022年6月16日、IEのサポートが切れました。フロントのエンジニアにとっての念願が叶った、記念すべき日です。IE6の頃から苦しめられてきた私ももちろんのこと浮かれています。 ただ、IEを除外することによって使用できるCSSが大幅に増え、勉強しなければならないこともまた増えました。少しずつ慣れていきましょう。 今日は使用できるようになったCSSで、頻度が高そうなものからいくつかご紹介したいと思います。 目次1 object-fit1.1 今まで1.2 これから2 filte […]
運営会社:株式会社8bit
制作サービス
運営サービス
