サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
ウェブの本質から考える ウ ェ ブ の本 質 か ら 考 え る Thinking from the Web's Essence grip on minds は、コーディングを専門とするフリーランスのフロントエンドエンジニアです。 ウェブ標準、アクセシビリティ、パフォーマンスに重点を置いた開発でプロジェクトをサポートします。 コーディング品質 ウェブ標準に則ったHTML、CSS、JavaScript のコーディングにより、柔軟性と堅牢性を併せ持った高い品質のウェブサイトを制作します。 アクセシビリティ重視 できるだけ多くの人がウェブサイトを利用できるように、アクセシビリティの確保に最大限配慮してコーディングします。 パフォーマンス最適化Google の検索順位アルゴリズムの一部である、CWV（Core Web Vitals）を中心に、パフォーマンス最適化に積極的に取り組みます。 SS
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。Chrome 123 beta New inChrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめにCSSのlight-dark()カラー関数CSSのdisplay-modeでpicture-in-p
CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 2019 8/15 今回は、レスポンシブで絶対にお世話になるCSSの メディアクエリ（Media Queries）について。基本的な書き方や記述の意味についてまとめていきます。 なんとなく @medeia screen and ... とか書いているけど、 screenってどういう意味？とか、そんなレベルの話です。メディアタイプ・メディア特性・区切り方やそのキーワードの意味など...。 先日、 @media only screen...という書き方を目にした時に onlyの意味がわからず、それだけを調べるつもりが、結構知らないことがあってびっくりしました。 今までがいかに「何となく」だったかを痛感し、せめて基本的なことくらい分かっておこうと思った次第です。 はじめに 今回
大雨による被害への対応と寄付のお願い 2025年8月より、各地で発生している大雨で被災された皆さまならびにご家族の皆さまに心よりお見舞い申し上げます。
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) ModernCSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) ModernCSS Resetの前のバージョンも解説しています。2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
Never waste Hours on finding the perfect Color Palette again!
A handpicked collection of beautiful color gradients for designers and developers
世界で最も人気のあるフレームワークBootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。 はじめる あなたのプロジェクトにBootstrap を素早く追加したいですか？無料のオープンソース CDN である jsDelivr をご利用ください。パッケージマネージャを使用していたり、ソースファイルをダウンロードする必要がありますか？ダウンロードページへをご覧ください。CSS スタイルシート <link> をコピーして、他のスタイルシートの前にある <head> に貼り付けて、CSS を読み込みます。 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384
Strikingly thin and fast so you can work, play, orcreate anywhere.
Hi! Design https://hi-designinc.com/ Hi! Designは、森田賢吾によるブランディングをメインとするデザイン会社です。ハイクオリティでコミュニケーション力の高いデザインを生かしたブランディングを提案しています。
日本語対応！CSS Flexboxのチートシートを作ったので配布しますFlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。 Web クリエイターボックスでは以前から Flexbox の使い方について紹介してきたのですが、最近 Flexbox が浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ 動画で学ぶCSS Flexbox この記事は YouTube 動画でも解説しています。動画派の方
The World Wide Web Consortium (W3C) develops standards andguidelines to help everyonebuild a web based on the principles of accessibility, internationalization,privacy andsecurity. Working with stakeholders of the web A range of organizationsjoin the World Wide Web Consortium as Members to work with us to drive the direction of core webtechnologies and exchange ideas with industry and resear
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
