UX BA Online HOME BAオンライン UX Tips 広告宣伝 業務 2023.05.12 コピペで簡単実装OK! ホバーアニメーションボタン集 コピペでOK! ホバーアニメーション集 今回のBAオンラインはコピペで簡単に実装できるホバーアニメーション集です！ 個人的にコーディング作業の中で一番好きなのがこのホバー時のアニメーションだったりします。 一見シンプルなサイトでもぐっと華やかになるのが楽しいところです。 今回はこのホバー時の効果をつけたボタンをいろいろ作ってみました！ ぜひご利用ください♪ 作成時のルール ①サイズはwidth100px、高さ3em ②使用する色は白～黒のモノトーンのみ ③HTML5/CSS3のみ使用 ④HTMLタグはすべて共通（クラス名のみ変更） カラー反転 sample シンプルな反転 after要素の矢印 […] Tips 広告宣伝 業務 2022.10.07 Webサイト製作のヒント～長いテキストを省略して表示する 長いテキストを省略して表示したいことってありませんか？ webサイトやwebアプリなどの製作で役立ちそうな情報をまとめている連載、今回はスタイルシートで長いテキストを省略して表示する方法をご紹介します。 「サイズを超えた部分の文字を省略して、サイズに収まる部分だけを表示する」方法で、これがスタイルシートの設定で可能です。 あるサイズの範囲内にテキストを配置したいんだけど、収まらなくなってレイアウトが崩れてしまったり、思う様にいかない事結構あるあるです。配置関係がシビアな事の多いwebアプリの画面製作では割と出くわす場面です。スクリプトなどを使って出力する最大文字数を制限する方法もありますが、文 […] BAちゃんねる 広告宣伝 2022.04.25 よりぬきBAオンライン～デザインのお話を始めようと思う Link デザインのお話を始めようと思う。 https://youtu.be/dAgI90kAjDQ 詳細を見る 朝食のプロテイン飲んでたらお腹急降下！袋を見れば賞味期限が半年前！ギニャー！ 誰かのせいにしたいけど自分の顔しか思い浮かばない！ 取り乱しました。こんにちわ。（紳士的） さて、今回はデザインの話でございます。デザインの話と言いますと、大長編確定になりそうな 業の深い話題ですが、複数回にわたって書き散らかしていこうかと思います。 元記事はこちら Link デザインのお話を始めようと思う。 – ブレーン・アシスト株式会社 https://www.brainassist.co […] Tips 広告宣伝 業務 2022.04.18 Webサイト製作のヒント～スクロールバーを装飾する はじめに ～ちょっと余談～ 更新が停止して何年も経っているMicrosoft社製webブラウザ「Internet Explorer（以下IE）」のサポート終了まであとわずかです。webサイト製作やwebアプリ開発ではIEでも問題なく閲覧できるようにする為、使うのを控えてきた多くの技術や表現があります。それがサポート終了によって躊躇なく使えるようになるのは大きいですね～！待ってましたって感じです。 そこで今回はIEサポート終了記念、IE非対応なwebサイト製作に役立つ情報をご紹介します。 実践！スクロールバーを装飾 ここから本題です。今回はスタイルシートでスクロールバーを装飾する方法をご紹介しま […] 広告宣伝 2022.03.14 デザインのお話を始めようと思う。【第4回】Webデザインのトレンド変遷 Webデザインのトレンド変遷 拝啓、皆様いかがお過ごしでしょうか。 春の足音が聞こえてくる昨今、私の現在の関心事はウクライナ情勢と4月8日の花祭りに二分されております。ウクライナ情勢に関わるサイバー戦争や壮絶な情報戦とか、思うことも多いので今回の記事で書こうかと思いましたが、微妙に私の土俵じゃないのでやめときました。じゃ、花祭りについて。いや、それはチラシの裏にでも書いておこう。 さて本題ですが、今回は「Webデザインのトレンド変遷」についてです。私がWebデザインを始めてからはや22年。少しの昔話を含めて書いてみようかと思います。ビバ！デザイナー歴22周年企画！ あっ、なにこのキリの悪い数字 […] 広告宣伝 業務 2022.01.17 Webサイト製作のヒント～JavaScriptを使わないでON/OFF切替ボタンを作る webサイト製作に役立つ情報をご紹介します これまで製作してきたwebサイトやアプリで採用したり、 これは使えるかも？便利かも？というような使える情報をこちらでお伝えしてみようと思います。 BAOnlineをご覧頂いている皆様の中にも仕事や趣味でwebサイトを作っていたり、 これから作ってみようかな？とお考えの方もいらっしゃると思いますので、 製作作業のお役に立てたら幸いです。 実践！オンとオフを切り替えるボタンの作り方 今回はwebサイトやスマホなどの設定画面で見る機会も多くなったオンとオフを切り替えるボタンの作り方をご紹介します。こんなの感じのです。 ボタンを押すと、つまみの部分がアニメー […] 広告宣伝 業務 2021.09.27 UI/UXのおはなし～写真の説明は上なの？下なの？戸惑いを解消するスペース(余白)のおはなし webサイトを見ていてどう見たらいいのか戸惑ったり、 圧迫感感じてもやっとしたことってありませんか？ こんな構成よくありますよね 写真とその写真の説明がセットになっている構成よくありますよね。 なんの写真かパッと見てすぐわかります。 今回はこの構成を例として話を進めていきます。 （季節がら紅葉の写真をチョイスしてみました。） 複数並べてみました 同じ構成の固まりがたくさん並んでたりする事もありますよね、 複数のものを一覧で見せたりするような場面でよく見ます。 こんな感じです。 写真とその説明のセットがずらっと並んでいます。 でもなんだかもやっとしないですか？、戸惑う感じとか圧迫感とか。 結論を […] 広告宣伝 2021.08.16 デザインのお話を始めようと思う。【第3回】Webサイトのターゲットと導線 コロナ禍2年目の夏ですが皆様いかがお過ごしでしょうか。こちらは、生活環境がいい感じにまあまあ改善されております。ライフハック使ったとかって話じゃないですが、まあいろいろと。 「脳髄は人間の迷宮だという観点からあえて許そう」。ええ、良い言葉だと思います。 さて、今回の本題です。ずいぶん昔から「良いコンテンツを発信する事が大事」と異口同音に言われておりますが、以前の記事で「デザインはコンテンツを補佐する役目であり主役ではない」といった事を書きました。今回は「Webサイトのターゲットと導線」について書いてみます。 ターゲットを決めよう～「ペルソナ」の設定 良いデザインとか良いコンテンツとは、伝えたい […] 広告宣伝 業務 2021.07.05 UI/UXのおはなし～ボタンはON？OFF？ 業務をする上でいろいろなアプリケーションを触る機会も多いと思いますが、 操作に戸惑ってしまったり、期待してた結果と違っていたりした事ありませんか？ こんなボタン見た事ありませんか？ 出始めた当初、web製作者界隈で何かと話題になったこんなボタンがあります。 ボタンをクリックするとONとOFFが切り替わる切替ボタンです。トグルって呼ばれてます。 実際に動かせますので、触ってみてください。 通知を許可 ボタンの状態はON？OFF？ 現在のボタンの状態はONでしょうかOFFでしょうか。 ONって表示されている場合にボタンを押したらON？ ONって表示されている状態がON？ というような感じで戸惑って […] RANKING ITインフラ 1 ping応答、どっちがどっち？「宛先ホストに……」vs「要求が……」 ITインフラ Tips 業務 2 残してますか？作業ログ。 業務 3 Webアプリでの印刷仕様を考える ITインフラ Tips トレンド 4 FortiGateでIPoEを使うときの注意点 ITインフラ Tips 業務 5 ネットワーク障害時の基本のキ 最近の投稿 システムトラブルにどう備えるのか 花粉症始めました！ 魔法界に行ってきました 山 走ってきました。 「BeReal.」で繋がれているか？ カテゴリー 特集 BAちゃんねる ITインフラ Tips サービス KAO-Pass サービス紹介 セキュリティ トレンド バラエティ 広告宣伝 未分類 業務
