タグ

関連タグで絞り込む (6)

タグの絞り込みを解除

cssとWEB制作に関するfashiのブックマーク (11)

  • 令和のHTML / CSS / JavaScriptの書き方50選


    Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は﹁2024年のWeb制作ではこのようにコードを書いてほしい！﹂という内容をまとめました。 質より量で、まずは﹁こんな書き方があるんだ﹂をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
    令和のHTML / CSS / JavaScriptの書き方50選

  • コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する

    本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま

    コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する

  • ゲーム感覚でプログラミング学べるサービス集 - Qiita


    はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を﹁使える技術﹂として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる﹁ぷよぷよプログラミング﹂です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時
    ゲーム感覚でプログラミング学べるサービス集 - Qiita
    fashi
    fashi 2022/07/01
    まず英語
    リンク

  • 劇薬の The New CSS Reset - kojika17

    新しいプロパティを使ったCSSリセットが紹介されていましたが、扱いが難しそうな印象だったので解説します。 The New CSS Reset とは The New CSS Reset | the-new-css-reset は、簡潔にいうと all: unset で、全ての要素に対してブラウザのデフォルトのスタイルシート（UAスタイルシート）を亡き者にした後に、 display: revert でUAスタイルシートのdisplayの値を蘇生させたCSSリセットです。 /*** The new CSS Reset - version 1.0.0 (last updated 8.7.2021) ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */ *:

    劇薬の The New CSS Reset - kojika17

  • 現代開発者のためのCSS基礎技術 - Qiita


    ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには﹁CSSとは何か﹂を学ぶ教材はたくさんあっても、﹁CSSをどうやってうまく使うか﹂についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は﹁CSSをうまく使う技術﹂に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
    現代開発者のためのCSS基礎技術 - Qiita
    fashi
    fashi 2020/07/06
    「アクセシビリティうんぬんは置いておいて、要素の状態をあらわす標準化された技術だと考える」WAI ARIAの後にカスタムデータ属性来るとWAI ARIA使わなくていいのでは？って気がしてくる
    リンク

  • フロントエンドエンジニア御用達の MDN web docs を網羅した


    このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし﹁アレどこだっけなぁ？﹂を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
    フロントエンドエンジニア御用達の MDN web docs を網羅した

  • フロントエンドの「想定外」に対応する考え方とTipsいくつか


    とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純︵後述︶だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！　と思いました。 フロントエンドの想定外 ウェブサイト
    フロントエンドの「想定外」に対応する考え方とTipsいくつか
    fashi
    fashi 2018/07/05
    「Cookieが無効なだけで「全く」動かなくなってしまうウェブサイトのほとんどは、Web Storageを読み書きするときに起きる例外が原因」
    リンク

  • 死んだCSSを見つける方法 - Qiita


    使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に﹃未使用CSS ( unused CSS ) ﹄ではなく﹃死んだCSS ( dead CSS ) ﹄というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
    死んだCSSを見つける方法 - Qiita

  • UIのビジュアルデザインにおけるちょっとしたコツをまとめた「Little UI Details」

    TightenやLaravelのデザインを担当したSteve Schoger(@steveschoger)さんによる、ビジュアルデザインにおけるコツをまとめたモーメント「Little UI Details」が公開されています。 Little UI Details https://twitter.com/i/moments/880688233641848832 明るい背景色上に白色のテキストを追加する場合、微妙に影を付けると、文字が見えやすくなるだけでなくよりポップになります。 Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more. pic.twitter.com/p9rudeFxvP— Steve Scho

    UIのビジュアルデザインにおけるちょっとしたコツをまとめた「Little UI Details」

  • Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】| TechAcademyマガジン


    Webデザインの知識がなくてもOK！Bootstrapの使い方︻入門者向け︼ HTML/CSSといったWebデザインの知識がない人でもわかる︻Bootstrap︼の使い方。Bootstrapのダウンロード方法、サンプルコードがあってすぐに実践可能。グリッドシステムやテーブルなどの使い方あり。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール﹁テックアカデミー﹂が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元‥GMOリサーチ株式会社　調査期間‥2021年8月12日～8月16日　 調査対象‥2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法‥インターネット調査 独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なB
    Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】| TechAcademyマガジン

  • 文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA


    游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事﹁Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ﹂を参考ください。 ▲左側は未指定︵和文等幅︶の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境‥ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
    文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.