CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
CSS コンテナクエリの準備はできてる？ 安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました
コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍する新機能です。 そんなコンテナクエリが安定版のブラウザにサポートされ、ポリフィルも大幅にアップデートされたので、基礎知識、基本的な使い方、便利な新単位、ポリフィルの使い方と注意事項を紹介します。 CSSの新機能でネックになるのが、ブラウザのサポート。しかし、CSSの新機能コンテナクエリは、違います。サポートされていないブラウザ用にポリフィルも同時に開発されており、2年くらい前のブラウザでもサポートされています。 Container queries begin to land in stable browsers while the polyfill gets a big update by
神アップデート！ Win, Mac, Linux対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
HTML, CSS, JavaScriptをはじめとしたさまざまな言語に対応、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャー「massCode」がv3に神アップデートされたので、改めて紹介します。 macOS, Windows, Linux対応、日本語の入力など日本語環境も完全サポート。クラウドで同期できるので、すべての環境で同じコードスニペットを使用できます。 非常に快適で高速に動作し、VS Codeとの連携でさらに便利になっています！ massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 1
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応
VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。 ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。 ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。 デバッグウォッチ値の設定 - デバッグセ
[待望のアップデート] VSCodeの内蔵ターミナルがエディタと同様に扱えるようになりました！ | DevelopersIO
TL;DR まずはこいつをみてくれ。 左右に分割されたエディタウインドウに、テキストエディタとターミナルが並んでいるのがお分かりになられるでしょうか！！ なにそれ？ これは、先日リリースされた Version 1.58 (June 2021) に含まれる以下のアップデートによるものです。 Terminals in the editor area Terminals can now be created in or moved to the editor area, enabling a multi-dimensional grid layout that persists and remains visible regardless of panel state. Terminals in the editor area - Integrated Terminal - Visual Stu
![[待望のアップデート] VSCodeの内蔵ターミナルがエディタと同様に扱えるようになりました！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/611914e4c074abe947efa5c820fc1646e6c60a0a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fvscode-2020-eyecatch-1200x630-1.png)
Windows 11に見捨てられたPCをChromebook化して幸せに
Microsoftは6月24日（現地時間）、次期OS「Windows 11」を発表した。Windows 11 Insider Previewの公開も始まっており、筆者の周りにはPC系ライターも多いので、すでにインストール祭り状態である。 筆者は現在、執筆をMacで行っており、Windows環境はびっくりするほどプアである。クラウド時代の昨今、Macだから、Windowsだからという差はそんなにないのだが、時折レビュー製品でWindows版しか設定アプリがないものがあったり、Macで読めないHDDに動画素材が入ってたりということがたまにある。 そんなときのために、2020年9月にドンキの激安ノートこと「MUGAストイックPC3」を購入していた。CPUにCeleron N3350（Apollo Lake）、メモリ4GB、ストレージ64GBで、1万9800円である。 いや、購入直後はそこそこ普通
2021年版、フロントエンドとバックエンドのデベロッパーに必要なスキルやツールをまとめたロードマップ
フロントエンドのデベロッパー、バックエンドのデベロッパー、開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップを紹介します。 2021年、フロントエンドやバックエンドのデベロッパーが次に何を学べばよいか、キャリアアップのための道筋がコンパクトにまとめられています。 Developer Roadmaps Developer Roadmaps -GitHub フロントエンド デベロッパーのためのロードマップ バックエンド デベロッパーのためのロードマップ 開発・運用のためのロードマップ フロントエンド デベロッパーのためのロードマップ 2021年版、フロントエンド デベロッパーになるためのステップバイステップガイドです。PDFもダウンロードできます。 Frontend Roadmap.pdf フロントエンド デベロッパーのためのロードマップ
CentOS Streamへのシフトでうろたえないための手引き
何が起こったの？ CentOSプロジェクトがCentOS Streamに開発をシフトしていくことを宣言しました。これに伴ってRHEL 8の再構築としてのCentOS Linux 8は2021年に終了予定となりました。 ref: https://blog.centos.org/2020/12/future-is-centos-stream/ CentOSはLinuxの２大ディストリビューションの一つであるRed Hat Enterprise Linuxから商用パッケージを抜いてリビルドしたバージョンです。 商用パッケージが抜いてあるため、サポート無しで良ければ無料で本番環境で利用できるという事でOSの商用サポートを必要としないようなケースでよく利用されています。 今回、CentOS Linuxが終了してCentOS Streamになる事でCentOS終了！？ という感じで一瞬ビビりましたがそ
AWS re:Invent 2020で発表された新サービス/アップデートまとめ - Qiita
AWS re:Invent 2020の会期中に発表された新サービス/アップデートのまとめです。 今年も、後から出来るだけ素早く簡単に振り返ることができるようにまとめました！ 凡例 (無印) 新サービス (Update) 既存サービスのアップデート (APN) パートナー制度に関連したリリース/アップデート 12/1 (火) 今年の開幕は「Amazon EC2 Mac instances」でした。 Amazon EC2 Mac instances macOS用のAmazon Elastic Compute Cloud （EC2） Macインスタンス EC2 Macインスタンスを使用すると、iPhone、iPad、Mac、Apple Watch、Apple TV、Safari用のアプリ開発者は、macOS環境を数分でプロビジョニングしてアクセスし、必要に応じて容量を動的に拡張し、AWSの従量課
無料で使える画像をGoogle画像検索で簡単に探せる機能がアップデートで追加される
Googleが2020年8月31日(月)に発表したアップデートにより、Google画像検索で簡単に無料で使える画像や商用利用可能な画像を探せるようになりました。探した画像の利用規約も簡単にアクセスできるようになっています。 Learn how to find image licensing information on Google Images https://blog.google/products/search/learn-how-find-image-licensing-information-google-images/ まず、Google画像検索で検索したい単語を入力してエンターキーを押します。 以下のように画像が大量に表示されますが、無料で使用できる画像や転載不可・有料の画像などが混在している状態です。画像を絞り込むには「ツール」をクリック。 「ライセンス」をクリックすると、
NTT 東日本 - IPA 「シン・テレワークシステム」 - セキュリティ機能の大規模アップデートと実証実験の現状報告
「シン・テレワークシステム」 セキュリティ機能の大規模アップデートと実証実験の現状報告について 2020 年 5 月 14 日 「シン・テレワークシステム」 開発チーム 昨日、2020 年 5 月 13 日をもちまして、「シン・テレワークシステム」のユーザー数が 2 万人を超えました。テレワークの効果等により、新型コロナウイルスの感染者数は減少していますが、まだ油断をすることはできません。この機会に、「シン・テレワークシステム」公開後 3 週間経過時の現況と、この大規模な実証実験のコスト効率と社会的効果について、お知らせをしたいと思います。 また、本日、「シン・テレワークシステム」を大規模な企業 LAN などのセキュリティ・ポリシーが制定されている環境向けや、行政情報システムなどの高いセキュリティ・レベルが必要とされているネットワーク向けで利用できる、多数のセキュリティ機能を実装した新バー
IIJmio、iOS 10にアップデートしたiPhone・iPadで動作確認
今年もこの季節がやってきたなという気持ちです。9/14未明に公開されたiOS 10について、対応するiPhone・iPadでIIJmioのSIMが利用できるかの動作確認を行いました。すべての機種でIIJmioの利用に支障は無いことが確認できました。 キャリア設定アップデート iPhone・iPadにアップデートの通知が表示された方は、画面の指示通りアップデートを実施していただいて結構です。配信されるiOSのバージョンは10.0.1となります。また、iPhoneではiOSアップデート後に「キャリア設定アップデート」の画面が表示されますが、こちらも指示通り実行して差し支えありません。アップデートを実行すると、キャリア設定が「ドコモ25.1」になります。(iPadではアップデートがなく、「ドコモ25.0」のままです。 iOS 10でのLTE表記変更 また、docomoのLTE網を利用している場合
Sketchがレスポンシブデザインに対応した神アップデート！Smart Symbol Resizingをリリース
Sketchがレスポンシブデザインに対応した神アップデート！Smart Symbol Resizingをリリース 昨日アップデートされたSketchのバージョン39からSmart Symbol Resizingという機能が追加されました。 これがとんでもなく便利な機能だったので紹介します。 Smart Symbol Resizingとは？ 今までシンボルをリサイズしようとするとこんな感じでシンボルの中身まで変形してしまうので、デバイスのサイズが複数になったときにシンボルの再利用ができないという問題がありました。 それを解決してくれるのがこの「Smart Symbol Resizing」です。 ・Stretch ・Pin to corner ・Resize ・Float in place と４つの設定があり、可変してもいい部分と可変にともなって相対的に位置を移動する部分とを分けてシンボルを作
Mac App Store：接続できない、アップデートできないなどのトラブル対処法 - りんごが好きなのでぃす
最近ちょくちょくMac App Storeの不具合についての検索で訪れる方が見受けらるのですが、どうやら以下のエントリとは別の不具合について調べられているみたい。 ringosuki.hateblo.jp 各所調べてみたところ、どうやら「Mac App Storeに接続できません。インターネットへの接続が必要です」というメッセージが出てしまうとか、ソフトウェア・アップデートが正常に行われない……といった不具合が散見されるようです。 この件については既にAppleでも把握されていてサポート文書で公開されていました。 １）日付と時刻の設定が間違っているのが原因の可能性 多くの方はこの『日本』でMacを使っていると思いますが、何らかの理由でMacの地域設定が日本以外に設定されてしまい、これが原因でMac App Storeの動作（認証）に支障が出ることがあるそうです。 以下の手順で、Macを使用
CVE-2015-7547 (glibcの脆弱性) AWSでの対応まとめ | DevelopersIO
ども、大瀧です。 本日午前中にCVE-2015-7547に関する情報が公開されました。 AWS環境での対応方法をまとめておきます。 AWSからのアナウンス : CVE-2015-7547 Advisory AWSのマネージドサービスは影響無し RDSやS3など、AWSのマネージドサービスは影響ありません。 EC2はAWS DNSを参照する場合は影響無し 今回の脆弱性はDNS関連とのことですが、Amazon VPCで提供されるDNSキャッシュサーバー(AWS DNS)を参照するEC2インスタンスも影響ありません。 AWS DNS以外のDNSサーバーを向いているEC2では、glibcパッケージをアップデートすることで対応が必要です。Amazon Linuxの場合は、以下のyumコマンドでアップデートしましょう。 sudo yum update glibc ただし、Amazon Linuxのバー
第5回 Dockerで複数バージョンのMySQLを開発環境に用意する | gihyo.jp
MySQLを開発に使っている時に、よく問題になるのがアップデート、アップグレードの検証です。アップデート・アップグレードをする前に開発環境で問題が発生しないか、あるいは新機能がどんな機能かを確認したいと思うことがあると思います。その際にうっかり別のバージョンのMySQLで開発環境のMySQLを上書きしてしまい、以前の開発環境に戻せなくなってしまった…なんてことはありませんか？ そして、本来やりたかった作業とは別にやることが増えてしまい。面倒くさくなってしまうことが時々あります。 今回はDockerを使って5.6.27と5.7.8の2つのMySQLを、ローカルの開発環境に影響を与えることなく用意してみようと思います。これによってお手軽にMySQLの最新機能を確認したり、アプリケーションへの影響を検証したりできるようになります。 デモンストレーション環境について 今回はDockerでMySQL
ドコモからのお知らせ : Android(TM) 5.0へのバージョンアップ予定製品について | お知らせ | NTTドコモ
お客様の設定により、お客様情報が「非表示」となっております。お客様情報を表示するにはdアカウントでログインしてください。 お客様情報表示についてへ お客様情報表示についてへ ドコモからのお知らせ Android(TM) 5.0へのバージョンアップ予定製品について 2015年6月4日 平素はNTTドコモのサービス・商品をご利用いただき、誠にありがとうございます。 2015年6月4日（木曜）現在発売中の製品における、AndroidTM 5.0へのバージョンアップ※1予定の製品をお知らせします。 ■AndroidTM 5.0へのバージョンアップ予定の製品（2015年6月4日（木曜）現在）GALAXY S4 SC-04EGALAXY Note 3 SC-01FGALAXY J SC-02FGALAXY S5 SC-04FGALAXY Note Edge SC-01GGALAXY S5 ACTIVE
WordPressプラグイン「wp-nologin-redirect」を作りました ｜https://wp.yat-net.com/name
2014年 11月 14日 WordPressプラグイン「wp-nologin-redirect」を作りました カテゴリ： プラグイン タグ：WordPress こんにちは、YAT（@yat8823jp）です。WordPressのプラグイン「wp-nologin-redirect」を、ちあきちゃん（@mellowchanter）と作ったのでご紹介。 1.wp-nologin-redirectとは 2.配布に関して 3.ライセンスについて 4.そのライセンスを選んだ理由 5.WordPressコミュニティ 6.参考文献等 1.wp-nologin-redirectとは WordPressで作成したサイトがまだ公開前の時、「他の人にはまだ見せたくないけど、お客さんや関係者には見てもらう必要がある」という時に使えるのがこのプラグインです。 機能は凄くシンプルで、サイトにログインすればコンテンツを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応のレイアウトやコンポーネントだけを実装するCSSのシンプルなコードのまとめ -SmolCSS
