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
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログ
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ����View in English � �Always switch to English CSS カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。 例えば、ウェブページ内の見出し番号を自動的に振ったり、順序付きリストの番号を変更したりするのに使用することができます。 カウンターは本質的に、 CSS が管理する変数であり、 CSS のルールによって増加・減少し、何回使用されたかを追跡するものです。 名前付きカウンターを定義したり、あらゆる順序付きリストで既定で生成される list-item のカウンターを操作したりすることもできます。 カウンターは親要素から継承継承したり、前の兄弟から受け取ったりします。
HTML validator を使用して、 CSS の問題を発生させているページ上の不正なマークアップがないかを確認します。 CSS validator を使用して、正しくない形式の CSS コードがないか調べます。 ブラウザーの開発者ツールを使用して、ページ上の HTML 要素に適用されているCSSを検査します。 適用された CSS を変更して、希望する結果を得るためにどの変更が必要かを把握します。これには、宣言の有効化と無効化、数値の変更、新しい宣言の追加などが含まれます。 ブラウザーの開発者ツールの使い方 ブラウザーの開発者ツールとはの記事は、さまざまなブラウザーやプラットフォームでツールにアクセスする方法を説明する最新のガイドです。ほとんどの場合、特定のブラウザーで開発することを選択し、そのブラウザーに含まれるツールに最も慣れ親しむことになるかもしれませんが、他のブラウザーでのアク
最近JavaScriptフレームワークについて色々指標のようなものを提示するブログが流行っているようだ。適材適所のもと、これは大規模向きとか小規模向きとか早いだの遅いだの。加え「gitなんか覚えなくたって死なない」とか、UXうえい！みたいな話だと思いきや内容がUIに限ったこととか。 一体最近のフロントエンドはどうなってるんだ？という雰囲気になってきましたので、少しメモ的に書きました。 JavaScriptフレームワークについて JavaScriptフレームワークの状況を見ると（フレームワークかライブラリかの議論は置いておき） DOM Web Components Virtual DOM に分かれます。JavaScriptフレームワーク初期の頃はDOMを直接操作するものが多く出現してきましたが、レスポンスなど扱いに難しい面もあり、他のアプローチが考案されました。それがWeb Compoent
公開日2014-12-10タグAdvent CalendarCSSCSS Architecture Advent Calendar 2014の 10 日目。 それまではけっこう頑張っていた。スタイルガイドも作っていた。デザイナーとコミュニケーションをとり、拡張性のあるパーツを作っていった。新しく触る人にも読み方や使い方を説明できるようにしていた。 崩壊は UI デザイナーがいなくなった時に始まった。汎用ボタンは使われなくなった。決まったルールのデザインエッセンスはなくなった。要素間の空白は誰かの感覚で変わった。 なぜ止めることができなかったのか。それは、デザインの改修が少しずつ行われたからだと思う。その改修はいつのまにか始まり、いつ終わるとも決まっていなかった。あらゆるパターンが同居するデザインを CSS は管理できない。改修途中でも平気でブランチが切られていく。デザイナーがやりたい時にや
Web上の視覚的なスタイルを指定するCSSは、あまりにも複雑で、恐らく今までに一度も正確に実装されたことはないだろう。それにもかかわらず、バージョンが上がるにつれて、その複雑さは増すばかりだ。一方で、CSSではできることが限られており、初歩的なデザインでさえ不可能であるか、あるいは法外に難しいことも少なくない。加えて状況依存的（または計算的）な側面を持つものは、すべて外部で対応しなければならないという有様だ。その結果、CSSに関するほとんどの手引きでは、希望する外観に何とか近づけたり、非互換性を回避したりするための頼りないハックに多くの労力が費やされている。 – Bret Victor 私は近年、クライアントサイドの開発技術を数多く見てきました。そして、その中でも特に興味深いと思ったのが Elm です。関数型のプログラミング言語としては、Elmはそれほどワクワクするようなものではありません
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました イベント告知をオンラインで行うことが増えてきました。むしろイベントをオフラインだけで告知する方がありえないかも知れません。ソーシャルメディアを使って広め、イベントを盛り上げていかなければなりません。 しかしWebサイトを作る知識、ソーシャルメディア対応、スマートフォンやタブレットなども考えたりすると告知サイトを作るのも大変なことです。そこで使ってみたいのがOSHIRASEです。 OSHIRASEの使い方 OSHIRASEはイベント告知サイトのためのHTMLテンプレートです。 OSHIRASEはイベントの告知などで使える必要な要素をすべて備え、さらにFacebookのOpenGraphなど技術的に難しい作業も簡単にできるようにテンプレート化されています。スマートフォンももちろん対応し
（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のポストプ
訳注 これは超訳です。 CSSLintは「なんでこんなルールなんだ…」とイラっとすることが多いですけど、それぞれにそれなりに理由があります。まぁ勿論無視するべきなルールとかもあります。例えば見出し要素の再定義禁止とかはHTML5に対するCSSなら無理な話です。そんなわけでどんな理由なのかを簡単に訳しました。無視するかどうかは自分で決めましょう！ この訳はCSSLintと同じライセンスで提供されます。 Possible Errors Beware of box model size 枠線とパディングはwidthやheight等に含まれないので、同時に指定すると多分君が思ってもみない結果になるよ。だから警告するんだ！ Rule ID: box-model Require properties appropriate for display もちろんあるセレクタに対してどんなCSSプロパティを一
extractCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 スタイルシートの記述法は幾つかあります。linkタグで外部ファイル化、styleタグでインラインに表示、そしてstyle要素でタグごとに指定する方法です。styleタグに書き込まれてしまったスタイル設定を一気に書き出してくれるのがextractCSSです。 トップページです。まず右側に現状のHTMLソースを入力します。 そしてExtractボタンを押すとスタイルシートが出力されます。 入れ子向上も適切に処理されています。 extractCSSではID/クラスを自動的にピックアップして生成していますので空っぽの指定が相当数生成されることになると思います。それらを必要に応じてフィルタリングするようにすればスタイルシートのベースとして使えるのではないでしょうか。 MOONGIFTはこう見る
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
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は本来、必要のないフォーマットである。すでに、HTMLやCSSといったドキュメントや表現方法の記述言語は、直接使うことができるのだから、それを使って書けばいいのだ。現に今読んでいるこの文章は、HTMLやCSSを直接使っているではないか。もちろん、通信経路で圧縮することはできるとしても、それは通信経路の話だ。複数のデータをまとめる必要があるにしても、アーカイバや圧縮方式には多数の有名なフォーマットがあるので、どれかを使えばよい。書籍のような広範な表現方法をもつもののパッケージ方法をひとつに定めることは不可能だ。 大抵のEP
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
