サイト運営を行っているとCSSを触ってデザイン変更するのは日常茶飯事です。 cPanel内で使用できるエディターやその他のエディターツールにはCSSLintと呼ばれるソースコードの自動チェック機能が付いています。 そのLinterによって書き込んだスタイルにビックリマーク付きの警告文が出ることがありますが、英語ですので和訳の一覧を作りました。

<表示画面> HTMLのP要素 HTMLのP要素 HTMLのP要素 ・p = paragraph ・特徴：pを使うと、改行 & 1行空白が入る。 ・「p」は、一つの段落であることを表す際に使用する要素。 ・<p>～</p>で囲まれたテキストは1つの段落であることを示します。 ・p要素同士の間隔を調整するにはCSSのmarginプロパティを使用。 ・divタグと同じようにspanはpタグの懐に入り込めるけど、pタグはspanタグの中に入り込めません。 「div」 <表示画面> HTMLのdiv要素 HTMLのdiv要素 HTMLのdiv要素 ・div = division（段とか仕切りの意味） ・特徴：前後に改行が入ります。 ・divは空白行が入るがpは入らない。 ・ブロックレベル要素としてグループ化を行いますので、見出しや段落、リストなどとしてみなされ前後に改行が入ります。 ・pブロックタ

初めに HtmlのdivタグやspanタグにCSSを適用するためには、id名もしくはclass名を付けます。特にcalssセレクタは頻繁に使われていますが、その中でも複数のクラス名を一つの要素に並べるケースについてその理由とcssの記述について纏めてみました。 目次 idとclassの違い 同じタグ内に複数のclass名を付ける理由 同じタグ内に複数のclass名が並んだ場合のCSS記述 複数のクラス名が入れ子構造（ネスト）の場合 複数のclassに同じcssを適用する場合 まとめ idとclassの違い id属性はhtml文書内でたった一つしかない要素に対してスタイルを適用する時に使います。なので同じ文書内に同じid名が複数存在することはあり得ません。これに対してclass属性の場合、複数のタグに同じclass名を付けてそれぞれ同じスタイルを適用することができます。「この部分は絶対このス

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに この記事は学習ノートです。 CSSのセレクターについて学んだことを、今更だけどまとめました。 そもそも 基本のセレクター 全称セレクター *で指定する *で指定した内容は、すべての要素に適用される

CSSのセレクタ JavaScriptの学習と併せてHTMLとCSSのおさらい中のB-CHANです。 HTMLやCSSは昔からこのブログでたまに使っていますが、きちんと基礎から網羅的に学習したことはありませんでした。 なので、今、JavaScriptを使うために、ゼロからHTMLとCSSも見直しているところです。 今回、CSSのセレクタに関して、一瞬、つまずいたので、他の初心者のためにも、書き残しておきます。 CSSの書き方は、 p { font-size:18px; } セレクタ { 属性:値; } と言うように、最初にセレクタで要素やクラス、IDなどを指定して、波括弧の中で属性（プロパティ）や値を指定していきます。 ボクはこの、セレクタの微妙な記述の違いに引っかかりました。 セレクタの空白には意味がある 例えば、次のようなカンタンなHTMLを書きます。 <div class="cont

はじめにいうと、meta要素のviewportは以下の記述がスタンダードであることに変わりはないと思います。 <meta name="viewport" content="width=device-width,initial-scale=1"> ただ、viewportについて、改めてなんでこの記述はなんだろうと考えてみた内容になります。 viewportとはそもそも何なのか ~スマートフォンの登場 2007年~ viewportとは、ブラウザの「表示領域」のことです。 ではどこから出てきたのか? 振り返るとスマートフォンが登場して、 パソコンよりも小さいブラウザでWEBページを見る機会ができました。 当時はレスポンシブサイトというものもなく、iPhoneが出た2007年あたりは、 PCのディスプレイサイズの多くが1024x768pxの時代です。 当時のスマホのディスプレイサイズが320px

前提知識 そもそも「viewport」や「initial-scale」とは何なのか解説します。 viewportとは ユーザには見えない仮想的なウィンドウのことです。デフォルトは980pxです。 Webサイトをユーザが見ている画面（ブラウザ）に表示する流れは以下の通りです。 viewport幅は、JavaScriptでdocument.documentElement.clientWidthを記述して調べることができます。 要素がルート要素であり、要素のノードドキュメントがquirksモードでない場合、または要素がボディ要素であり、要素のノードドキュメントがquirksモードである場合、レンダリングされたスクロールバーのサイズ（もしあれば）を除いたビューポート幅を返す。(原文をDeepLで翻訳) CSSOM View Module | The clientWidth attribute mu

と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view

ウェブサイト上の画像やテキストをコピーさせたくないときに使える便利なCSSプロパティを紹介します。 -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 具体的にスタイルシートに記述する内容は次のようになります。 p, img, ul, ol { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } なおベンダープレフィックスの「-webkit-」はMacOSのSafariとGoogle Chromeに、「-moz-」はFirefoxに、「-ms-」はIE10以上に、それぞれ対応します。 ソースコードを直接見られてしまうとコピ

CSSBeginner's tutorialsYour first website: Styling the contentCSS styling basicsCSS とは何かCSS 入門課題: 経歴ページのスタイル設定基本的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基本的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS text styling基本的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定

#なぜ上下左右が中央揃えになる条件が上記の2つなのか なぜ、上記の2つの条件が必要なのかというのは、当たり前と言えば、当たり前なのですが、CSSの仕様書にそのように明記されているからです。 ##上下中央揃えに関する記述 If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below. If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal val

複数の要素が記述されるとき、当然ながらそれら要素どうしは『上下あるいは左右に隣り合った関係』になります。 『隣り合っている』からにはその要素間には『間隔』という概念が発生します。 今回はそんな『隣り合った要素の間隔』を指定する『margin（マージン）プロパティ』のお話です。 この解説の理解を助ける事前知識 デフォルトスタイルシート デフォルトスタイルシート（実技編2-12）何も指定していなくとも標準的なスタイルを割り当ててくれる『デフォルトスタイルシート』についての解説です。ホームページを作成するうえでデフォルトスタイルシートとどのように付き合っていけばよいのか考えていきましょう。pikoon.jp background-colorプロパティ background-colorプロパティ　要素の背景色を指定する（実技編2-7）『暖かい』『クール』『かわいい』『かっこいい』など、そのホームペ

0　レスポンシブサイトってなんかむずそう 様々な画面サイズやスマホ対応のウェブページって作るの難しそうって思いますよね。 もちろん私も難しいと思っていたのですが、以外と要点だけを抑えたら簡単に作れたので、そのときに気をつけたポイントをメモしたいと思います(｀・ω・´) ここには要点しかないのでくわしく知りたい人はググりましょう( 厂˙ω˙ )厂 土日の暇なときにでも見ていただけたら嬉しいかもしれません(´・ω・｀) 1　widthをpx指定しないほうがいい 同じPCで見てても見る人によってデザインが崩れる原因は何か ＝＞　基本的にはデバイスごとの画面サイズの違いである mac 11インチ、13インチ、15インチ　でもサイズは違うし。 windowsのディスプレイサイズもいっぱいあるし。。。。 iPadとかで見てもサイズ違う！！！ 解決法　＝＞　％指定しましょう デザイナーさん曰く、(なるべ

colorateはデザイナーや開発者向けの配色ツールです。あなたのインスピレーションを引き出し、よりよい配色の構成に役立ちます。 サイトをよりよくする

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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック