毎日朝7時更新/プログラミング芸人/WEBデザイン/フォトグラファー/インド/JavaScript芸人/Reactエンジニア
毎日朝7時更新/プログラミング芸人/WEBデザイン/フォトグラファー/インド/JavaScript芸人/Reactエンジニア
transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは!AndHAコーディング部です。 突然ですが新人コーダーさん!コーディング勉強中の皆さん! こんな不具合に遭遇したことありませんか? 「transitionをかけたホバーアクションのopacityがちらつく!」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ
ブラウザの機能が強化されるとともに、多様なアプリケーションがウェブ上で実現できるようになっています。同時に、ウェブサイトやウェブアプリが重要な情報を取り扱うケースも増えて、ハッカーの攻撃対象になることも多くなってきました。そうした場面でハッカーがよく利用する典型的な攻撃手法とその対策について、エンジニアのヴァルン・ナイクさんがブログにまとめています。 CSRF, CORS, and HTTP Security headers Demystified https://blog.vnaik.com/posts/web-attacks.html ◆1:CSRF CSRFはクロスサイトリクエストフォージェリの略称で、ユーザーがログイン済みのウェブサイトに対して第三者がアクションを実行させる攻撃のことです。攻撃は下記の手順で行われます。 1. ユーザーが悪意あるウェブサイトにアクセスする 2. 悪意
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
こんにちは、むむです。 Webサイト周りのセキュリティってどんなものがあるかご存じですか? Webサイト自体に使用しているアプリケーション、ミドルウェア、OS、サーバー、それらをつなぐ通信、通信を行う場所に入るための物理的なセキュリティなど……案外いろんな方面からの対策が必要だったりします。 今回は、Webサイトを制作する際に知っておきたいセキュリティの知識をざっくりとまとめます。 大きく以下の4つの視点から対策を行うことができます。 Webサイトのセキュリティ対策 サーバーのセキュリティ対策 ネットワークのセキュリティ対策 建物 / 部屋のセキュリティ対策 それでは詳しくみていきましょう! Webサイトのセキュリティ対策 まず初めに、Webサイトのセキュリティ対策についてです。 Webサイトを作るには、OSやミドルウェア、アプリケーションを使用し構築されることがほとんどです。そして、使用
こんにちは、デザイナーのまいまいです。 突然ですが、みなさんのPhotoshop、大丈夫ですか? 書き出しにありえない時間がかかったり、そもそも開くことが困難だったり、重すぎて落ちたり……重すぎて落ちたり!!!!!!! Photoshopは、人と共有したりすることも多く、次に使う人のことを考えないといけませんよね……ね? 重すぎてPhotoshopでの作業時間よりも、回り続けるレインボーを眺めている時間の方が長い……なんてことになったら、共有した人に1週間は強めに恨まれると思います。 なので、人伝や公式ホームページなどでいろいろ調べてきました。そのなかでも「これはよかったなあ」と思った対処法をみなさんにも共有しますね。 独学でつまずいていませんか? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなス
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
WordPress で時間の表示が9時間ずれる場合の対処方法を紹介します。 原因によっては対処方法がことなるため、原因になる箇所を順を追って解説します。 タイムゾーンの設定を確認 テーマファイルを確認 テンプレートタグを変えてみる wp-settings.php の値を調整 テンプレートタグ date_i18n を使う タイムゾーンの設定を確認 東京を基準とした場合、まずは「管理画面」>「設定」にある項目「タイムゾーン」の値が「東京」になっているかを確認します。 例えば、タイムゾーンが「UTC(協定世界時)」の場合は、投稿の表示時間が9時間ずれる場合があります。 テーマファイルを確認 タイムゾーンは東京なのにやっぱり時間がずれる、そんな時はテーマファイル内に date_default_timezone_set() の記述がないかを確認しましょう。 日時の取得の前や function.php
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら はじめに Gitって難しいですよね。本当に! プログラミング歴1年弱の自分がチーム開発に加わる様になってに一番不安なのはGitの扱いです。 ミスにビクビクしながら、日々を過ごしています。 そんな僕が、初学者向けに現場でうま〜く立ち回れる様に、Gitに慣れていない人がよくハマるパターンと対処法をまとめました。参考になれば幸いです。 作業ブランチ間違えて作業しちゃった!!パターン これは僕が一番やっちゃうやつです! 作業している途中や、git statusしている辺りでブランチを間違えていた事に気がつきます! 対処法 1 git stash -u 一旦、作業していた分を退避する 2 git switch 正しいブランチ名 正しいブランチに切り替える 3 git stash pop 退避していた分を正しいブランチ
本当にデザインをAdobe XDメインで納品できるの? XDについていくつも記事を書いている私ではありますが、 実は、XDでデザインを納品まで仕上げたことが、まだありません。 なので、この春からXDを使おう! と決意したあなたとほぼ同じスタートライン。今までXDを使ってきて、それはもうXDでスライドを作るくらいぞっこんなわけですが、デザインをすべて仕上げようと思うと、まだちょっと不安もあります。 今回は、実際に手を動かしながら、デザイナーが思っているであろうそんな不安について、検証してみようと思います。 不安ポイント①:他のアドビ製品との連携はできる? IllustratorやPhotoshopとの連携はもちろん可能! 連携方法はいくつかあります。 特定のパーツなどをAdobe XDに使いたい! というとき IllustratorやPhotoshopからのコピペ 編集中(展開中)のXDファ
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです! 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD(テクニカルディレクション)やPM(プロジェクトマネージャー)として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
個人的に今まで JavaScript を書いてて陥った失敗例などを振り返ってみました。 この記事にあるいくつかの失敗例については恐らく殆どの方が経験してるのではないかなと思います。 これから JavaScript 勉強するぞ!!という方や、現在進行形でこのような失敗に陥っている方の助けになれば幸いです。 コードの解説に関しては簡潔に行なっているので、気になった方はググってください。 DOM の取得及び操作 要素を取得して is-close なスタイルを付与したい。 しかし、エラーになってスタイルを付与できない // 失敗例 const hoge = document.getElementsByClassName('hoge'); hoge.classList.add('is-close'); // 正しい例 const hoge = document.getElementsByClassN
こんにちは、市原えつこです。 近頃更新がパッタリと止まっていましたが、その間に何があったかというと 契約関連でモメてました★ 守秘義務がございますので具体的に何があったのか、というのはお話できないのですが、なかなかの泥仕合でした。 これまでの人生であまり悪い人と出会ったことがなかったので この度はじめて修羅場の交渉というのを体験してなかなか楽しかったです。 ※一応念のため付け加えておくと、トラブルが発生したのは仲介業者さんとの契約であって取引先・クライアント様との契約ではないです。独立してからお仕事をさせて頂いたクライアント様はどこも誠実な方々でした 今後の人生で大きな損失を生まないために、インフルエンザワクチンを打って予防接種をしたのだ、とポジティブに捉えることにします。 クリエーターはお金に無頓着だったりあまり法に関する知識がなかったりするケースも多いため、ビジネスワールドの強者から
marginの相殺について、まずはクイズ。 Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいくつでしょうか? What's the Deal with Collapsible Margins? これは「マージンの相殺(Collapsing Margins)」と呼ばれるものです。 このマージンの相殺とは何なのか? いつどういう条件の時に起こるのか? それぞれどのように回避できるのかを紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 marginの相殺についてアンケート CSSのmarginがどのように機能するか marginの相殺(Collapsing Margins)とは marginの相殺は
LANの速度が遅くなったと感じたときの対処を紹介します。 1.問題点 自宅のインターネットはNTTフレッツを利用しているのですが、ある日突然速度が遅くなってしまいました。 具体的には、Windowsのタスクマネージャの「ネットワーク」で、ネットワーク使用率が1%以上になりません。 USENのスピードテストもせいぜい1Mしか出ません。 メールの取得でさえ1件につき10秒くらいかかります。 もうひとつ使っているWiFiの方が快適なくらいです。 ということで色々調べて少し解消したようなので、試した方法をまとめておきます。 2.アダプタの優先順位を変更する Windowsでローカルエリア接続とワイヤレスネットワーク接続を使っている場合、アダプタの優先順位があるようです。 「ネットワーク接続の管理」で開いた画面にある「詳細設定」→「詳細設定」をクリック。 (クリックで拡大) 「アダプタとバインド」タ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く