[B! css] t_otodaのブックマーク

古いリセットCSSからはもう卒業！モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset

モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにモダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説

t_otoda 2023/10/05

リンク

Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに

Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。 v0 by Vercel Labs Generate UI with simple text prompts. Copy, paste, ship. Explore the prompt library and join the waitlist today.https://t.co/yaDdOfnOaJ — Vercel (@vercel) September 14, 2023 v0の作例として公開されている、プロンプトから生成されたUIをいくつか見てみましょう。下記は「A dashboard for saas app」（SaaSのダッシュボードを作って）というプロンプトで生

t_otoda 2023/09/20

CSS
techfeed

リンク

Pico CSSとは？セマンティックなHTMLを書けばCSS最小限でOK、Reactでも利用可能

7月24日、Pico CSSはReactアプリのスタイリングに革新をもたらす新しいフレームワークを発表しました。 Pico CSSは、セマンティックなHTML要素にスタイルを適用することで、カスタムCSSの記述を最小限に抑えることができます。また、ダークモードのサポートやカスタムテーマの機能など、多くの機能を提供しています。 Pico CSSは、セマンティックなHTML要素にスタイルを適用することで、カスタムCSSの記述を最小限に抑えることができる、新しいコンセプトのフレームワークです。また、ダークモードのサポートやカスタムテーマの機能など、多くの機能を提供しています。 Pico CSSは、セマンティックなHTMLにスタイルを適用することで、カスタムCSSの記述を最小限に抑えることができる最小限のCSSフレームワークです。 Pico CSSは、小規模なアプリケーションを構築する際にカス

t_otoda 2023/07/25

CSS
techfeed

リンク

Bing Chat で画面イメージからHTML/CSSの内容を生成してみる（日本語でもできました） - Taste of Tech Topics

カメラ好き機械学習エンジニアの@yktm31です。昨日、マイクロソフト主催のMicrosoft Inspireにて、Bing Chat の更新内容が発表されました。 news.microsoft.com その中でも、特に Bing Chat の﹁Visual Search in Chat﹂の機能が気になったので、早速試してみました。 Bing Chat 新機能の概要 Visual Search in Chatは、画像から文脈を解釈し答えを返してくれる生成AI機能です。旅行先で見かけた建築物について知りたいときや、冷蔵庫の中身からレシピを考えたいときなど、 Bing Chatに画像をアップロードするだけで、ウェブの知識を活用して回答される、とのことです。バックエンドで動くモデルは、OpenAIのGPT-4モデルのようです。デモでは、手書きの絵からHTML/CSSのコードを生成する例が

t_otoda 2023/07/21

リンク

Bootstrap 4.1

The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Two months ago we shipped the first major release of Bootstrap 4 and we’re thrilled y’all love the latest release and our brand new themes so much. Today we’re shipping our first minor release, v4.1! This release comes later than expected and some of the fixes we inten

t_otoda 2018/04/10

リンク

ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

t_otoda 2016/02/16

リンク

[意訳]グローバルCSSの終焉 - Qiita

このポストは以下の記事の意訳です。 The End of Global CSS 何か間違いなどありましたら、ご指摘いただけると幸いです。 (以下、訳) CSSセレクタはすべて同じグローバル空間に存在しています。 CSSに触れた人は皆、以下のような見解に至っていることでしょう。 CSSの考えはドキュメントの時代に設計されたもので、今ではモダンなウェブアプリケーションのためのマトモな開発環境を提供することが困難であると。全てのセレクタには意図しない副作用を起こす可能性があり、期待と違う要素にスタイルが適用されてしまったり、他のセレクタと競合してしまったりします。さらに驚くべきことに、セレクタはグローバル空間で詳細度の競争に負けることもあり、ページのデザインに全く影響を持たなくなることだってあり得るのです。 CSSファイルを変更する時はいつでも、スタイルが適用されるグローバル空間について慎重に

t_otoda 2016/02/09

css

リンク

Flexboxでどういうレイアウトができ、各プロパティはどのように挙動するのかがよく分かる -Flexbox playground

2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。IE11を対象した際に、Flexboxの導入を考える制作者も多いと思います。 ※Vistaは2017年にサポート終了（参考: Windows製品のライフサイクル） Flexboxでどういうレイアウトができるのか、各プロパティはどのように挙動するのかが分かるFlexbox playgroundを紹介します。 Flexbox playground Flexbox playgroundはページの埋め込みにも対応しており、Flexboxのコンテナとアイテムの各プロパティがどのような挙動をするかよく分かると思います。 Flexboxの各プロパティの詳しい解説は、下記ページをご

t_otoda 2016/02/09

html
CSS

リンク

write once, publish anywhere ……という夢を見た。

商業品質の紙書籍と電子書籍の両方を作るというミッションを数年来継続し、得られた知見・経験を紹介する。Read less

t_otoda 2015/08/29

リンク

プログラム組んだら負け！実はHTML/CSSだけでできること2015夏

本スライドは、弊社の梅本により弊社内の技術勉強会で使用されたものです。近年注目を集めるアーキテクチャーである﹁Transf ormer﹂の解説スライドとなっております。 "Arithmer Seminar" is weekly held, where professionals from within and outside our company give lectures on their respective expertise. The slides are made by the lecturer from outside our company, and shared here with his/her permission. Arithmer株式会社は東京大学大学院数理科学研究科発の数学の会社です。私達は現代数学を応用して、様々な分野のソリューションに、新しい高度AIシステム

t_otoda 2015/07/26

リンク

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS︵Cascading Style Sheets、カスケーディング・スタイル・シート︶を利用します。しばしばページに変化︵英: Transition︶やアニメーション︵英: Animation︶を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。ディズニー社の現場で長年培われた、アニメーションの基本原則12個︵英: 12 Principles of Animation︶

t_otoda 2015/06/02

リンク

CSSが破綻する4つの理由 - Qiita

前回の「破綻しにくいCSS設計の法則 15」は思いがけず大変なご好評をいただきました。ただ書いた当人としては、まとまりに欠けていたように思えましたので、今回はもう少し本質的なところを書いてみたいと思います。 CSSとは実際のところ何か CSSが破綻する理由破綻しないCSS設計とは 1. CSSとは実際のところ何か CSSはJSONと同様にシンプルなフォーマットで、基本的には以下のような構造になっています。

t_otoda 2015/05/01

css

リンク

2015年2月の、これだけは押さえておきたいWeb関連の動き

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。コーディング HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント（1/3）：CodeZine Webブラウザー、Dreamweaver CC 2014、Brackets などで利用できる、PSD の Extract（抽出）機能は、最近私もWebブラウザー版と Brackets で利用してみましたが、なかなか便利で、コーディングが速くなると感じました。たとえば、長方形シェイプレイヤーをクリックで選択した状態で、CSS で ba… と入力開始すると、background: #f00; のように、今選択しているシェイプの

t_otoda 2015/03/03

リンク

CodePen - Front End Developer Playground & Code Editor in the Browser

Build, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.

t_otoda 2015/02/21

リンク

MediumのCSSはこの上なく最高！ | POSTD

自分は常に最高であれって思っている。最高の香りを身にまとい、最高の振る舞いをする。ごみ1つ捨てるのだって、ほかの誰よりイカしてなきゃ。 ―Lil Wayne ずっと長いこと恥も外聞も知らずに、MediumでCSSについて執筆しようと思っていました…。それからどうなったって？　違うことをやっていた？　何てこと、どうやったら同じことができるかって？　やり方を教わりたいって？これから書くことは私たちのCSSについての覚書で、これまでに歩んできた道のりと現在のCSSについて述べています。始まり︵これまでの道のり︶だいたい2年ほど前、私はソフトウェアアプリケーション開発と︵皆さんが読んでくれているといいのですが︶ medium.com に取り組むためにObvious Corp.に加わりました。その時、Mediumは、すでに一連の”スタイル更新”を行っていました︵スタイル更新とはデザイナ

t_otoda 2014/09/18

リンク

ロールオーバーのいろいろなやり方

「やさしさゴシック」を使いたかっただけなんです！ "ロールオーバーのいろいろなやり方 - しるろぐ" http://ofsilvers.hatena blog.com/entry/rollover-codingRead less

t_otoda 2014/09/14

リンク

コーディングガイド by @mdo

HTMLシンタックスインデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </

t_otoda 2014/09/06

リンク

Bootstrap 3.1.0 released

The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today we’re stoked to ship Bootstrap v3.1. We’ve got a handful of new features, plenty of bug fixes and improvements, and updated build tools. New docs We’ve made tons of changes across the board, most notably to our documentation. Just like v2.1 brought a brand new de

t_otoda 2014/01/31

リンク

FINDJOB!終了のお知らせ | FINDJOB!

FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから約26年間、多くの方々に支えていただき、運営を続けてまいりました。転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、今後も、IT/Web業界やクリエイティブ

t_otoda 2014/01/05

リンク

JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例

JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例佐川夫美雄︵Ashiras, inc.︶フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明

t_otoda 2013/11/07

リンク

はてなブックマーク

タグ

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

cssに関するt_otodaのブックマーク (22)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス