なかしまぁ先生

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

なかしまぁ先生

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

3月14日はπの日

きょうは３月１４日ですね。 ３.１４ということでHappy PI Day!です。 PI、パイ、π、3.14.159… ですが、これを求めるにはどうしたらいいでしょう。 JavaScriptですとMathオブジェクトのMath.PIで取得できますね。 そのほかモンテカルロ法というのがあります。 仕組みは、 ・正方形（1辺1cmとする）と ・その中に接するように円(半径0.5cmとする)を 描きます。すると、 ・正方形の面積は1平方cm ・円の面積は0.25π平方cm 円の

なかしまぁ先生

    • VSCodeでプレビュー

      通常、VSCodeで作成したファイルはブラウザで確認するように指導していますが、それを自動的に素早く表示できる機能拡張がいくつかあります。なかなか希望のものが少ないのですが、「Live Server」は使えるかもですのでご紹介します。 １.Live Server次の機能拡張をインストールしてみましょう。 ２.作業フォルダとファイル以下のように任意のフォルダ(=作業フォルダ。例:ws)の中にファイル(=test.html)がないとうまくいかないようです。 エクスプローラの

      なかしまぁ先生

      • CSS変数

        例えば、の文字の色を同じにする場合は、 とすればよいですが、いちいち書くのは面倒です。セレクタのグループ化を使えば、 となりますが、値を頻繁に変えるケースだと、CSSの中の該当箇所を探さないといけないので、面倒です。変数の設定は一箇所にまとめたほうがいいでしょう。そこで「CSS変数」の出番です。 え、CSSに変数ってあるの？ですが、、、あるんですよね。 １.CSS変数の定義まず、CSS変数の値を定義します。 「:root」は、<html>要素の中を示す擬似クラスで

        なかしまぁ先生

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

          1. 困った現象のあらまし私の科目では、HTML・CSS・JavaScriptの演習の際、 テキストエディタ(=Visual Studio Code)でファイル作成し、 上部タブをドラッグ&ドロップして、 ブラウザ上で確認するように指導していました。 2023年12月の後期授業中盤のころ、VSCodeからドラッグ&ドロップしたらVSCodeの別ウインドウが開いてしまうという困った現象が発生したとのご連絡が学生のかたからありました。 こちら(=Mac)では確認できず

          なかしまぁ先生

        3月14日はπの日

        なかしまぁ先生

        マガジン

        • 徒然HTML5
          17本
        • Visual Studio Code
          7本

        記事

          VSCodeでSQLのお勉強

          Visual Studio Codeでは、データベースのSQL(Structured Query Language：構造化問い合わせ言語：RDB（リレーショナルデータベース）データ操作)の勉強ができるそうですので、記録します。 最初に言っておきます。環境設定はけっこう大変です。ちょっとしたことで先に進めないこともありますので、そこは覚悟しておきましょう（と入っても、たいていのシステムのインストールは何かしらトラブルがつきものですよね😁） １．インストール まず、公式ペー

          なかしまぁ先生

          VSCodeでSQLのお勉強

          なかしまぁ先生

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

          VSCodeは、テキストエディタ。ソースコードを書くためのツールです。 そのツールで、ファイルをサーバにアップロードすることができます。 １．作業場の作成 まず、アップロードしたいファイルの作業場（格納フォルダ）を作成しましょう。 そのフォルダをVSCodeにドラッグ・アンド・ドロップします。 ２．SFTPのインストール ２通りあります。 ひとつめは、左列に並んでいるアイコンの「機能拡張」をクリックして、「SFTP」を検索（ただ、SFTPは同名のものが３種類くらい

          なかしまぁ先生

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

          なかしまぁ先生

          HTML5関連の仕様書

          備忘として掲載しておきます。 仕様書 HTMLとDOM→living HTML standard(WHATWG) CSS→CSS home page(W3C) JavaScript→ECMAScript(JavaScript)(ECMA) 仕様書見てもなかなか分かりづらいので、以下のサイトも参考にするといいでしょう MDN Web Docs 【PR】①初心者向けHTML5対面教室（東京・大阪） ②HTML5の検定にチャレンジ！（オンライン）

          なかしまぁ先生

          HTML5関連の仕様書

          なかしまぁ先生

          「HTML5」のこと

          たまに聞かれるのが、「HTML5って廃止されたんじゃないの？」ってことです。それについて、私なりの見解を記しますね。 まず、HTML5の「5」については、 　①HTMLのバージョンという意味と、 　②動的なWebサイトを作成するための基盤の象徴 （「HTML5」そのものが一つの固有名詞） というふたつの意味があります。 ①については、W3CのHTML 5.1、HTML 5.2、HTML 5.3等のバージョンによる勧告は廃止になり、現在はHTMLとDOMについて「WH

          なかしまぁ先生

          「HTML5」のこと

          なかしまぁ先生

          Visual Studio Code で原稿書き

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

          なかしまぁ先生

          Visual Studio Code で原稿書き

          なかしまぁ先生

          GitHub Copilotを試してみた

          みなさん、こんにちは。なかしまぁ先生です。 GitHub Copilotは、テキストエディタ上でコードの提案をしてくれるAI君です。（Copilotは副操縦士のこと） この記事は、６月くらいに利用申請を出して、今日やっと登録されたので早速試してみた記録です。今日届いたメールがこれ。 １．インストール①早速オフィシャルページへ ②サインインをすると、「Install GitHub Copilot」のリンクが ③テキストエディタは「Visual Studio Code」

          なかしまぁ先生

          GitHub Copilotを試してみた

          なかしまぁ先生

          スマホの横画面対応

          こんにちは。なかしまぁ先生です。 1. メディアクエリで困った先程、メディアクエリでPCとスマホで別々のCSSを適用させていました。 これでよしと思ってスマホでいじってましたら、横向きにした時に、横幅が700pxを超えてしまい、PCのCSSになってしまいました。 メディアクエリはViewport（表示領域）の横幅で判別してますので、これは困った。 2. JavaScriptで判別ブラウザのUserAgentでも判別できるのですが、 こっちのほうが、間違いは少なくなる

          なかしまぁ先生

          スマホの横画面対応

          なかしまぁ先生

          論文の文字数

          こんにちは。なかしまぁ先生です。 大学では、論文や研究報告書、レポート等の提出があります。 文書の体裁なども指定されているのですが、その中で「文字数」が結構間違えやすいです。ですので今回はその「文字数」について記事を書きます。 作成には、一般的にはMicrosoftのWordを使用しているようですね。ですのでWordで説明します。 1.どこをカウントするの？私の場合は「本文」です。ただし、 各項目の見出し、表内のテキストは文字数に含みます。 論文の表題・氏名・学籍番

          なかしまぁ先生

          論文の文字数

          なかしまぁ先生

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

          こんにちは。なかしまぁ先生です。 今日は、グラデーションの中でちょっとおもしろい円錐のグラデーション(conic-gradient)をご紹介します。ブラウザ対応状況はこちら(IEは対象外です) 1.テンプレートファイルを作成してみるではまず、練習用のテンプレートファイルを準備しましょう <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>1</title> <style>

          なかしまぁ先生

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

          なかしまぁ先生

          Visual Studio Codeの扱い方

          Webページを作るときには、 ・制作物を作るためにテキストエディタ、 ・制作物を確認するためにブラウザ が必要になります。 エディタと言うとMicrosoftのWordなどを連想するかもしれませんが、あちらはリッチエディタと呼ばれ、文字の大きさ、装飾などもできる機能の豊かなエディタです。 コードを書くときはそれらリッチな機能は必要ないため、コード（≒文字・数字・記号）だけを入力するテキストエディタが必要になります。 Mac付属のソフト「テキストエディット」もよくありません。

          なかしまぁ先生

          Visual Studio Codeの扱い方

          なかしまぁ先生

          お手軽VR「A-Frame」

          Web技術で、VRを実現しようとしたら… 昔々でしたら「VRML」とか最近でしたら「Flash」で実現してました。 「HTML5」だと、CSSで可能ですし、JavaScriptのCanvas API・WebGL、three.jsとかを使用すると可能ですね。 ただ初心者がお手軽にするには少々ハードルがあります。そこで思い出したのが「A-Frame」。2015年からMozillaさんが始めたもので、タグと属性を記述すればVRが楽しめるすぐれものです。 1.Webページのテ

          なかしまぁ先生

          お手軽VR「A-Frame」

          なかしまぁ先生

          GitHub PagesによるWebサイト公開

          Github pageを皆さんのWebサイトとして活用しましょう。無料ですし。 それに皆さんの書いたコードが1000年の時を超えて保存されるかもしれませんよ。実際、なかしまぁ先生のコードは保存されてます。 この記事を書いた時点から仕様というのは変わるものです。画面や内容が変わっていたら、ググるなどして柔軟に対応してください。 1. アカウントの作成① GitHubにアクセスして、Sign Upする ② 「Choose your subscription」は「Free」

          なかしまぁ先生

          GitHub PagesによるWebサイト公開

          なかしまぁ先生