なかしまぁ先生
なかしまぁ先生のHTML５に関するコラム集です。
JavaScriptで文字列を扱う方法をいくつかご紹介します。 まず、対象の文字列を設定します。 文字列の長さ 文字列の長さはlengthプロパティを使います。 結果は17になります。 文字列の取り出し① 例えば、文字列の3番目の文字を知りたければcharAtメソッドを使います。丸括弧の中は（何番目）になります。 結果は「う」になります。 文字列の取り出し② 例えば、文字列の2番目から4番目までの文字列を知りたければ substringメソッドを使います。丸括
スコープというのは、変数を参照できる範囲です 変数などを参照できる範囲で、 { }内で宣言された変数は{ }の外に影響しない { }外で宣言された変数は{ }の中に影響します 関数のスコープ 次の関数を含んだソースコードを見てみましょう。 ①で表示される値は、1 ②で表示される値は、2 ③で表示される値は、1 になります。あれ、おかしいですね。なんで③で1になるんでしょう。 ①に関係する、上2行はおわかりですね。変数 n1 に 1を代入し、要素の取得を行ったp1
きょうは３月１４日ですね。 ３.１４ということでHappy PI Day!です。 PI、パイ、π、3.14.159… ですが、これを求めるにはどうしたらいいでしょう。 JavaScriptですとMathオブジェクトのMath.PIで取得できますね。 そのほかモンテカルロ法というのがあります。 仕組みは、 ・正方形（1辺1cmとする）と ・その中に接するように円(半径0.5cmとする)を 描きます。すると、 ・正方形の面積は1平方cm ・円の面積は0.25π平方cm 円の
通常、VSCodeで作成したファイルはブラウザで確認するように指導していますが、それを自動的に素早く表示できる機能拡張がいくつかあります。なかなか希望のものが少ないのですが、「Live Server」は使えるかもですのでご紹介します。 １.Live Server次の機能拡張をインストールしてみましょう。 ２.作業フォルダとファイル以下のように任意のフォルダ(=作業フォルダ。例:ws)の中にファイル(=test.html)がないとうまくいかないようです。 エクスプローラの
例えば、の文字の色を同じにする場合は、 とすればよいですが、いちいち書くのは面倒です。セレクタのグループ化を使えば、 となりますが、値を頻繁に変えるケースだと、CSSの中の該当箇所を探さないといけないので、面倒です。変数の設定は一箇所にまとめたほうがいいでしょう。そこで「CSS変数」の出番です。 え、CSSに変数ってあるの？ですが、、、あるんですよね。 １.CSS変数の定義まず、CSS変数の値を定義します。 「:root」は、<html>要素の中を示す擬似クラスで
1. 困った現象のあらまし私の科目では、HTML・CSS・JavaScriptの演習の際、 テキストエディタ(=Visual Studio Code)でファイル作成し、 上部タブをドラッグ&ドロップして、 ブラウザ上で確認するように指導していました。 2023年12月の後期授業中盤のころ、VSCodeからドラッグ&ドロップしたらVSCodeの別ウインドウが開いてしまうという困った現象が発生したとのご連絡が学生のかたからありました。 こちら(=Mac)では確認できず
Visual Studio Codeでは、データベースのSQL(Structured Query Language：構造化問い合わせ言語：RDB（リレーショナルデータベース）データ操作)の勉強ができるそうですので、記録します。 最初に言っておきます。環境設定はけっこう大変です。ちょっとしたことで先に進めないこともありますので、そこは覚悟しておきましょう（と入っても、たいていのシステムのインストールは何かしらトラブルがつきものですよね😁） １．インストール まず、公式ペー
VSCodeは、テキストエディタ。ソースコードを書くためのツールです。 そのツールで、ファイルをサーバにアップロードすることができます。 １．作業場の作成 まず、アップロードしたいファイルの作業場（格納フォルダ）を作成しましょう。 そのフォルダをVSCodeにドラッグ・アンド・ドロップします。 ２．SFTPのインストール ２通りあります。 ひとつめは、左列に並んでいるアイコンの「機能拡張」をクリックして、「SFTP」を検索（ただ、SFTPは同名のものが３種類くらい
備忘として掲載しておきます。 仕様書 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 5.3等のバージョンによる勧告は廃止になり、現在はHTMLとDOMについて「WH
1. 書籍を作る実は、今回、書籍を作ろうと思いまして、書こうと思ったのですが、Microsoft Wordや、Pagesでと思ったのですが、 ・書式の設定でマウスゴリゴリするのが、ちょっと面倒で、 ・かといってHTMLタグで書くのもなんとなく、 ・最終的にはテキストベースで入稿だろうと予測してまして どうしたもんかなと思案していたところ、以前、VSCodeでSFを書く作家さんが話題になったことを思い出しました。 そっか、私達には、最強のテキストエディタVisual Stud
みなさん、こんにちは。なかしまぁ先生です。 GitHub Copilotは、テキストエディタ上でコードの提案をしてくれるAI君です。（Copilotは副操縦士のこと） この記事は、６月くらいに利用申請を出して、今日やっと登録されたので早速試してみた記録です。今日届いたメールがこれ。 １．インストール①早速オフィシャルページへ ②サインインをすると、「Install GitHub Copilot」のリンクが ③テキストエディタは「Visual Studio Code」
こんにちは。なかしまぁ先生です。 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>
Webページを作るときには、 ・制作物を作るためにテキストエディタ、 ・制作物を確認するためにブラウザ が必要になります。 エディタと言うとMicrosoftのWordなどを連想するかもしれませんが、あちらはリッチエディタと呼ばれ、文字の大きさ、装飾などもできる機能の豊かなエディタです。 コードを書くときはそれらリッチな機能は必要ないため、コード（≒文字・数字・記号）だけを入力するテキストエディタが必要になります。 Mac付属のソフト「テキストエディット」もよくありません。
