transitionをかけたホバーアクションのopacityがちらつく問題を解消する | AndHA Blog
transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは！AndHAコーディング部です。 突然ですが新人コーダーさん！コーディング勉強中の皆さん！ こんな不具合に遭遇したことありませんか？ 「transitionをかけたホバーアクションのopacityがちらつく！」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ
わずかな時間で驚くほどWeb制作がはかどる最新オンラインツール43個まとめ
この記事では、Webデザイン制作を楽にする最新オンラインツール43個をまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Layout Patter
【2020年度版】ホームページ制作会社選びを成功させる54のチェックリスト
すぐにチェックリストを使う チェックリストをダウンロードする アフィリエイト広告を利用しています。 「ホームページを作りたいけど、どの制作会社に依頼したらいいの？」 「ホームページ制作で失敗しないためには、どんな準備をしておけばいい？」 ビジネスをする上で欠かせないホームページ。 ホームページは「疲れを知らない営業マン」と言われるように、24時間365日、商品やサービスの訴求や問い合わせの窓口として活躍してくれます。 しかし、そんなホームページも、作り方や運用を間違えると、活躍の場がない営業マンになってしまいがち・・・。 そんな悲劇を生まないためには、良いホームページの「型」を知っておく必要があります！ そこで登場するのが、ホームページ制作のプロである「ホームページ制作会社」。 餅は餅屋に頼むべし、ということで、ホームページ制作未経験の人が作るホームページよりも、ホームページ制作のプロがつ
特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]
当サイトのアイキャッチは主にAdobe Expressで作成しています。Adobe Expressならデザインパーツを並べるだけ、最速1分！ カンタン素早く作成できます♪ >>> Adobe Expressでできることをくわしく タブレイアウトで、別のページから特定のタブへリンクしたい時に。 BootstrapやFoundationを導入して入れば実現するのは優しいですね。こういう時はCSSフレームワークはとても助かります。 Bootstrap4で特定のタブに直接リンクするhttps://getbootstrap.com/ BootstrapのTabは .nav-tabs というclassで実現します。tab用javascriptプラグインが必須です。（コンパイル済みのbootstrap.jsでOK） Bootstrapのタブドキュメントは以下のページ https://getbootstr
![特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]](https://cdn-ak-scissors.b.st-hatena.com/image/square/449c5dbd52b27062a353c9106e2708d1a93db4e4/height=288;version=1;width=512/https%3A%2F%2Ftokushiyo.net%2Fwp-content%2Fuploads%2Ftoku-direct-link-tab.png)
Web制作者におすすめ！VS Codeと同じエディタを使用した最強のコードスニペットマネージャーが登場 -massCode
使い勝手がよく、高速動作のオープンソースのコードスニペットマネージャーを紹介します。VS Codeと同じMonacoがエディタに使用されており、非常に快適です。 macOS, Windwos, Linux対応のアプリで、Web制作のさまざまな言語をサポートしています。日本語の入力など、日本語環境でも問題なく利用できます。 massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 10.13+, Windows 7, 8, 10, Ubuntuをサポートしています。 コード管理 massCodeは、マルチレベルのフォルダとタグ
ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
ウェブ制作に活かすユニバーサルデザインの視点
この記事は、2019年12月7日に名古屋で開催された WCAN 2019 Winter での登壇内容をテキスト化したものです。アクセシビリティ Advent Calendar 2019 の 9日目のエントリーです。 当日使用したスライドは SpeakerDeck で公開しています。 ウェブ制作に活かすユニバーサルデザインの視点｜SpeakerDeck はじめに 「ユニバーサルデザインとウェブ」と聞くと、あまり馴染みがないように思われるかもしれません。しかし実は、ウェブは生まれながらにユニバーサルな性質を持っています。ワールド・ワイド・ウェブの考案者ティム・バーナーズ＝リーは、次のように述べています。 The power of the Web is in its universality. ウェブは、世界中の誰もが、自分の好きな場所で、好きなデバイスで、好きな時にアクセスすることができます。
【svgアニメーション】After Effectsで制作したアニメーションをWebで使う方法（Lottie） | PRAWN COCKTAIL(プロウンカクテル)
この記事の目標「After Effects」と「Lottie」というアニメーションライブラリを利用してWebアニメーションを制作してみたいと思います。 試しに作ってみたものがこちらです。 このように「After Effects」で制作したアニメーションをWeb上に表示させるまでを今回の記事の目標にします。 流れとしては以下のようになります。 「After Effects」でアニメーションを制作。「Bodymovin」を使いJSON形式で書き出す。「Lottie」を使って実装する。 BodymovinをインストールまずはAfter Effectsのプラグインである「Bodymovin」をインストールします。 Adobeからダウンロードできます。 のはずが上手くいかなかったので以下の方法でダウンロードしました。 LottieのGitHubからダウンロードします。 赤枠のボタンをクリックするとツ
制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！ | 東京フリーランス
制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！2019.08.26特集 HOME特集制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！ こんにちは！Webエンジニアのショーヘーです。 「今はWeb業界の景気がいい！」と言われますが、その分競争が激しくなったことで経営に苦しむ企業も増えています。 どんどん価格競争が激しくなっているため、原価ギリギリで引き受けている企業もあるくらいです。 そんな苦しいWeb業界にありながら、平均月給41.8万円、残業ゼロを実現している超優良Web制作企業が沖縄にあります。沖縄では月給20万を下回ることも珍しくない中、これはとんでもないことです。 その企業の名前は、琉球
Web制作者として転職する際、その会社の面接で尋ねておきたい質問のまとめ
就職や転職の面接は、面接官が投げかけてくる質問に答えるだけではありません。面接の最後に、「質問はありますか？」と必ず聞かれます。その会社にWeb制作者として就職するにあたって、答えを知っておきたい質問を紹介します。 私は面接を受けたことも、面接官をした経験もあるのですが、どちらの立場でもこれを読んでおけばまた違ったアプローチができたのかな、と思いました。 10 Questions You Should Ask In A Web Dev Interview by Milecia McG 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに プロジェクト管理はどのように扱われていますか？ 1ヵ月にいくつのプロジェクトに取り組むことができますか？ コードを管理するプロセスはどのようなものですか? 典型的なスプリントはどのくらいです
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
【photoshop】風景写真をイラスト・アニメ風に加工する｜ヱノプルギスの夜 / こころ動かす者
（2019.02.23に書いたブリコルールのブログ記事の引越しです） 写真をイラストっぽく使いたいなどの局面はいろいろありまして、備忘録も兼ねて。 会社の近所で撮影した写真をこんな感じでイラスト風にして、弊社のキャラクターと合わせてみました。まあまあアニメのワンシーンのようにも見えなくもない？？ 最近だと、アプリで簡単に写真をイラスト風に変換できるものもありますが、photoshopを使います。 ベースとなるレイヤーを作成・調整する もとの写真はこちらです。 なんの変哲もない、何年か前に撮ってフォルダの奥底で眠っていた写真ですが、空を抜きやすい写真を選ぶとよいです。 【イメージ】＞【色調補正】＞【HDRトーン…】を選択します。 他のサイトなどでもHDRトーンを使って紹介しているところは多いです。私もこれを使います。HDRトーンの正しい使い方は正直なところ自分はわかっていません…。調整がまと
安定よりも「変化」が大事！優秀な人が辞めにくい職場の3つの特徴 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ニュージーランドで働くプログラマのはっしーです。 突然ですが、皆さんの会社で職場を離れていく人、多くありませんか？ 特に「優秀であこがれだった先輩からどんどん辞めていくな〜」なんてことはないでしょうか。変化の速いIT業界は、基本的に人の入れ替わりが激しいもの。優秀な人ほどフットワーク軽く、2〜3年で転職を繰り返してキャリアを積んでいくのが普通です。 しかし世の中には、仕事に困らないほど優秀な人が不思議とやめない会社も存在します。 僕がいま勤めている職場にも、わずか20歳で博士号を取っていたり、地元の名門大学の主席卒業生だったりと、自分なんかが同僚で申し訳なくなるような超優秀な人材がたくさん。ニュージーランドは数年で転職するのが当たり前といわれてるんですけど、仕事には困らないはずの彼らでも、同じ会社で10年近く勤め続けているんですよね。 その理由を考えていくうち、優秀な人が辞めに
社員の働き方に着目するなら「顧客の選び方」についてまず考えるべき｜ベイジ | URAGAWA
優れたクリエイティブだけでなく、マーケティングをも得意とし、戦略構築から制作までのマネジメントまでも行うのは、株式会社ベイジ。マーケティングの知見は自社にも活かされており、年間400件以上のお問い合わせを獲得するほどの実力を持つ。 そんな株式会社ベイジは制作会社としては珍しく、世間では不評の声も多いプレミアムフライデーを実施。そして現在平日は21時完全退社、水曜日は19時以降の業務を基本禁じているが、さらに退社時間を早め残業時間を削減することにも積極的で、今後は21時退社を20時退社、19時退社と段階的に早めていく予定であるなど、理想的な労働環境の追及に積極的に向き合っている。 さらに業界では “あるある” な炎上案件もほぼないという。 なぜ、そういったことが実現可能なのか。ベイジ代表取締役である枌谷力氏にお話を伺った。 受託制作は、顧客との相性が悪ければ事業が成り立たないビジネスモデルで
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第4回目となる本記事ではウェブ業界の「CSSコーダーにとっての2018年のコーディング事情」と題してアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのベンダープレフィックスは今も付けてますか？ ブラウザのサポートが拡大し、多くのCSSプロパティでベンダープレフィックスの記載が不要になってきました。みなさんは今もベンダープレフィックスを書いているのでしょうか？ 309票の回答があり「ごく一部のものに付けてる」が38%、「なるべく付けて
【Webデザイン】Webサイト制作は家造りに例えると分かりやすい（２） - ヤマダライフログ
前回のワイヤーフレームの続きです。 ヤマダソウイチロウ（@sou16ooo）です。本日もお読み頂きありがとうございます！ トップページデザインは家本体 それぞれのお部屋がコンテンツページ 部屋の中にある家具がコンテンツ 電化製品でより快適に まとめ Webサイト制作は家造りに例えると分かりやすい（１）まだ見ていない方は下記のリンクよりご覧ください。 トップページデザインは家本体 前回まででワイヤーフレームが終わりデザインに入るためのベースが終わりました。 次はトップページデザイン。これはサイトの顔になるのものとなり、家そのものと考えていただきたいです。 壁の色、屋根の色、ドアや窓の位置などヒアリングした内容を元にクライアントの希望とするイメージに近づけて制作していきます。 どこに部屋を配置するかによって使い勝手が変わるのと同じで、トップページのレイアウトによってサイトの使い勝手が全く違いま
デスノート 公式ブログ - 『PPAP(ペンパイナッポーアッポーペン)』死神リューク✕ピコ太郎を作るための６ステップ - Powered by LINE
本日、公式コラボ動画、PPAP（Pen-Pineapple-Apple-Pen）ペンパイナッポーアッポーペン／ Ryuk(死神リューク) feat.PIKOTARO(ピコ太郎)という動画が公開されました。 制作したのは、映画「デスノート Light up the NEW world」でCG制作を担当したデジタル・フロンティアさん。死神リューク✕ピコ太郎「PPAP」をどうやって制作したのかお聞きしました。 デジタル・フロンティア公式ホームページ 死神リューク✕ピコ太郎「PPAP」を作るための６ステップ１．CHARA（モデリング）２．SETUP（骨）３．ANIM（ボディアニメーション）４．FACIAL（フェイシャルアニメーション）５．LIGHTING（ライティング）６．COMP（合成） １．CHARAまずキャラクターを造型します。担当したのはChara室シニアデザイナーの宮尾さん。「ピコ太郎さ
保存版！Web制作の見積もりで忘れず検討したい22項目 | 請求書作成サービス「Misoca(ミソカ)」
こんにちは、トヨシです。Webサイトの納品後に 「それ見積もりに入れるの忘れてたー！」 というのはだれもが一度は経験したことがあるんじゃないでしょうか。以前は私もWeb制作に関わっており何度も経験が有ります。今回はそんな悲劇が二度と起きないようWeb制作（ホームページ制作）の見積もり時に忘れやすいけど忘れずに検討したい項目についてまとめました。 全体をホームページ制作前、制作中、制作後、その他の4つに分けて紹介します。 とその前に、 見積書の作成にお困りの方は、ミスなくカンタンに見積書や請求書が作れる「Misoca」がおすすめです！レイアウト崩れや記入漏れの心配無用です！ 制作開始前に必要な見積もり項目 企画・ディレクション費用 打ち合わせ、提案書の作成、アイデア、ノウハウ代など見積もりに含めることは多いです。 旧サーバからのデータ移管費用 サーバの変更がある場合はデータやシステムの移管を
Bootcomp｜Bootstrap × Photoshop CC 2015 エクステンション
�10倍ラクするデザインカンプ制作 Photoshop CC 2019に「Bootcomp」を導入すればWebサイトやアプリのデザインカンプ制作にかける時間を大幅に短縮することが可能です。 ダウンロードする フォーマット作成 Webサイトやアプリのデザインをスタートする際にまずはレイアウトのガイドを作成するなど事前準備に時間がかかっていました。 Bootcompを使えば１クリックでフォーマットが瞬時に作成されるのですぐにデザイン作業をスタートさせることができます。 画像挿入もワンストップ シェイプを作成してクリックするだけで画像挿入〜リサイズをワンストップで行うことができます。画像がまだ未定の場合は画像挿入をキャンセルすれば自動でダミー画像が挿入されます。ぶっこみ機能を使用すれば大量の画像もあっという間に配置することができます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
