サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]
Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]
例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]
Can I useというサイトをご存じでしょうか。 IEがそろそろお役目を果たしそうなのでCSSの対応をあまり気にすることもなくなったかな…と思っていたのですが、気づけば新しいCSSプロパティが増えている昨今。 そんな時「あれ、このCSSはこのブラウザで使えるのかな？」と思ったとき調べるのに便利なのがCan I useです。 ※2022年4月現在の情報です 目次1 使い方1.1 CSSプロパティの対応状況を確認したい1.2 ブラウザ利用量にあわせた対応状況を確認する1.3 対 […]
こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 目次1 PC表示の時2 スマートフォン表示の時3 ソースコード4 ポイント5 YoutubeChannelのご紹介 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html css ポ […]
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 目次1 Hover.css2 CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次3 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 154 CSSのみで実装するキャプションエフェクト 205 イケテルオリジナルマウスオーバーCSS3アニメーション […]
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The V […]
口で説明しづらいのですが、最近よく見かけるこれです。 ↓ マウスカーソルあわせてみてください。 マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がﾆｭｯと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。 ざっくり説明すると、ﾆｭｯとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。 HTML CSS 親要素のdivには overflow […]
スクロールバーを装飾したい・safariで見た際に常にスクロールバーを表示させたい…という時、手軽に実現させる方法として『::-webkit-scrollbar』があります。 装飾した表示はChromeとsafariのみになってしまいますが、数行のCSSを加えるだけで簡単に実現できます。 目次1 HTML2 CSS2.1 ::-webkit-scrollbar2.2 ::-webkit-scrollbar-track2.3 ::-webkit-scrollbar-thumb […]
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 目次1 Boxer（Lightbox）2 Remodal3 animatedModal4 Magnific Popup5 Swipebox Boxer（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Li […]
PremiereProのモザイクフィルターを使用すれば、ワンクリックで簡単にモザイクをかけることができます。 目次1 被写体を自動追尾する便利機能2 手順2.1 1.モザイクエフェクトをかける2.2 2.モザイクの範囲を調整する2.3 3.自動追尾する3 YoutubeChannelのご紹介 被写体を自動追尾する便利機能 PremiereProのモザイクフィルターは、被写体を自動追尾します。 歩く男性の顔にモザイクをかけ、自動追尾させた例です。簡単にできるのでやってみましょう […]
Premiere ProのUltraキーエフェクトを使用すると、動画の一部を透明にすることができます。 イメージ的には、テレビの天気予報でキャスターと定点カメラの映像を合成して表示するといったような状況で使用できます。最近では、実況動画などでも似た手法がよく見受けられますね。 目次1 Ultraキーの特徴2 Ultraキーの使い方3 YoutubeChannelのご紹介 Ultraキーの特徴 Ultraキーは、動画の背景を透明にすることができます。 実際には特定色を指定して透 […]
PhotoshopCCのver23.0から搭載された新機能「風景ミキサー」を紹介します。 AIを使用したフィルター機能で、写真の背景をクリックするだけで簡単に変更できます！ 目次1 どんな機能？2 使い方2.1 手順1：被写体を選択する2.2 手順2：フィルターを適用する2.3 完成3 YoutubeChannelのご紹介 どんな機能？ 左が元写真で、右がフィルター適用後です。 あくまで元の画像の構図や要素は崩さずに、雰囲気をガラリと変えてしまいます。 どんな雰囲気の背景にし […]
サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]
例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]
スクロールをしたとき、要素の区切りのところで止まってほしいなあなんてことはないでしょうか。 そんな時はCSSのscroll-snap-typeを使うと、特に細かいこだわりさえなければjsに頼らなくてもあっさりと実現できます。 いまいち挙動がわからないかもしれないので、実際に見てみましょう。 目次1 縦スクロールをしてみる2 横スクロールをしてみる3 mandatoryとproximityの使い分け4 scroll-snap-alignを使い分ける 縦スクロールをしてみる Se […]
アプリで広告をつける場合メジャーどころなのはAdmobだと思いますが、Admobはアプリ開発者がタップするのを禁じています。 もちろん誤タップもあるので１回タップした時点でNGと言うわけではないですが、何度もやっていると広告が配信されなくなったりアカウントがBANされる可能性もあります。 ですのでAdmobもアプリ開発を行う上で、テスト広告というものを用意し、それを利用することで、上記のペナルティを回避することができます。 目次1 テスト広告IDを使用する2 テストデバイスを […]
目次1 はじめに2 なぜトラッキング許可が必要？3 Swiftで実装する3.1 Google Mobile Ads SDKのバージョンを7.64.0以降にアップデートする3.2 App Tracking Transparency で許可をリクエストする3.3 実際に許可を表示する4 アプリの多言語化について4.1 多言語化の設定について4.2 InfoPlist.strings を作成する4.3 ちなみに5 最後に はじめに もう1年ほど前の話になりますが、iOSアプリでAd […]
目次1 今回のゴール2 Laravelのインストール2.1 インストール前に2.2 インストールを行う2.3 フォルダのパーミッションを確認する2.4 webサーバーにアップし、確認する3 データベースの設定を行う。3.1 マイグレーションファイルの作成3.2 マイグレーションファイルの編集3.3 フィールドを追加する場合4 最後に 今回のゴール 今回はComposerからLaravelをインストールし、webサーバーで表示され、データベースの構築が行えるまで。 （REST […]
wpで投稿や固定ページに画像を入れる際、いざ本番環境に移行をするとなるとパスを変更したい…ということがあると思います。 プラグインで変更する方法もあるのですが、functionに記述をして変更する方法もあります。 場合によってはこちらの方がテスト環境と本番環境どちらにもうまく対応できたりします。 実際に入れてみよう 以下のコードをfunctions.phpに入れてみましょう。 ※functions.phpはバックアップを取りながら作業をしてください。 function pas […]
サイトにWordPressを導入したいというご要望は年々増えています。 受託で制作するサイトでは、WEBに慣れない人でも更新作業を行えるように、WordPressの管理画面をより使いやすくする必要があります。 今回は、クライアントに納品する前にやっておきたい管理画面のカスタマイズをご紹介します。 目次1 ログインURLを変更する2 管理画面の不要なメニューを非表示にする3 投稿のカテゴリー選択肢をradioボタンに変更する4 管理画面の[タグ]を非表示にする5 投稿の一覧画面 […]
Wordpressでfunctions.phpにtitle-tagを記述すると自動的に出力される<title>～</title>タグの内容。 add_theme_support( ‘title-tag’ ); こちらの区切り線や表示する内容を変えたい…ということがあると思います。 今回はそのカスタマイズ方法をご紹介します。 ※functions.phpはバックアップを取りながら作業をしてください。 目次1 セパレーターを変更したい2 タイトルの内容を変 […]
目次1 AMPとは？1.1 高速化のための厳しい制約2 劇的に改善！Google PageSpeed Insightでの評価Before／After2.1 AMP対応前2.2 AMP対応後 AMPとは？ 近年、Googleが推奨しているAMPをご存じでしょうか。 AMP対応しているページを事前にGoogleがキャッシュしておくことによって、閲覧者がページリクエストした際に、Googleが持っているキャッシュを表示するため、素早く表示できるという仕組みです。 通常、ページの表示 […]
2020年4月現在、リモートワーク/テレワークでお仕事されている方も多いのではないでしょうか。 そんな時役立ちそうなツールをまとめてみました。参考になったらうれしいです。 ※料金は人数の規模によって異なりますので、公式サイトをご確認ください。 ※会社によってはセキュリティの関係上ツールの使用が難しい場合もあるので、ご確認いただいた上で導入してください。 目次1 コミュニケーションツール系1.1 ChatWork1.2 Slack1.3 Skype1.4 ZOOM1.5 Mic […]
皆様はプロジェクト開発の情報共有に、どんなツールを使用中でしょうか。 今お使いのツールが使いにくいと感じたことはありませんか？ バグ管理ツール（BTS）は、プロジェクトの理想的な進行管理に際し、必須と言っても過言ではないと思います。 本記事では、理想的なプロジェクト進行管理のため、 簡単に各サービスのポイントをおさえながら、おすすめを紹介していきます。 目次1 そもそもバグ管理ツールとは？2 ツール紹介2.1 Wrike2.2 producteev2.3 Jira Softw […]
Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]
スマホアプリを作る上でWebViewを抜きには作ることができません。 ゲームやツール系の場合はアプリで実装する必要がありますが、ウェブサービスとの連動を行う場合は、WebViewで作った方が便利だったりします。（androidやiosでの出し分けも不要だったりするので） ただ、アプリ→WebViewやWebView→アプリといったデータの受け渡しが必要になると思います。 例）WebViewのボタンを押すとアプリ内課金の画面が表示される、一覧はwebViewで詳細はアプリ側で表 […]
アプリで広告をつける場合メジャーどころなのはAdmobだと思いますが、Admobはアプリ開発者がタップするのを禁じています。 もちろん誤タップもあるので１回タップした時点でNGと言うわけではないですが、何度もやっていると広告が配信されなくなったりアカウントがBANされる可能性もあります。 ですのでAdmobもアプリ開発を行う上で、テスト広告というものを用意し、それを利用することで、上記のペナルティを回避することができます。 目次1 テスト広告IDを使用する2 テストデバイスを […]
Can I useというサイトをご存じでしょうか。 IEがそろそろお役目を果たしそうなのでCSSの対応をあまり気にすることもなくなったかな…と思っていたのですが、気づけば新しいCSSプロパティが増えている昨今。 そんな時「あれ、このCSSはこのブラウザで使えるのかな？」と思ったとき調べるのに便利なのがCan I useです。 ※2022年4月現在の情報です 目次1 使い方1.1 CSSプロパティの対応状況を確認したい1.2 ブラウザ利用量にあわせた対応状況を確認する1.3 対 […]
今更ですがCodepenを登録して使い始めました。 英語でよくわからない、という方のために登録して初歩的な使い方をするまでをご紹介します。 目次1 Codepenって？2 登録して使ってみよう2.1 HTML2.2 CSS2.3 JS2.4 埋め込みをする Codepenって？ よく見かけると思うこれです。 See the Pen Codepenって？ by kkdd (@kk8kk) on CodePen. 簡単に説明するとCodepenとは、オンライン上でHTML・CSS […]
Google reCAPTCHA（リキャプチャ）とはGoogleが提供している認証システムで、現在はv2とv3が用意されています。 なんとなく「v3ってv2の進化版でしょ？」という感じがするのですが、調べてみるとどうもそうとも言い切れないので、まとめてみました。 ちなみに無料で利用できますが大規模サイトやアクセス数の多いサイトはエンタープライズ版を利用する必要があるみたいです。 目次1 reCAPTCHAの登録について2 結局reCAPTCHA v3とreCAPTCHA v2 […]
運営会社:株式会社8bit
制作サービス
運営サービス
