タグ

cssとCSSに関するatsushifxのブックマーク (30)

  • GitHub - lowlighter/matcha: 🍵 Drop-in semantic styling library in pure CSS.

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - lowlighter/matcha: 🍵 Drop-in semantic styling library in pure CSS.
  • HTML,CSS初めて1ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita

    HTML,CSSだって難しいよ!」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな?で始めたサイト制作(コーティング)もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第1版』 注意 作者自身もプログラミング初めて1ヶ月の超初心者です。HTMLCSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を

    HTML,CSS初めて1ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
    atsushifx
    atsushifx 2024/05/26
    HTML.CSS用のユニットテストとスタイルガイド、標準的なネーミングが決まっていると、かなりBugが減りそうな気がする。GitHub漁れば、テスティングフレームワークはありそう
  • CSS カウンターの使用 - CSS: カスケーディングスタイルシート | MDN

    CSS チュートリアル CSS の基 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    CSS カウンターの使用 - CSS: カスケーディングスタイルシート | MDN
  • CSS のデバッグ - ウェブ開発を学ぶ | MDN

    完全な初心者はこちらから!ウェブ入門ウェブ入門基的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基CSS の基JavaScript の基ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH

    CSS のデバッグ - ウェブ開発を学ぶ | MDN
  • GitHub - elad2412/the-new-css-reset: The New Simple and Lighter CSS Reset

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - elad2412/the-new-css-reset: The New Simple and Lighter CSS Reset
  • 最近のJavaScriptフレームワークの評価とか - albatrosary's blog

    最近JavaScriptフレームワークについて色々指標のようなものを提示するブログが流行っているようだ。適材適所のもと、これは大規模向きとか小規模向きとか早いだの遅いだの。加え「gitなんか覚えなくたって死なない」とか、UXうえい!みたいな話だと思いきや内容がUIに限ったこととか。 一体最近のフロントエンドはどうなってるんだ?という雰囲気になってきましたので、少しメモ的に書きました。 JavaScriptフレームワークについて JavaScriptフレームワークの状況を見ると(フレームワークかライブラリかの議論は置いておき) DOM Web Components Virtual DOM に分かれます。JavaScriptフレームワーク初期の頃はDOMを直接操作するものが多く出現してきましたが、レスポンスなど扱いに難しい面もあり、他のアプローチが考案されました。それがWeb Compoent

    最近のJavaScriptフレームワークの評価とか - albatrosary's blog
    atsushifx
    atsushifx 2015/03/17
    最後の1行につきる。触ってみたではなく、きちんと使ってみるのが大事。プログラマー、デザイナーにかぎらずクリエイティブ職なら同じこと
  • 僕はCSSを見殺しにした - dskd

    公開日2014-12-10タグAdvent CalendarCSSCSS Architecture Advent Calendar 2014の 10 日目。 それまではけっこう頑張っていた。スタイルガイドも作っていた。デザイナーとコミュニケーションをとり、拡張性のあるパーツを作っていった。新しく触る人にも読み方や使い方を説明できるようにしていた。 崩壊は UI デザイナーがいなくなった時に始まった。汎用ボタンは使われなくなった。決まったルールのデザインエッセンスはなくなった。要素間の空白は誰かの感覚で変わった。 なぜ止めることができなかったのか。それは、デザインの改修が少しずつ行われたからだと思う。その改修はいつのまにか始まり、いつ終わるとも決まっていなかった。あらゆるパターンが同居するデザインを CSS は管理できない。改修途中でも平気でブランチが切られていく。デザイナーがやりたい時にや

    atsushifx
    atsushifx 2014/12/10
    技術的負債というかデザイン的負債というか。cssがリードエンジニア任せでなく各デザイナー間で共有、調整できる仕組みが必要なんだろうな
  • 抽象化と組み合わせができるレイアウト言語があれば、CSSは必要ない | POSTD

    Web上の視覚的なスタイルを指定するCSSは、あまりにも複雑で、恐らく今までに一度も正確に実装されたことはないだろう。それにもかかわらず、バージョンが上がるにつれて、その複雑さは増すばかりだ。一方で、CSSではできることが限られており、初歩的なデザインでさえ不可能であるか、あるいは法外に難しいことも少なくない。加えて状況依存的(または計算的)な側面を持つものは、すべて外部で対応しなければならないという有様だ。その結果、CSSに関するほとんどの手引きでは、希望する外観に何とか近づけたり、非互換性を回避したりするための頼りないハックに多くの労力が費やされている。 – Bret Victor 私は近年、クライアントサイドの開発技術を数多く見てきました。そして、その中でも特に興味深いと思ったのが Elm です。関数型のプログラミング言語としては、Elmはそれほどワクワクするようなものではありません

    抽象化と組み合わせができるレイアウト言語があれば、CSSは必要ない | POSTD
    atsushifx
    atsushifx 2014/09/10
    デザイナーでもプログラマーでも保守的な人やレガシーなプロダクトに悩まされるのは一緒。それにWebアプリだとブラウザ毎の差異もある。elmだけでは解決にならないだろう
  • OSHIRASE - 告知サイト用HTMLテンプレート

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました イベント告知をオンラインで行うことが増えてきました。むしろイベントをオフラインだけで告知する方がありえないかも知れません。ソーシャルメディアを使って広め、イベントを盛り上げていかなければなりません。 しかしWebサイトを作る知識、ソーシャルメディア対応、スマートフォンやタブレットなども考えたりすると告知サイトを作るのも大変なことです。そこで使ってみたいのがOSHIRASEです。 OSHIRASEの使い方 OSHIRASEはイベント告知サイトのためのHTMLテンプレートです。 OSHIRASEはイベントの告知などで使える必要な要素をすべて備え、さらにFacebookのOpenGraphなど技術的に難しい作業も簡単にできるようにテンプレート化されています。スマートフォンももちろん対応し

    OSHIRASE - 告知サイト用HTMLテンプレート
    atsushifx
    atsushifx 2014/07/16
    いわゆる同人イベント告知サイト用のテンプレート。無論、別なイベントでも問題ないが、ビジュアルメインなのでイラストがないとつらい
  • CSSポストプロセッサーの必要性 - morishitter blog

    (postcss嫌いだけど)— CSSきれいに書くマン (@m0rishitter) 2014, 7月 8 @m0rishitter why you hates PostCSS? :)— Andrey Sitnik (@andreysitnik) 2014, 7月 8 PostCSSというかCSSのポストプロセッサーにいろいろ思うところがあったのでツイートしたら、作者のai氏からリプライ来て震えた。 ai氏はベンダープレフィックスを自動で付与するツール、Autoprefixerを作ってる人。 Autoprefixerはもともとreworkというプリプロセスを定義するフレームワークを使ってたけど、Autoprefixerがやってることはプリプロセスっていうよりポストプロセスじゃね?って考えてreworkとほぼ同機能のPostCSSを作ってそれに乗り換えた。 PostCSSは、CSSのポストプ

    CSSポストプロセッサーの必要性 - morishitter blog
    atsushifx
    atsushifx 2014/07/10
    中身とは関係ないがITエンジニアが英語を勉強するためのいい例になっている。プログラミングやOSSが世界共通である以上、作成者と議論するには英語がないと文字通り話にならない
  • txt for humans

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    txt for humans
  • CSSLintのRulesの超訳 | Roughdraft.io

    訳注 これは超訳です。 CSSLintは「なんでこんなルールなんだ…」とイラっとすることが多いですけど、それぞれにそれなりに理由があります。まぁ勿論無視するべきなルールとかもあります。例えば見出し要素の再定義禁止とかはHTML5に対するCSSなら無理な話です。そんなわけでどんな理由なのかを簡単に訳しました。無視するかどうかは自分で決めましょう! この訳はCSSLintと同じライセンスで提供されます。 Possible Errors Beware of box model size 枠線とパディングはwidthやheight等に含まれないので、同時に指定すると多分君が思ってもみない結果になるよ。だから警告するんだ! Rule ID: box-model Require properties appropriate for display もちろんあるセレクタに対してどんなCSSプロパティを一

    CSSLintのRulesの超訳 | Roughdraft.io
  • Myth - CSS the way it was imagined.

    This domain is registered and protected by Markmonitor More than half the Fortune 100 trust Markmonitor to protect their brands online.

  • 既存のHTMLからID/クラスを抜き出してCSSを生成·extractCSS MOONGIFT

    extractCSSJavaScript製のオープンソース・ソフトウェア(MIT License)です。 スタイルシートの記述法は幾つかあります。linkタグで外部ファイル化、styleタグでインラインに表示、そしてstyle要素でタグごとに指定する方法です。styleタグに書き込まれてしまったスタイル設定を一気に書き出してくれるのがextractCSSです。 トップページです。まず右側に現状のHTMLソースを入力します。 そしてExtractボタンを押すとスタイルシートが出力されます。 入れ子向上も適切に処理されています。 extractCSSではID/クラスを自動的にピックアップして生成していますので空っぽの指定が相当数生成されることになると思います。それらを必要に応じてフィルタリングするようにすればスタイルシートのベースとして使えるのではないでしょうか。 MOONGIFTはこう見る

    既存のHTMLからID/クラスを抜き出してCSSを生成·extractCSS MOONGIFT
  • ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL

    俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ!! t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって

    ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
    atsushifx
    atsushifx 2013/07/29
    名前で悩むのはどこも同じか。参考になりそうだし読んでみよう
  • Topcoat

    CSS for clean and fast web apps. Soooo Fast!Performance is our #1 goal. Every component we design is benchmarked for performance. You can see our results. Components GaloreWe have the building blocks to get you up and running fast. Our growing set of components were born from CSS. ThemeableIs that even a word? It should be! We love our theme, but we don’t want to hit your brand over the head with

  • 邪悪なEPUBを支援してはならない

    のEPUBの策定団体が、時間の問題で政府の支援を受けられないから支援してくれといっているが、支援してはならない。なぜならば、EPUBは邪悪だからだ。 EPUBの規格は、設計的な欠陥であるDRMを利用を許可している。これは許しがたい蛮行であり、人道上の罪である。 EPUBは来、必要のないフォーマットである。すでに、HTMLCSSといったドキュメントや表現方法の記述言語は、直接使うことができるのだから、それを使って書けばいいのだ。現に今読んでいるこの文章は、HTMLCSSを直接使っているではないか。もちろん、通信経路で圧縮することはできるとしても、それは通信経路の話だ。複数のデータをまとめる必要があるにしても、アーカイバや圧縮方式には多数の有名なフォーマットがあるので、どれかを使えばよい。書籍のような広範な表現方法をもつもののパッケージ方法をひとつに定めることは不可能だ。 大抵のEP

    atsushifx
    atsushifx 2012/10/05
    HTMLを使っているからといってもWebサイトと電子書籍は別物。問題は、電子書籍がデバイス、サプライヤ、ネットなどのリソースからフリーであることだろう
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    atsushifx
    atsushifx 2010/11/01
    タイトルのみで詭弁としか見えない。「Webの親和性」だけとりあげるんじゃ正しい論説じゃないでしょ
  • オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」|linker journal|linker

    The domain name Linker.in is for sale A great idea deserves a great domain name!

    オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」|linker journal|linker
  • SlickMap CSS: A Visual Sitemapping Tool for Web Developers | Astuteo™

    Slickmap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It's suitable for most web sites – accommodating up to four levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. Features and Benefits Eliminates the need for additional softwarePlan s

    SlickMap CSS: A Visual Sitemapping Tool for Web Developers | Astuteo™
    atsushifx
    atsushifx 2010/07/26
    サイトマップ専用のCSSフレームワーク