マガジンのカバー画像

徒然HTML5

19
本
なかしまぁ先生のHTML５に関するコラム集です。
運営しているクリエイター
なかしまぁ先生

#css

なかしまぁ先生

なかしまぁ先生

CSS変数

CSS変数


例えば、の文字の色を同じにする場合は、

とすればよいですが、いちいち書くのは面倒です。セレクタのグループ化を使えば、

となりますが、値を頻繁に変えるケースだと、CSSの中の該当箇所を探さないといけないので、面倒です。変数の設定は一箇所にまとめたほうがいいでしょう。そこで「CSS変数」の出番です。

え、CSSに変数ってあるの？ですが、、、あるんですよね。

１.CSS変数の定義まず、CSS変

もっとみる
なかしまぁ先生

なかしまぁ先生

スマホの横画面対応

スマホの横画面対応

こんにちは。なかしまぁ先生です。

1. メディアクエリで困った先程、メディアクエリでPCとスマホで別々のCSSを適用させていました。

これでよしと思ってスマホでいじってましたら、横向きにした時に、横幅が700pxを超えてしまい、PCのCSSになってしまいました。

メディアクエリはViewport（表示領域）の横幅で判別してますので、これは困った。

2. JavaScriptで判別ブラウザの

もっとみる
なかしまぁ先生

なかしまぁ先生

円錐のグラデーションを極めてみる

円錐のグラデーションを極めてみる

こんにちは。なかしまぁ先生です。

今日は、グラデーションの中でちょっとおもしろい円錐のグラデーション(conic-gradient)をご紹介します。ブラウザ対応状況はこちら(IEは対象外です)

1.テンプレートファイルを作成してみるではまず、練習用のテンプレートファイルを準備しましょう

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf

もっとみる
なかしまぁ先生

なかしまぁ先生

Visual Studio Codeの扱い方

Visual Studio Codeの扱い方

Webページを作るときには、
・制作物を作るためにテキストエディタ、
・制作物を確認するためにブラウザ
が必要になります。

エディタと言うとMicrosoftのWordなどを連想するかもしれませんが、あちらはリッチエディタと呼ばれ、文字の大きさ、装飾などもできる機能の豊かなエディタです。
コードを書くときはそれらリッチな機能は必要ないため、コード（≒文字・数字・記号）だけを入力するテキストエディ

もっとみる
なかしまぁ先生

なかしまぁ先生

作ったHTML5がうまく動作しない時どうするか？

作ったHTML5がうまく動作しない時どうするか？

よく質問を受けるのですが

私がいれば、「どれどれ」と一緒にPCに向かって解決するのですが、私がいなかったり、独学だったり、遠隔だったり、社会に出たりすればそうも行きません。そんなとき学生自らが自力でどう解決するかを考えてみます。内容は順次追加します。

１．原因HTML、CSS、JavaScriptでは、動作しない原因は次のケースかなと思います。

1-1. スペルミス

これが圧倒的です。スペ

もっとみる