サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
AppleのWebブラウザ「Safari 17.4」で、日本語の縦書き表示が可能になった。本バージョンではWebKitのインラインレイアウトエンジンの全面的な書き換えを完了し、相互運用性やパフォーマンスが向上した。Appleは、3月5日付けでリリースされたiOS 17.4、iPadOS 17.4、現在ベータ版のmacOS Sonoma 14.4などにバンドルされるWebブラウザ「Safari 17.4」で、日本語の縦書き表示が可能になったことを明らかにしました。AppleはこのSafari 17.4で、過去21年間使われてきたレンダリングエンジンであるWebkitのレガシーなラインレイアウトエンジンをついに廃止し、インラインレイアウトエンジンの全面的な書き換えを完了したことを報告しています。 これにより、最新のWeb標準での相互運用性が向上し、インラインレイアウトのバグが減り、パフォー
The first new feature update sinceTailwindCSS v2.0 is here and loaded with lots of cool stuff! We've merged the new JIT engine to core, added first-class support for composableCSS filters, addedblending mode utilities, and abunch more. Here are some of the highlights: JIT engine in core ComposableCSS filtersAPI Newblending mode utilities New isolation utilities For the full details, check
JX 通信社のフロントエンドではReactTypeScript やEmotion のようなCSS in JS を技術選定することが多いです。弊社 SaaS の FASTALERT、新型コロナ関連情報などでも同様の技術選定で、過去にもエンジニアブログで紹介してきました。tech.jxpress.nettech.jxpress.net 今日は、Emotion の活用の極地「Utility First なCSS in JS フレームワーク」についてご紹介します。Emotion で開発する悩み 素のEmotion や類似のCSS in JS ライブラリでは、 1 つの TS/JS ファイル内にCSS を書くような感じでスタイル設定を行っていきます*1。CSS in JS ライブラリに概ね共通しているのが、 styled.タグ名 でスタイリングすることです。 const Tit
こんにちは。Webフロントエンジニアの駒木です。 Mirrativでは毎週の様に運営主催イベントやゲーム会社様とのコラボ企画イベント等が開催されます。 そのイベント情報をユーザーへお伝えするメディアとして、イベント毎にWebページ いわゆる LP ( Landing Page ) を制作・公開しています。 Mirrativで公開している多種多様なLP ですが毎週の様に新しいイベントが企画・開催されますので、LPをエンジニアが都度制作していてはとても追いつきません。 そこでミラティブではCSS Variablesを活用することで、イベントの魅力が伝わるWeb LPをエンジニアが作業することなく制作・運用できる体制を構築しています。本記事ではここまでに至った過程も含めお伝えします！ 目指すはイベント運用の効率化と専門性の排除 遡ること半年ほど前、イベント企画チームの目標として『より多くのイベ
Glassmorphism（グラスモーフィズム）は、昨年末ごろより「ニューモーフィズムの次はこれだ。」と話題になっているデザイン手法です。 この記事では、グラスモーフィズムの基本や作成上の注意点、コピペで実装できるジェネレーター、参考HTML/CSSスニペットまでまとめてご紹介します。 グラスモーフィズムって何？ 2020年末ごろより人気が高まっているスタイルで、静かな不発トレンドとなったニューモーフィズムのプラスチックな質感に対して、すりガラスを通して覗いたような背景のぼかしが特長です。 ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ グラスモーフィズム・スタイルで押さえておきたいのが、以下の4つのポイントです。 透明度（英: Transparency）: 背景のぼかしを使用したガラスのようなエフェクト 空間に浮遊するオブジェクトを用いた
CSS Snapshot 2020 W3C Working GroupNote, 22 December 2020 This version: https://www.w3.org/TR/2020/NOTE-css-2020-20201222/ Latest published version: https://www.w3.org/TR/css-2020/ Editor's Draft: https://drafts.csswg.org/css-2020/ Issue Tracking:CSSWG Issues Repository Editors: Tab AtkinsJr. (Google) Elika J. Etemad / fantasai (Invited Expert) Florian Rivoal (Invited Expert) Suggest an Edit fo
近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
With utility/atomicCSS, we acknowledgeit’s ok to couple the structure and presentation layers: when we need to change the button color, we modify theHTML, not theCSS. This tight coupling is also acknowledged in modernCSS-in-JSReact codebases, butit seems theCSS world figured out first that the “separation of concern” of the web didn’t feel right. Specificity is also less a problem, as we u
先日の記事で春後半の夏前にリリースされるとお伝えした通り、Bootstrap 5のalpha版がついにリリースされました！ IEすべてのバージョンのサポート終了、jQueryの削除をはじめ、注目すべき新機能を紹介します。Bootstrap v5Bootstrap v5の特徴Bootstrap v5のダウンロード・インストールBootstrap v5のグリッドやコンポーネントBootstrap v5の特徴 最も注目すべき点は、jQueryへの依存がなくなり、Internet Explorerのサポートも終了したことです。ちなみに、Bootstrap 4.5ではIE10/11をサポートしています（v4.5 Supported browsers）。より高速なJavaScript、より少ない依存関係となり、よりフレンドリーなツールを構築することに重点が置かれています。 また、現時点ではア
CSSのコード記述量を減らして、効率的にスピード感を持ってWeb制作を行う助けとなるのがCSSフレームワークです。 現在公開されているCSSフレームワークの種類は非常に多く、それぞれの特徴や目的なども様々で、自分に合ったCSSフレームワークを見つけるのも大変です。 今回は、2021年現在でおすすめのCSSフレームワークをCSSフレームワークのランキングを元にご紹介していきます。それぞれの特徴や違いを理解して、目的に合わせたCSSフレームワーク選びに役立てていただければと思います。CSSフレームワークとはCSSフレームワークとは、ボタンやフォーム、レイアウトなどWebページの実装に必要なコンポーネントや機能が詰まったライブラリのようなものです。 短期間でWebサイトを実装したい場合や、デザイナー不在のチームがWebサービスを作る場合など、CSSフレームワークを利用することによってデザイン
Abstract This almost class-lessCSS library turns yourHTML document into a website that looks like a LaTeX document. Write semanticHTML, add <link rel="stylesheet" href="https://latex.vercel.app/style.css"> to the <head> of your project and you aregood togo. The source code can be found onGitHub at https://github.com/vincentdoerig/latex-css. Getting Started Add theline <link rel="stylesheet"
小林 - Webデザイナー @pulpxstyle 現場で使用してきたHTMLやCSSのTipsをモーメントにまとめました。フリーランスの私がこれまでの制作で実際に使用してきたもののみ紹介してます。 あなたの現場でも使えるものがあると思いますので、ぜひご利用ください！ ⚡️ "現場で使えるHTML&CSS Tips ①"twitter.com/i/moments/7819… 2020-04-09 09:35:06 小林 - Webデザイナー @pulpxstyle ダークモードを適用する時は『prefers-color-scheme:dark』とメディアクエリで指定する。 アプリのダークモード化が進み利用者は多い。サイトのニーズも増える可能性があるので是非おさえておきたい。 実際にコーディングしてみましたが予想より工数が多いので、予算は別途必要になりそうですね。 pic.twitter.
Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。 さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗なのが特徴です。今回はそんなCSSアイコンを500種類以上集めたcss.ggを紹介します。css.ggの使い方 一覧です。黒単色で描かれたアイコンになります。 左側にカテゴリが多数並んでいるのが分かります。 その中の一つです。CSSも公開されています。これをコピーして貼り付けるだけでCSSアイコンとして利用できます。css.ggに限りませんが、CSSアイコンの魅力としては外部リソースとして用意する必要がなく、HTMLのインラインですら利用できることでしょう。また、全部
慶應義塾大学 村田 真 1. はじめに 紙の印刷物を読むことを困難にする障害をプリントディスアビリティという。視覚障害や学習障害はこれに含まれる。 プリントディスアビリティを抱えた人に紙の書籍は読めないが、電子書籍は読める可能性がある。電子書籍なら、その人の特性に応じたやり方で情報を提示することができる。例えば、文字の大きさを変える、色を変える、音声で読み上げることができる。情報の提示方法を工夫すれば読めなかったものが読めるようになることはDAISY教科書などのプロジェクトによって実証されてきた。 アクセシブルな電子書籍によってプリントディスアビリティに対処することは、社会的合意となりつつある。EUが公布したEuropean Accessibility Act(2019)は電子書籍・電子書籍リーダ・電子書店がプリントディスアビリティに対処することを義務付けている。日本の読書バリアフリー法(
はじめにHTML+CSSコーディングにおいて、Sass管理ディレクトリを標準化する方法を紹介します。CSS設計は、サイト種別やプロジェクト規模、分業の有無や人数によっても最適解が異なります。 この仕組みは、様々な設計を同じロジックで受け入れることによって、CSSコードの管理効率を画一的に最大化する狙いのものです。 コーポレート・ポータル・ブログ・EC・LP・管理画面…など、様々な種別のサイトのCSSを、同じ仕組みで設計して管理できるようになります。 前提事項など SassなどのCSSプリプロセッサの使用を前提とします。本記事の一部は、後で見られるよう別記事として切り出しています。（📝のマークのもの） この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 セクション一覧
私のCSSはこのままでいいのだろうか、他の人はどのように取り組んでいるのか、CSSのスキルアップを考えているWeb制作者・デベロッパーに、ぜひ手に取ってほしい一冊を紹介します。本書ではCSSのさまざまな設計手法を解説するだけでなく、最適解となるコードに至るまでの思考プロセスも非常に詳しく解説されています。デベロッパーの頭の中で考えていることが言語化されており、自分のCSSを見直したい人、より効率的なCSS開発を探究している人にお勧めです。本書は、CSSの中・上級者向けの内容をていねいに詳しく解説したものです。初心者向けのブログやお店ページの例などは一切なく、モジュールベースのコンポーネントやレイアウトが主体で、プロジェクトレベルのCSS設計について解説されています。
この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。 実際のコードを見ながらサンプルを確認、編集を行うことができるので、世界基準の新テクニックを効率的にウェブ制作に採用することができます。HTML/CSSで表現できる、すごいテキストエフェクト用スニペットまとめ Fluidtext hover マウスの動きに合わせて背景の画像がぐにゃりと液体のように変化するテキストエフェクト。 See the Pen Fluidtext hover by Robin Delaporte (@robin-dela) on CodePen.SVGtextPat
フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
