なかしまぁ先生

HTML5の大好きなお兄さんです。サイバー大学 IT総合学部 准教授としてHTML5を…

なかしまぁ先生

HTML5の大好きなお兄さんです。サイバー大学 IT総合学部 准教授としてHTML5を教えてます。 その他、放送大学、八洲学園大学、尚美学園大学、秋草学園短期大学の非常勤講師です。 ここではHTML5やWebまわりの備忘として独断と偏見でノートします。

マガジン

記事一覧

3月14日はπの日

きょうは3月14日ですね。 3.14ということでHappy PI Day!です。 PI、パイ、π、3.14.159… ですが、これを求めるにはどうしたらいいでしょう。 JavaScriptですとMa…

1

VSCodeでプレビュー

通常、VSCodeで作成したファイルはブラウザで確認するように指導していますが、それを自動的に素早く表示できる機能拡張がいくつかあります。なかなか希望のものが少ないの…

2

CSS変数

例えば、の文字の色を同じにする場合は、 とすればよいですが、いちいち書くのは面倒です。セレクタのグループ化を使えば、 となりますが、値を頻繁に変えるケースだと…

2

VSCodeからブラウザへのドラッグ&ドロップ

1. 困った現象のあらまし私の科目では、HTML・CSS・JavaScriptの演習の際、 テキストエディタ(=Visual Studio Code)でファイル作成し、 上部タブをドラッグ&ドロップし…

5

VSCodeでSQLのお勉強

Visual Studio Codeでは、データベースのSQL(Structured Query Language:構造化問い合わせ言語:RDB(リレーショナルデータベース)データ操作)の勉強ができるそうですの…

VSCodeでファイルをアップロードできる機能拡張「SFTP」

VSCodeは、テキストエディタ。ソースコードを書くためのツールです。 そのツールで、ファイルをサーバにアップロードすることができます。 1.作業場の作成 まず、アッ…

HTML5関連の仕様書

備忘として掲載しておきます。 仕様書 HTMLとDOM→living HTML standard(WHATWG) CSS→CSS home page(W3C) JavaScript→ECMAScript(JavaScript)(ECMA) 仕様書見てもな…

「HTML5」のこと

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

Visual Studio Code で原稿書き

1. 書籍を作る実は、今回、書籍を作ろうと思いまして、書こうと思ったのですが、Microsoft Wordや、Pagesでと思ったのですが、 ・書式の設定でマウスゴリゴリするのが、ち…

GitHub Copilotを試してみた

みなさん、こんにちは。なかしまぁ先生です。 GitHub Copilotは、テキストエディタ上でコードの提案をしてくれるAI君です。(Copilotは副操縦士のこと) この記事は、6…

スマホの横画面対応

こんにちは。なかしまぁ先生です。 1. メディアクエリで困った先程、メディアクエリでPCとスマホで別々のCSSを適用させていました。 これでよしと思ってスマホでいじって…

論文の文字数

こんにちは。なかしまぁ先生です。 大学では、論文や研究報告書、レポート等の提出があります。 文書の体裁なども指定されているのですが、その中で「文字数」が結構間違…

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

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

Visual Studio Codeの扱い方

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

お手軽VR「A-Frame」

Web技術で、VRを実現しようとしたら… 昔々でしたら「VRML」とか最近でしたら「Flash」で実現してました。 「HTML5」だと、CSSで可能ですし、JavaScriptのCanvas API・We…

GitHub PagesによるWebサイト公開

Github pageを皆さんのWebサイトとして活用しましょう。無料ですし。 それに皆さんの書いたコードが1000年の時を超えて保存されるかもしれませんよ。実際、なかしまぁ先生…

3月14日はπの日

3月14日はπの日

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

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

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

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

もっとみる
VSCodeでプレビュー

VSCodeでプレビュー

通常、VSCodeで作成したファイルはブラウザで確認するように指導していますが、それを自動的に素早く表示できる機能拡張がいくつかあります。なかなか希望のものが少ないのですが、「Live Server」は使えるかもですのでご紹介します。

1.Live Server次の機能拡張をインストールしてみましょう。

2.作業フォルダとファイル以下のように任意のフォルダ(=作業フォルダ。例:ws)の中にファ

もっとみる
CSS変数

CSS変数


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

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

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

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

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

もっとみる
VSCodeからブラウザへのドラッグ&ドロップ

VSCodeからブラウザへのドラッグ&ドロップ


1. 困った現象のあらまし私の科目では、HTML・CSS・JavaScriptの演習の際、

テキストエディタ(=Visual Studio Code)でファイル作成し、

上部タブをドラッグ&ドロップして、

ブラウザ上で確認するように指導していました。

2023年12月の後期授業中盤のころ、VSCodeからドラッグ&ドロップしたらVSCodeの別ウインドウが開いてしまうという困った現象が発

もっとみる
VSCodeでSQLのお勉強

VSCodeでSQLのお勉強

Visual Studio Codeでは、データベースのSQL(Structured Query Language:構造化問い合わせ言語:RDB(リレーショナルデータベース)データ操作)の勉強ができるそうですので、記録します。

最初に言っておきます。環境設定はけっこう大変です。ちょっとしたことで先に進めないこともありますので、そこは覚悟しておきましょう(と入っても、たいていのシステムのインストー

もっとみる
VSCodeでファイルをアップロードできる機能拡張「SFTP」

VSCodeでファイルをアップロードできる機能拡張「SFTP」

VSCodeは、テキストエディタ。ソースコードを書くためのツールです。
そのツールで、ファイルをサーバにアップロードすることができます。

1.作業場の作成

まず、アップロードしたいファイルの作業場(格納フォルダ)を作成しましょう。

そのフォルダをVSCodeにドラッグ・アンド・ドロップします。

2.SFTPのインストール

2通りあります。

ひとつめは、左列に並んでいるアイコンの「機能拡

もっとみる
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で判別ブラウザの

もっとみる
論文の文字数

論文の文字数

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

大学では、論文や研究報告書、レポート等の提出があります。
文書の体裁なども指定されているのですが、その中で「文字数」が結構間違えやすいです。ですので今回はその「文字数」について記事を書きます。

作成には、一般的にはMicrosoftのWordを使用しているようですね。ですのでWordで説明します。

1.どこをカウントするの?私の場合は「本文」です。ただし、

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

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

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

今日は、グラデーションの中でちょっとおもしろい円錐のグラデーション(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

もっとみる