前置き CSSでの余白の取り方について、後輩に「margin-topとmargin-bottomどっち派ですか？」と聞かれたので、 回答内容を記事として残します。 昔、会社のOJTで学んだことの共有となります。 1. 基本的にmargin-topを使う 理由としては、そちらの方が後々調節しやすいからです。 また、後述の優先度で設定していけば、margin-bottomの出番はほぼなくなります。 2. どうしても無理な場合にbottomを使う margin-bottomは他の方法ではどうしても設定が無理なケースのみ使いましょう。 3. 隣接セレクタをうまく使うとトルツメしやすい 特定の要素同士が並んだ時だけマージンを取る＝余白の打ち消し設定が不要になります。 設定の優先度 要素がいくらネストしても下記の優先度は変わりません。 この優先度で余白を設定していけば、margin-bottomの出番

前回アンパンマンをCSSでお絵描きしました。 CSSだけでお絵描き（CodePen） 今までCSSアニメーションをあまり使ったことがなく、使ってみたかったので 勉強がてら、CodePenで1つ作ってみました。 今回も記録用です。 CSSで404ページを作りました。画像は使用してないです。 ページがないのはいたずらされたってことにすればいいじゃない...というコンセプトで ※スマホで見るとひどいのでオススメしないです( ；∀；)... See the Pen CSS 404page Halloween by Deren (@deren2525) on CodePen. CSSアニメーションを使用したところ 今回4つのモジュールにアニメーションを加えました。 全部シンプルです。 コウモリ おばけ 館の窓 墓 以下、アニメーション部分のみ抜粋したものを書きます。 コウモリ コウモリの動きです。上

はじめに 既存のコードに対してCSSLintを走らせてCSSのチェックをしてみると結構色々な警告が出ていました。 本記事はCSSLintのルールをベースにして、CSSはこう書いた方が 保守・再利用・拡張しやすい 、またこう書くと 破綻しにくい というポイントを紹介していきます。 CSSLintとは その名の通り、CSSのLinterです。 CSSに問題点ないか自動でチェックしてくれるツールです。 CSSLintにはルールが存在して「この書き方はちょっとなぁ・・・」という箇所を警告してくれます。 警告されたものの「このコードの何がダメ？」「どう直せば良い？」などパッとわからなかったところがありました。 本記事では、公式の ルール を元に説明を加えていきます。(一部、紹介する順番を公式と変えている部分がありますが内容は同じです) また、ブラウザ版( http://csslint.net/ )も

This project is a comprehensive CSS font-feature-settings demo for OpenType features, a refined version of Syntax for OpenType features in CSS by Adobe, licensed under CC BY-NC-SA 3.0. Featured fonts listed below are hand-picked with high quality. If you find some cool fonts with specific OpenType features support or want to add missing OpenType features, feel free to contribute it on GitHub. Buil

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

0.はじめに 対象者 CSS初心者 既存コードをコピペしてCSS書いている人 前提知識 CSSの書式 IDセレクタ、クラスセレクタ、タイプセレクタ 前回の勉強会スライドHTMLの基礎 を読んだ人 伝えたいこと CSSセレクタの種類 CSSの優先度 参考図書 演習で力がつく HTML/CSSコーディングの教科書 目次 CSSとは CSSセレクタの種類 優先順位 1. CSSの概要 CSSとは 「Cascading Style Sheets」の略。 文章の見た目を表現する。 Cascadingの意味 Cascadingとは、「階段状の滝のような」「連鎖的に伝わる」という意味ですが、 様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用されます。 このようにスタイル指定が段階的に引き継がれて文書に適用されるのがCSSの大きな特徴です。 http://www.ht

/* ========================================================== */ /* ここから下がメニューの設定 */ /* ========================================================== */ /* メニューのON/OFFを保存する為のチェックボックス 非表示 */ #menuOn{ display : none } /* 隠しメニューを表示したとき用のスペーサー */ /* なのでデフォルトでは非表示 */ #menuOn + menu + div.spacer{ display : none; } /* 隠しメニューを表示時のメニューの設定 */ /* absolute指定を行い、高さも与える */ #menuOn:checked + menu{ height : calc(100

2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約　CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │　├ scss │　│　├ lib ... 外部ライブラリなど │　│　├ sprite ... spritesmith などで生成したファイル │　│　├ foundation (base) ... 変数や mix

バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/

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

@mixin lineClip($line-number: 2, $line-height: 1, $right-space: 1em, $background-color: #ffffff) { position: relative; overflow: hidden; height: calc(#{$line-number + em } * #{$line-height}); padding-right: $right-space; line-height: $line-height; background-color: $background-color; &:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: $right-space; } &

本連載では、Enduring CSSというCSS設計方法論を紹介します。Enduring CSSは、Ben Frain氏の著書で、末永く破綻させずにサイトのCSSを設計するにはどうすればよいか。その方法論をまとめたものです。電子書籍でも販売していますが、Webサイトで全ての内容が公開されていますので、無料で全内容を確認可能です。 Enduring CSS by Ben Frain [Leanpub PDF/iPad/Kindle] Architect CSS and scale CSS with the ECSS CSS methodology CSS設計方法論（CSS methodology）と言うと、OOCSS、BEM、SMACSSの3つが著名なものと言えるのではないでしょうか。 An Introduction To Object Oriented CSS (OOCSS) – Smas

僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて

最近新たに色々なCSSの設計が提唱されているので、学習を兼ねて簡単にまとめました。 どれも実際に実践してないものばかりなので、表面を舐めたいなくらいの気持ちで読んでください。 ググればもっと詳しく解説してくれている良記事があります。 以降のCSS設計へ影響を及ぼした３大アーキテクチャ 派生したCSSの設計たちは、ほぼこれらの考え方に影響を受けている。 はじめに簡単におさらい。 OOCSS 米Yahoo!のNicole Sulivan氏提唱。 構造と見た目を切り分けて考える。オブジェクト指向型CSS。 .box { width: 100px; height: 100px; } .box-red { background-color: red; } .box-blue { background-color: blue; }

<p> このクラス当てたら、<span class="underline">underlineと違って太さも変えられる</span>し、蛍光ペンみたいで好き。 </p> p span.underline{ display:inline-block; box-shadow:0 -10px 0 -4px rgba(255,0,0,0.4) inset; /* ↑　ここのサイズ変えたら色々 */ } Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

作成：2016/11/21 更新：2016/11/21 Web制作 > モダンなフォームを作るために覚えておきたい擬似クラスをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 疑似クラスとは 疑似クラスとはその名の通り疑似的なクラスをCSSで作るということで、指定したセレクタや外的要因に対し要素「全体」にスタイル変更を加えるものです（例「:hover」を指定した要素全てに対し、マウスポインタが乗った時の見え方をCSSを追加する）。 擬似要素は指定した文字などの「一部」に対し見え方を変更したり、コンテンツ（要素）をCSSの中で追加できます（::afterとか::first-letter）。見分け方としては擬似クラスはコロン一つ（:）、疑似要素はコロン２つ（::）。いずれも、html内に直接マークアップする事が好ましくない場合などに使います。 CSSの疑似ク

* { box-sizing: border-box; } .block > div{ margin: 0; padding: 0; } .block { max-width: 400px; width: 100%; height: 100%; float: left; padding: 15px; z-index: 10; background-color: white; overflow: hidden; } @media screen and (max-width: 599px) { .block { max-width: 100%; } } .block > div { display: block; position: relative; padding: 0 0 0 35px; border-bottom: 1px solid white; background-color:

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…