SCSSからCSSネスティングに切り替えたい人に贈る3つの罠 - Qiita
今年も残すところあと1月を切り、CSSもこの1年でさらに進化を遂げましたね。 CSSは普段、SCSSを使ってコーディングしている方も多いますが、 CSSの進化により、SCSS不要論も今年チラチラ見られるようになりました。 本当にSCSSがなくても問題ないのか、新しいCSSネストについて調べてみました。 CSSネストの基本 まずはCSSネストがなんなのかというおさらいをしておきましょう。 2つのクラスparentとchildがあり、parentより子の階層にchildクラスが含まれているときだけスタイルづけしたい時、普通のCSSだとこのように書きます。 .parent { min-height: 100dvh; width: 100%; } .parent .child { background: white; }
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
駆け出しデザイナー・エンジニアにこそ見ていただきたいWordPressの脆弱性とセキュリティ - Qiita
WordPressは世界で1番使用されているCMSかつオープンソースであるが故に、悪意のある第三者やプログラムから世界で1番攻撃されやすいCMSと言われています。 私自身も何度か攻撃を受けていて、実害に及ばなかったものから及んだものまで様々でした。クライアントの稼働しているWEBサイトに実害があった場合は、原因究明や報告、一次対応から恒久的対策までを行い、安全性を確保した上で再度稼働させる必要があり、その作業は簡単なものではありません。 被害があるのはクライアントだけではなく、そのサイトにアクセスしたユーザーに及びます。たとえ納品後の保守契約を結んでいなかったとしても、実装者の責任としてクライアント、ユーザーに安心して利用できるWEBサイトを目指さなければいけません。 私はセキュリティの専門家ではないもののWordPressを10年以上触っている中で様々な問題に当たり、対応してきました。そ
ウェブアプリに対する典型的な攻撃手法とその対策まとめ
ブラウザの機能が強化されるとともに、多様なアプリケーションがウェブ上で実現できるようになっています。同時に、ウェブサイトやウェブアプリが重要な情報を取り扱うケースも増えて、ハッカーの攻撃対象になることも多くなってきました。そうした場面でハッカーがよく利用する典型的な攻撃手法とその対策について、エンジニアのヴァルン・ナイクさんがブログにまとめています。 CSRF, CORS, and HTTP Security headers Demystified https://blog.vnaik.com/posts/web-attacks.html ◆1：CSRF CSRFはクロスサイトリクエストフォージェリの略称で、ユーザーがログイン済みのウェブサイトに対して第三者がアクションを実行させる攻撃のことです。攻撃は下記の手順で行われます。 1. ユーザーが悪意あるウェブサイトにアクセスする 2. 悪意
知っておきたいWebサイトまわりのセキュリティ対策について | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、むむです。 Webサイト周りのセキュリティってどんなものがあるかご存じですか？ Webサイト自体に使用しているアプリケーション、ミドルウェア、OS、サーバー、それらをつなぐ通信、通信を行う場所に入るための物理的なセキュリティなど……案外いろんな方面からの対策が必要だったりします。 今回は、Webサイトを制作する際に知っておきたいセキュリティの知識をざっくりとまとめます。 大きく以下の4つの視点から対策を行うことができます。 Webサイトのセキュリティ対策 サーバーのセキュリティ対策 ネットワークのセキュリティ対策 建物 / 部屋のセキュリティ対策 それでは詳しくみていきましょう！ Webサイトのセキュリティ対策 まず初めに、Webサイトのセキュリティ対策についてです。 Webサイトを作るには、OSやミドルウェア、アプリケーションを使用し構築されることがほとんどです。そして、使用
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA
CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。 * { outline: 2px solid red; } これを応用してタグの不適切な利用部分をハイライトできます。 このような不適切なタグ利用を検知して警告する「デバッグCSS」を作ってみました。このようなCSSをLintのようにする使い方は#lintHTMLwithCSSのハッシュタグで海外でも考案されています。仕様上許可されないものは赤色で点滅、ダメではないが、やらない方がベターなものは黄色で点滅するようになっています。 当記事では下記のデモを見ながらだと理解を深めやすいので、合わせて読むことをオススメします。 サンプルを別ウィンドウで開く コー
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
JavaScriptでエラーの原因となるHoisting（巻き上げ）、その仕組みをGIFアニメで分かりやすく解説
JavaScriptでエラーの原因となるHoisting（巻き上げ）はなぜ起こるのか、その仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🔥🕺🏼 JavaScript Visualized: Hoisting by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScript Hoisting（巻き上げ）の仕組みをGIFアニメで分かりやすく解説 Hoisting（巻き上げ）は、JavaScriptでのエラーの原因をGoogleで検索しても分からず、StackOverflowなどで質問した際に目にする用語の1つです。「そのエラーはHoisting（巻き上げ）が原因で発生している🙃」と言われることがあります。 Hoisting（巻き上げ）とは何のことでしょうか？
`package-lock.json` のひみつ（NPMおれおれAdvent Calendar 2019 – 05日目） | Ginpen.com
NPMおれおれAdvent Calendar 2019 – 05日目 （追記：なんか間違ってる気がするので調査中。） 言うほど秘密ってもんでもないですが。 なにそれ package-lock.json は npm install なんかをすると生成されるファイルで、インストールされているパッケージのツリーを表します。このファイルと npm ci を利用して全く同じツリーを再構築することが可能になります。 困ったちゃん このファイル自体は便利なものだと思うんですが、困った点がひとつ。「ロック」とう名前に反して何もロックしない点です。 ロックファイルがある状態で npm install すると、そのロックされたバージョンのパッケージ群がインストールされる、というのを期待するんですが、実際はそんなことなく、新しいものがあればそちらをインストールし、逆にロックファイルを更新します。ロックとは。 昔
CSSでz-indexが効かない時の4つの原因とその対応方法
CSSでレイアウトする際、z-indexが期待通りに機能しない時がありませんか？ z-indexは重なり順を定義するプロパティですが、単なる重なり順だけでなく、いくつか複雑なルールがあります。 z-indexがうまく効かない時の主な4つの原因とそれぞれへの対応方法について紹介します。 4 reasons your z-index isn’t working (and how to fix it) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 同じコンテンツ内で積み重なっている要素は出現順に表示され、後の要素は前の要素の上に表示される 2. 要素にpositionが設定されていない 3. opacityやtransformなどのプロパティを設定すると、要素は新しい積み重ねコンテキストに配置される 4. 子要素のz
Adobe Illustrator でテキストオブジェクトを元のオブジェクトに戻す方法 - by Takumi Hirashima
Adobe Illustrator でテキストを流し込んだテキストオブジェクトを、元のオブジェクトに戻す方法を紹介します。 例えば、エリア内文字ツールやパス上文字ツールでテキストを流し込んだオブジェクトを、元のオブジェクトに戻したいときに便利な方法です。 まずはグループ選択ツールを選択 次に取り出したいオブジェクトを選択 パスを選択したらコピー＆ペースト まずはグループ選択ツールを選択 テキストを流し込んだオブジェクトから元のオブジェクト取り出すには、グループ選択ツールを使用します。 まずは「グループ選択ツール」に切り替えます。 このツールはダイレクト選択ツールの裏に隠れています。 次に取り出したいオブジェクトを選択 次に取り出したいオブジェクトを選択します。 グループ選択ツールに切り替えたら、取り出したいオブジェクトのパスをクリックして選択します。 ここで注意したいのは、オブジェクトの中
Windowsでconfig.sysのFILESを変更する
config.sysのFILESを変更する方法を紹介します。 １．問題点 PCで色々なプログラムを起動しすぎたせいか、「16ビットプログラムを使いすぎです。CONFIG.SYSのFILESを変更してください」 という風なダイアログが表示されてしまいました（キャプチャ取り損ねたので正式なメッセージは失念）。 「CONFIG.SYS」というのは、ファイル名から推測するにWindowsの設定ファイルと思われますが、フォルダを探してもファイルがみつかりません。 ということで、config.sysのFILESを変更する方法を紹介します。 ２．config.sysの配置場所 config.sysはCドライブ直下に配置されていると思います。 ただ、エクスプローラーでCドライブを表示しても、CONFIG.SYSが表示されていないと思います。 （クリックで拡大） エクスプローラーでconfig.sysを表示
クリエーターが契約トラブルに見舞われた時の対処方法｜市原えつこ 公式ブログ
こんにちは、市原えつこです。 近頃更新がパッタリと止まっていましたが、その間に何があったかというと 契約関連でモメてました★ 守秘義務がございますので具体的に何があったのか、というのはお話できないのですが、なかなかの泥仕合でした。 これまでの人生であまり悪い人と出会ったことがなかったので この度はじめて修羅場の交渉というのを体験してなかなか楽しかったです。 ※一応念のため付け加えておくと、トラブルが発生したのは仲介業者さんとの契約であって取引先・クライアント様との契約ではないです。独立してからお仕事をさせて頂いたクライアント様はどこも誠実な方々でした 今後の人生で大きな損失を生まないために、インフルエンザワクチンを打って予防接種をしたのだ、とポジティブに捉えることにします。 クリエーターはお金に無頓着だったりあまり法に関する知識がなかったりするケースも多いため、ビジネスワールドの強者から
WordPress 投稿が0件でもpost_typeを取得したい。 - かもメモ
WordPressでpost_typeを取得する場合 通常 get_post_type() を使うのですが、投稿が無い時(0件の時) get_post_type() は false を返すため今のページのpost_typeを取得できない場合があります。(カスタム投稿タイプを作って投稿が0件のアーカイブページとか) Source File: wp-includes/post.php <?php function get_post_type( $post = null ) { if ( $post = get_post( $post ) ) return $post->post_type; return false; } 引用元: get_post_type() | Function | WordPress Developer Resources これは投稿がないとglobal $postがN
[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック
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の相殺は
![[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a0946c8d60f3b1f922d11e6c2ccc86c7124cb58/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017071101.png)
Firefox 54で全ユーザー向けに導入されたブラウザ高速化技術「Electrolysis」がオンにならない場合の対処法
2017年6月にリリースされた「Firefox 54」では、ブラウザの動作を高速化するために8年以上かけて開発されてきたマルチプロセス技術「Electrolysis」が全ユーザー向けに解放されました。しかし、いまだ多くのユーザーの環境ではFirefox 54にアップデートしてもこの恩恵を受けられないケースがあります。その原因は、このマルチプロセス技術に非対応のアドオンのせいで、場合によってはちょっと面倒な手順を踏まなければオンにできないことがあるようです。 How to Speed Up Firefox With Multi-Process, If It's Not Working By Default http://thehackernews.com/2017/06/electrolysis-firefox-mutiprocess.html Electrolysisは条件を満たしていれば
CSS flexboxのレイアウトで困った時に使えるスタイルシートのテクニックまとめ
flexboxを使ってレイアウトを実装するのは、何年もの間floatやclearfixを使っていた人に新しい驚きと喜びを与えます。主要なブラウザすべてにサポートされ、採用するプロジェクトも増えてきました。 しかし、以前のテクニックはflexboxに通用しません。 flexboxの仕様に基づいた、レイアウトで困った時に使えるスタイルシートのテクニックを紹介します。 11 things I learned reading the flexbox spec 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. flexboxにおけるmarginの特別な効果 02. min-widthでよくある問題 03. flexのデフォルト値に注意 04. flexboxはインラインにも使える 05. vertical-alignはflexアイテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Developers.IO
Welcome to nginx!