マガジンのカバー画像

徒然HTML5

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

記事一覧

JavaScriptの文字列の操作

JavaScriptの文字列の操作

JavaScriptで文字列を扱う方法をいくつかご紹介します。
まず、対象の文字列を設定します。

文字列の長さ

文字列の長さはlengthプロパティを使います。

結果は17になります。

文字列の取り出し①

例えば、文字列の3番目の文字を知りたければcharAtメソッドを使います。丸括弧の中は(何番目)になります。

結果は「う」になります。

文字列の取り出し②

例えば、文字列の2番目

もっとみる
JavaScriptのスコープ

JavaScriptのスコープ

スコープというのは、変数を参照できる範囲です

変数などを参照できる範囲で、

{ }内で宣言された変数は{ }の外に影響しない

{ }外で宣言された変数は{ }の中に影響します

関数のスコープ

次の関数を含んだソースコードを見てみましょう。

①で表示される値は、1
②で表示される値は、2
③で表示される値は、1
になります。あれ、おかしいですね。なんで③で1になるんでしょう。

①に関係

もっとみる
3月14日はπの日

3月14日はπの日

きょうは3月14日ですね。
3.14ということでHappy PI Day!です。

PI、パイ、π、3.14.159… ですが、これを求めるにはどうしたらいいでしょう。

JavaScriptですとMathオブジェクトのMath.PIで取得できますね。
そのほかモンテカルロ法というのがあります。

仕組みは、
・正方形(1辺1cmとする)と
・その中に接するように円(半径0.5cmとする)を
描き

もっとみる
CSS変数

CSS変数


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

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

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

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

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

もっとみる
HTML5関連の仕様書

HTML5関連の仕様書

備忘として掲載しておきます。

仕様書

HTMLとDOM→living HTML standard(WHATWG)

CSS→CSS home page(W3C)

JavaScript→ECMAScript(JavaScript)(ECMA)

仕様書見てもなかなか分かりづらいので、以下のサイトも参考にするといいでしょう

MDN Web Docs

【PR】①初心者向けHTML5対面教室(東

もっとみる

「HTML5」のこと

たまに聞かれるのが、「HTML5って廃止されたんじゃないの?」ってことです。それについて、私なりの見解を記しますね。

まず、HTML5の「5」については、

 ①HTMLのバージョンという意味と、

 ②動的なWebサイトを作成するための基盤の象徴
(「HTML5」そのものが一つの固有名詞)

というふたつの意味があります。

①については、W3CのHTML 5.1、HTML 5.2、HTML

もっとみる
Visual Studio Code で原稿書き

Visual Studio Code で原稿書き

1. 書籍を作る実は、今回、書籍を作ろうと思いまして、書こうと思ったのですが、Microsoft Wordや、Pagesでと思ったのですが、
・書式の設定でマウスゴリゴリするのが、ちょっと面倒で、
・かといってHTMLタグで書くのもなんとなく、
・最終的にはテキストベースで入稿だろうと予測してまして
どうしたもんかなと思案していたところ、以前、VSCodeでSFを書く作家さんが話題になったことを思

もっとみる
GitHub Copilotを試してみた

GitHub Copilotを試してみた

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

GitHub Copilotは、テキストエディタ上でコードの提案をしてくれるAI君です。(Copilotは副操縦士のこと)

この記事は、6月くらいに利用申請を出して、今日やっと登録されたので早速試してみた記録です。今日届いたメールがこれ。

1.インストール①早速オフィシャルページへ

②サインインをすると、「Install GitHub Copil

もっとみる
スマホの横画面対応

スマホの横画面対応

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

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

もっとみる
お手軽VR「A-Frame」

お手軽VR「A-Frame」

Web技術で、VRを実現しようとしたら…

昔々でしたら「VRML」とか最近でしたら「Flash」で実現してました。

「HTML5」だと、CSSで可能ですし、JavaScriptのCanvas API・WebGL、three.jsとかを使用すると可能ですね。

ただ初心者がお手軽にするには少々ハードルがあります。そこで思い出したのが「A-Frame」。2015年からMozillaさんが始めたもの

もっとみる
GitHub PagesによるWebサイト公開

GitHub PagesによるWebサイト公開

Github pageを皆さんのWebサイトとして活用しましょう。無料ですし。

それに皆さんの書いたコードが1000年の時を超えて保存されるかもしれませんよ。実際、なかしまぁ先生のコードは保存されてます。

この記事を書いた時点から仕様というのは変わるものです。画面や内容が変わっていたら、ググるなどして柔軟に対応してください。

1. アカウントの作成① GitHubにアクセスして、Sign U

もっとみる

なかしまぁ先生の勝手にWeb~HTML5の歴史まとめ

なかしまぁ先生の個人的歴史のまとめです。私の知見に基づいていますので、間違い等あるかもしれません、ご了承ください。

「Web」の表記ですが、固有名詞として古くは「WEB」、そして「Web」になり、最近は普通名詞ということで「web」で表示するなど意見が別れています。私は一応「Web」で記述します。

また「ホームページ」という表現がありますが、一般に「ホームページ」とは、サイトの最初のページ(=

もっとみる