初心者だと何を選んだらいいのかわからなくなったり、そこそこ経験のある人でも同じようなものを選んでしまったりで悩んでしまう『配色』。 今回はそんな配色のヒントを得られるサイトをご紹介します。 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. ちょっとずつ要素を縦スクロールするとわかりやすいと思うのですが、 […]
wpで投稿や固定ページに画像を入れる際、いざ本番環境に移行をするとなるとパスを変更したい…ということがあると思います。 プラグインで変更する方法もあるのですが、functionに記述をして変更する方法もあります。 場合によってはこちらの方がテスト環境と本番環境どちらにもうまく対応できたりします。 実際に入れてみよう 以下のコードをfunctions.phpに入れてみましょう。 ※functions.phpはバックアップを取りながら作業をしてください。 まずは『〇〇〇』となって […]
Wordpressでfunctions.phpにtitle-tagを記述すると自動的に出力される<title>～</title>タグの内容。 こちらの区切り線や表示する内容を変えたい…ということがあると思います。 今回はそのカスタマイズ方法をご紹介します。 ※functions.phpはバックアップを取りながら作業をしてください。 セパレーターを変更したい まずはセパレーターの変更方法です。 タイトルのセパレーターとして横線で「-」が入っていると思うの […]
CSSのアニメーションを作成してまとめてみました。 今回は単純なテキストに対してのアニメーションになります。 ちなみにaタグのカラーやtext-decorationについてはあらかじめ調整しておいてください。 アニメーションの一覧は下のDEMOに置いておきます。 下線系 左から下線が現れてカーソルを外すと左側に消える サンプルテキスト HTML CSS ::afterで作成した下線をhoverしたときにwidth: 100%;にする、という割と単純なアニメーションです。 左か […]
Wordpressでカスタム投稿を作成したとき、使い方によってはsingleがいらない…なんて時もあります。 また、ややこしいので投稿ページでパーマリンクも表示させたくなかったりします。 そんな時はfunctionにちょっと記述をするだけで簡単に実現できます。 singleページを消す（404ページにする） まずはsingleページを消す方法です。 以下の1行をfunctionに追加するだけで簡単に実現できます。 ※バックアップを取りながら作業しましょう 『〇〇〇』の部分にカ […]
特殊な形で画像を切り抜きたい時単純に1枚画像を用意することもできますが、例えば切り抜きたい画像が動的に変わる場合などはCSSで画像を自由な形で切りぬくことができるようにしておくと便利です。 今回はCSSで画像をマスクする方法をご紹介します。 mask-image プロパティ mask-imageプロパティを使うと、指定した画像の形で切り抜くことができます。 基本的にマスクレイヤーとして使用する画像はSVGなどのパスデータで用意するとサイズの変更もきれいにできます。 HTML […]
アプリの容量を少しでも減らすために、画像の軽量化をしたいということがあるかと思います。 ただ、すでに追加した画像をいじるのは少々手間です。 そんな時はAndroid Studio上で、画像をWebPに変換することができます。 WebPはGoogle公式が開発している静止画のフォーマットのことで、圧縮率が高く容量が軽く済みます。 早速Android Studioで試してみましょう。 Android Studio上で画像をWebPに変換しよう 今回は登録しているjpg画像を変換し […]
Wordpressの投稿一覧画面で例えばアイキャッチ画像や設定したカスタムフィールドの値などの表示をしたい、ということがあると思います。 functionへの記述でも実現はできますが、お手軽にわかりやすく対応できるのが『Admin Columns』というプラグインです。 インストールしよう ひとまずインストールしましょう。 管理画面から行う場合は『プラグイン＞新規追加』から『Admin Column』で検索してインストールします。 インストールしたら有効化します。 あとはプラ […]
カスタム投稿内、かつカスタムタクソノミーをセレクトボックスで検索したいときに地味に悩んだので書き残しておきます。 見た目のイメージとしては下の画像のような感じです。and検索です。 searchform.phpにフォームを作る とりあえずsearchform.phpのような別ファイルを作成してフォームの記述をしていきます。 この作成したテンプレートを呼び出すには または などの記述を該当テンプレートで行いましょう。 searchform.phpに記述していく 作成したsear […]
Android Studioでは4.1以降Material Componentsを使用しているため、デザイン面で強制的にデフォルトのマテリアルデザインが反映されます。 便利な時もあるのですが、反面自分で装飾をしたい…というときに迷うこともあるので解決方法を残しておきます。 ボタンを置いた時の表示 とりあえずこんな感じで、強制的に紫の背景色のボタンが反映されます。 背景色を変えたいので属性の『背景（android:background）』で背景色を指定してみます。 すると… な […]
WEBサイトを見ていると例えばスクロールをしたときにヘッダーが追従してくる、といった動作はよく見かけると思います。 だいたいposition:fixed;等のcssとjs等の組み合わせをしていることが多いと思いますが、cssでposition: sticky;を使うとすぐに実現できます。 ヘッダーを追従させてみる 実際の画面をとりあえず見ていただくと早いかと思います。 DEMOを見ていただくとわかりやすいですが、スクロールをするとヘッダーがついてくるようになっています。 コー […]
Android StudioではデフォルトでGoogle Fotntsをダウンロードする機能があるので、比較的フォントの選択肢が幅広いです。 ただ日本語フォントは用意されていないものも多く、自分で用意してインストールをする必要があります。 今回はAndroid Studioでのフォントのインストールと使用できるようになるまでをご紹介します。 とりあえずフォントを反映させるテキストを置いてみました。 では進めていきます。 フォントを用意する Google Fotntsからフォン […]
アプリを作るからには必要不可欠なアプリアイコン。 色々なサイズを1から用意しなければならない…？など不安に思うかもしれませんがAndroid Studioの機能を使えばあっさり登録できます。 アプリアイコンの設定をしよう プロジェクトの中で『res』を右クリックします。 するとメニューが表示されるので『新規』を選択。 設定に問題なければ『次へ』をクリックします。 あとはいい感じにAndroid Studioがアイコン画像を出力してくれるので『完了』を押しましょう。 これでビル […]
運営会社:株式会社8bit
制作サービス
運営サービス
