20210127のHTMLに関する記事は7件です。

投稿日：2021-01-27T20:34:15+09:00

診断サービス？をつくってみたんだけども

開発者のレベル

ポケットモンスター緑・赤で例えるならばタケシに会うレベル
~~動いたらいいな♡って念じながら~~プログラミングをやっています

診断サービスをつくろうと思った理由

アプリを開発している知り合いのボドゲ―マーに「診断アプリはオススメだよ」って言われたからです。
いつかアプリ開発にも手を出したいよ～～。
ゲームとかもつくりたい。
~~そして広告収入という名の不労所得がほしい。~~

つくったサービス

 http://myzm.sakura.ne.jp/

99%の確率で私の好きなボードゲームであるバラージをおススメしてくれる私得の診断サービスです。出オチ100%である。
実はsakuraのサーバーに移植する前はAWSのS3にコードを放り込むだけという適当なものをTwitterで公開してました。
遊んでくれた方々に感謝。

バラージを布教したいので、99%の確率でバラージをおすすめするボドゲ診断サービスを作ってみました！　https://t.co/jSB24ZYWug pic.twitter.com/w2dq7kcOuZ
— 黛 (まゆずみ) (@t12200301) October 3, 2020

どうやってつくったか？

Webサイトのテンプレートについては下記を参考に自分好みに改造していきました。
https://templatemo.com/tm-539-simple-house

選定基準としては
1. Javascriptを利用している（少しでもJavascript触りたい)。
2. 好み
3. シンプル　

診断機能についてはこちらの記事を参考にしました。
https://qiita.com/bstyle6130/items/c3dfebdceaaef8e3860d

なんとな～くは理解できるけど０からこれを作れと言われたらif文をがりがり回すしか思いつかないので、
先駆者の方に感謝！

改善点

私の今の力ではすぐに解決できないな～っていうのは下記です。
技術力が高まったらあとで直したいのでメモしておきます。

1.診断結果をシェアするときに画像も一緒にツイートさせる。

Twitterの性格診断なんかでよく見る形かと思います。
Twitterのシェア機能では画像を一緒に添付されているのですが、Twitterボタンの生成機能に画像情報を付記する項目が無いので、おそらくこれはTwitterカードをresultごとに動的に生成しているのではないかと予想。
となると、それを自力でなんとかするのは今の段階では無理なので、ちょっと保留にしておきます。

2.コードに対する理解を深める。

正直なにがどうなって動いているの？ってところもあるので、もうちょっと修正を効かせるために理解を深めたいです。

3.httpをhttpsにしたい。

この領域に関してはちゃんと理解したいので改めてまとめます！

バラージとはなにか？

バラージは第一次世界大戦後のヨーロッパを舞台に、各国の発電会社のCEOになって発電するボードゲームです。

つくってよかったこと

バラージをやる頻度が高まったよ！

あとはサービスの原理を知っているのと実際にプロダクト？として出すのとでは大きく違うなあという月並みな感想です。
次は何しよっかな～～。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-27T18:43:24+09:00

Bootstrapの基礎

デイトラWeb制作コース初級編DAY10の学び

【この記事に書いてあること】

プログラミング学習10,11日目⏩

Web制作コース　初級編DAY10　?

学習時間:25分⏳

学習内容:Bootstrapの基本を学ぶ✏

学び?
・BootstrapはHTMLのclass名に書くだけで、CSSが反映される
・Bootstrapを使用するには、専用のスタイルシートを読み込む必要がある#デイトラ #プログラミング初心者 pic.twitter.com/EyymHvD6cp
— ふりっく?トリプルゼロの（これから）フリーランス (@FuRiC_twi) January 25, 2021

　【学習時間】

25分

　【学び】

1　Bootstrapの使い方
Bootstrapを使用するには、専用のスタイルシートを読み込む必要がある
index.html

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
2 よく使うBootstrapのclass名

・文字の色を変える（青）：text-primary

・文字を中央に置く：text-center

・文字を左右に置く（右）：text-right

・文字を太くする：font-weight-bold

・文字を細くする：font-weight-light

・文字の背景に色を付ける（青）：bg-primary

・フォントをサイズを変更する(一番大きい)：display-1

↓

3 Bootstrapのclass名は公式サイトのドキュメントに掲載してある
参考サイト: Bootstrapドキュメント

https://getbootstrap.jp/docs/5.0/getting-started/introduction/

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-27T18:43:24+09:00

Bootstrapの基礎①

デイトラWeb制作コース初級編DAY10の学び

【この記事に書いてあること】

プログラミング学習10,11日目⏩

Web制作コース　初級編DAY10　?

学習時間:25分⏳

学習内容:Bootstrapの基本を学ぶ✏

学び?
・BootstrapはHTMLのclass名に書くだけで、CSSが反映される
・Bootstrapを使用するには、専用のスタイルシートを読み込む必要がある#デイトラ #プログラミング初心者 pic.twitter.com/EyymHvD6cp
— ふりっく?トリプルゼロの（これから）フリーランス (@FuRiC_twi) January 25, 2021

　【学習時間】

25分

　【学び】

1　Bootstrapの使い方
Bootstrapを使用するには、専用のスタイルシートを読み込む必要がある
index.html

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
2 よく使うBootstrapのclass名

・文字の色を変える（青）：text-primary

・文字を中央に置く：text-center

・文字を左右に置く（右）：text-right

・文字を太くする：font-weight-bold

・文字を細くする：font-weight-light

・文字の背景に色を付ける（青）：bg-primary

・フォントをサイズを変更する(一番大きい)：display-1

↓

3 Bootstrapのclass名は公式サイトのドキュメントに掲載してある
参考サイト: Bootstrapドキュメント

https://getbootstrap.jp/docs/5.0/getting-started/introduction/

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-27T18:13:39+09:00

p5.js で様々なパターンを描画してみた #2

1. はじめに

以下Qiita記事の続きになります。

Qiita：p5.js で様々なパターンを描画してみた
https://qiita.com/Haruka-Ogawa/items/8ecb8692bf7455e7f124

今回は p5.js を使用して、ハート柄・星柄を描画します。

2. 準備

p5.jsを使用するにあたって、
以下Qiita記事の第２項を参考に準備します。

Qiita：p5.js で様々なパターンを描画してみた > [2. 準備]
https://qiita.com/Haruka-Ogawa/items/8ecb8692bf7455e7f124#2-%E6%BA%96%E5%82%99

3. コーディング

3-1. ハート柄

p5.js を使用して、ハート柄を描きます。

3-6-1. サンプル

See the Pen p5.js_Heart pattern by Haruka Ogawa (@haruka0121) on CodePen.

3-6-2. 解説

以下に、ハート柄を描くための sketch.jsの内容を示します。
sketch.js
function setup() {
  createCanvas(800, 500);  //サイズ
  background('#191970');   //背景色： 藍色（#191970)
}

function draw() {
  noStroke();  //ストローク無効化

  let size = 25;  //ハートのサイズ
  let space =40;  //ハートの間隔

  for (x = 0; x <= width; x += space) {
    for (y = 0; y <= height; y += space) {
      fill('#B6FF01');    //図形の塗り潰し:黄緑色(#B6FF01)
      heart(x, y, size);  //ハート描画
    }
  }
}

function heart(x, y, size) {
  beginShape();     //ハート描画開始
  vertex(x, y);     //頂点座標
  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);  //ベジェ曲線 描画
  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);  //ベジェ曲線 描画
  endShape(CLOSE);  //ハート描画終了
}
・ setup関数内記述

setup()には、サイズ 800px × 500px、背景色青紫（#191970）の描画領域を設定します。
function setup() {
  createCanvas(800, 500);  //サイズ
  background('#191970');   //背景色： 藍色（#191970)
}
・ draw関数内記述

draw()には、ハート柄を描くための処理を記述します。
function draw() {
  noStroke();  //ストローク無効化

  let size = 25;  //ハートのサイズ
  let space =40;  //ハートの間隔

  for (x = 0; x <= width; x += space) {
    for (y = 0; y <= height; y += space) {
      fill('#B6FF01');    //図形の塗り潰し:黄緑色(#B6FF01)
      heart(x, y, size);  //ハート描画
    }
  }
}
使用した関数は、以下の通りです。

関数説明

noStroke() ストロークの描画を無効にする。

fill() 図形を塗りつぶす色を設定する。

heart() ハートを描画する。draw()の後でheart()の処理内容を記述する。

noStroke()

noStroke()でストロークの描画を無効にすることができます。 

noStroke()の構文は以下の通りです。
noStroke()
p5.js Reference： noStroke() 
https://p5js.org/reference/#/p5/noStroke

fill()

fill()で図形を塗りつぶす色を設定することができます。
 fill()の構文は以下の通りです。
fill(value)
p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

heart()

ハートを描画するheart()を、この後作成します。

- heart関数内記述

heart()には、ハートを描くための処理を記述します。

p5.js Web Editor： Heart shape 
https://editor.p5js.org/Mithru/sketches/Hk1N1mMQg
function heart(x, y, size) {
  beginShape();     //ハート描画開始
  vertex(x, y);     //頂点座標
  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);  //ベジェ曲線 描画
  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);  //ベジェ曲線 描画
  endShape(CLOSE);  //ハート描画終了
}
使用した関数は、以下の通りです。

関数説明

beginShape() 複雑な図形描画の開始。

vertex() 図形の頂点座標を指定する。beginShape()およびendShape()内で使用できる。

bezierVertex() ベジェ曲線の頂点座標を指定する。

endShape() 複雑な図形描画の終了。

beginShape()

beginShape() と endShape() を使用して、複雑な図形を描画することができます。
beginShape() は図形の頂点の記録を開始します。

 beginShape()の構文は以下の通りです。
beginShape()
p5.js Reference： beginShape() 
https://p5js.org/reference/#/p5/beginShape

vertex()

vertex()は、
beginShape()およびendShape()関数内で、図形の頂点座標を指定します。 
vertex()の構文は以下の通りです。
vertex(x, y)
xに頂点のx座標、yに頂点のy座標を指定します。

p5.js Reference： vertex()
 https://p5js.org/reference/#/p5/vertex

bezierVertex()

bezierVertex()でベジェ曲線の頂点座標を指定します。

 bezierVertex()の構文は以下の通りです。
bezierVertex(x2, y2, x3, y3, x4, y4)
x2, y2に最初の制御点のx,y座標、 x3, y3に２つ目の制御点のx,y座標、 x4, y4に最後の制御点のx,y座標 を指定します。

p5.js Reference： bezierVertex() 
https://p5js.org/reference/#/p5/bezierVertex

endShape()

endShape()で複雑な図形を描画を終了します。
endShape()で、beginShape()の呼び出し以降に定義された図形が画像バッファーに書き込まれ、形状を閉じます。

endShape()の構文は以下の通りです。
endShape([mode])
modeに CLOSE を使用して形状を閉じます。

p5.js Reference： endShape() 
https://p5js.org/reference/#/p5/endShape

3-7. 星柄

p5.jsを使用して、星柄を描きます。

3-7-1. サンプル

See the Pen p5.js_Star Pattern by Haruka Ogawa (@haruka0121) on CodePen.

3-7-2. 解説

以下に、星柄を描くための sketch.jsの内容を示します。
sketch.js
function setup() {
  createCanvas(800, 500);  //サイズ
  background('#0000FF');   //背景色： 青色（#0000FF)
}

function draw() {
  let size=2;    //星のサイズ
  let space=24;  //星の間隔

  for(let x=0;x <= width;x+=space*size){
    for(let y=0;y <= height;y+=space*size){
      noStroke();  //ストローク無効化
      fill('#FFFF00');  //図形の塗り潰し:黄色(#FFFF00)
      star(x, y, 3*size, 8*size, 5);  //星描画・・・,角の数：５
    }  
  }
}

function star(x, y, radius1, radius2, points) {
  let angle = TWO_PI / points; //points: 5
  let halfAngle = angle / 2.0;
  let n = 175;

  beginShape();  //星描画開始
  for (let a = -n; a < TWO_PI-n; a += angle) {
    let sx1 = x + cos(a) * radius2;
    let sy1 = y + sin(a) * radius2;
    vertex(sx1, sy1);  //星の頂点座標:(sx1,sy1)

    let sx2 = x + cos(a + halfAngle) * radius1;
    let sy2 = y + sin(a + halfAngle) * radius1;
    vertex(sx2, sy2); //星の頂点座標:(sx2,sy2)
  }
  endShape(CLOSE);  //星描画終了
}
・setup関数内記述

setup()には、サイズ 800px × 500px、背景色青（#0000FF）の描画領域を設定します。
function setup() {
  createCanvas(800, 500);  //サイズ
  background('#0000FF');   //背景色： 青色（#0000FF)
}
・ draw関数内記述

draw()には、星柄を描くための処理を記述します。
function draw() {
  let size=2;    //星のサイズ
  let space=24;  //星の間隔

  for(let x=0;x <= width;x+=space*size){
    for(let y=0;y <= height;y+=space*size){
      noStroke();  //ストローク無効化
      fill('#FFFF00');  //図形の塗り潰し:黄色(#FFFF00)
      star(x, y, 3*size, 8*size, 5);  //星描画・・・,角の数：５
    }  
  }
}
使用した関数は、以下の通りです。

関数説明

noStroke() ストロークの描画を無効にする。

fill() 図形を塗りつぶす色を設定する。

star() 星を描画する。draw() の後で star() の処理内容を記述する。

noStroke()

noStroke()でストロークの描画を無効にすることができます。

 noStroke()の構文は以下の通りです。
noStroke()
p5.js Reference： noStroke() 
https://p5js.org/reference/#/p5/noStroke

fill()

fill()で図形を塗りつぶす色を設定することができます。 

fill()の構文は以下の通りです。
fill(value)
p5.js Reference： fill() 
https://p5js.org/reference/#/p5/fill

star()

星を描画するstar()を、この後作成します。

・ star関数内記述

star()には、星を描くための処理を記述します。

p5.js examples: Star 
https://p5js.org/examples/form-star.html
function star(x, y, radius1, radius2, points) {
  let angle = TWO_PI / points; //points: 5
  let halfAngle = angle / 2.0;
  let n = 175;

  beginShape();  //星描画開始
  for (let a = -n; a < TWO_PI-n; a += angle) {
    let sx1 = x + cos(a) * radius2;
    let sy1 = y + sin(a) * radius2;
    vertex(sx1, sy1);  //頂点座標

    let sx2 = x + cos(a + halfAngle) * radius1;
    let sy2 = y + sin(a + halfAngle) * radius1;
    vertex(sx2, sy2);  //頂点座標
  }
  endShape(CLOSE);  //星描画終了
}
使用した関数は、以下の通りです。

関数説明

beginShape() 複雑な図形描画の開始。

vertex() 図形の頂点座標を指定する。beginShape()およびendShape()関数内で使用できる。

endShape() 複雑な図形描画の終了。

beginShape()

beginShape() と endShape() を使用して、複雑な図形を描画することができます。
beginShape() は図形の頂点の記録を開始します。

beginShape()の構文は以下の通りです。
beginShape()
p5.js Reference： beginShape() 
https://p5js.org/reference/#/p5/beginShape

vertex()

vertex()は、beginShape()およびendShape()関数内で、図形の頂点座標を指定することができます。

 vertex()の構文は以下の通りです。
vertex(x, y)
xに頂点のx座標、yに頂点のy座標を指定します。

p5.js Reference： vertex()
 https://p5js.org/reference/#/p5/vertex

endShape()

endShape()で複雑な図形を描画を終了します。
endShape()で、beginShape()の呼び出し以降に定義された図形が画像バッファーに書き込まれ、形状を閉じます。

 endShape()の構文は以下の通りです。
endShape([mode])
modeにCLOSEを使用して形状を閉じます。

p5.js Reference： endShape() 
https://p5js.org/reference/#/p5/endShape

4. おわりに

今回は p5.js を使用してハート柄・星柄を描画しました。

前回より少し複雑な描画となりましたが、
使い方次第で様々な図形を描画できて、自由度の高さを感じました。

参考情報

p5.js 公式サイト
https://p5js.org/

p5.js Web Editor： Heart shape 
https://editor.p5js.org/Mithru/sketches/Hk1N1mMQg

p5.js examples: Star 
https://p5js.org/examples/form-star.html

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
heart()	ハートを描画する。draw()の後でheart()の処理内容を記述する。

関数	説明
beginShape()	複雑な図形描画の開始。
vertex()	図形の頂点座標を指定する。beginShape()およびendShape()内で使用できる。
bezierVertex()	ベジェ曲線の頂点座標を指定する。
endShape()	複雑な図形描画の終了。

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
star()	星を描画する。draw() の後で star() の処理内容を記述する。

関数	説明
beginShape()	複雑な図形描画の開始。
vertex()	図形の頂点座標を指定する。beginShape()およびendShape()関数内で使用できる。
endShape()	複雑な図形描画の終了。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-27T17:18:49+09:00

Electronアプリの作り方

はじめに

Electronという、ChromiumとNode.jsを使ったWeb技術でデスクトップアプリを作ることができるフレームワークを使います。

最初にやること

Node.jsをインストールする

Node.jsをインストールします。
https://nodejs.org/ja/download/
から、自分のOSを選びます。

詳しくはこちらから。
Node.jsをインストールすることでElectronアプリを作ることができます。

フォルダ作成

アプリを作成するためのフォルダを作成します。
今回は、Electronとしました。
$ cd フォルダのパス
としてフォルダを指定する。

package.jsonを作成する
$ npm init -y
package.json
{
  "name": "Electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
このようなファイルが作成される。
アプリのバージョンを変更するには、"version": "1.0.0" を変更する。

Electronをインストールする
$ npm i -D electron
結構待たされる。

srcフォルダ等作成

srcフォルダを作り、その中に

index.html

main.js

package.json

を作成。

index.htmlはご自由に書いてください。
今回はHello worldを表示します。
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Electron</title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
main.js
const { app, Menu, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({width: 1200, height: 675, 'icon': __dirname + 'favicon.ico'})

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));


    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});
'icon': __dirname + 'favicon.ico' でアイコンを指定している。なくても良い。
package.json
{
  "main": "main.js"
}
main.jsを指定

試しに起動してみる
$ npx electron src
Hello worldが表示されました。

パッケージング

electron-packagerを使ってパッケージングする

electron-packagerのインストール
$ npm i -D electron-packager
それでは、パッケージングしていきます。
windows向けです。
$ npx electron-packager src electron --platform=win32 --arch=x64 --overwrite --icon=src/favicon.ico
ここでもアイコンを指定しています。

Electronのデザイン

全画面＆タイトル、メニューバーなし
main.js
mainWindow = new BrowserWindow({kiosk: true, 'fullscreen': true, 'frame': false});
main.jsのnew BrowserWindowを指定しているところに追加する
展示用などにおすすめ。
Ctrl+Wでアプリがシャットダウンされる。

メニューバーなし
main.js
mainWindow.setMenu(null);
new BrowserWindowのあとに追加する。

とてもシンプルで良い。

パッケージングを楽に
package.json
"scripts": {
    "start": "electron ./src",
    "macos": "electron-packager ./src electron --platform=darwin --arch=x64 --overwrite --icon=src/favicon.ico",
    "windows": "electron-packager ./src electron --platform=win32 --arch=x64 --overwrite --icon=src/favicon.ico"
  }
と、追加しておきます。
このとき、忘れずに"start"の前に,を追加してください。
$ npm run windows
とするとかんたんにパッケージングできます。
windowsをmacosに変えるとMacOS向けにパッケージングされます。

まとめ

Web技術でアプリを作ることができました。
サクっとアプリが作れるいい時代ですね。

参考

https://qiita.com/y-tsutsu/items/179717ecbdcc27509e5a

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-27T17:13:43+09:00

【初心者でもわかる】アラートや確認ダイアログを画面中央に表示する方法

どうも7noteです。アラートなどの警告ボックスを画面中央に表示させます。

javascriptのalert等は表示位置を変えることができないので1からオリジナルで作ります。
ボタンを押した後の処理は書いてませんので利用目的に合わせて改良してお使いください。

確認してくるボックスを画面中央に出すソースのサンプル

※jQueryをちょっとだけ使ってます。jQueryって何？という方はこちら。
index.html
<div id="overflow">
  <div class="conf">
    <p>本当に決定してもいいですか？</p>
    <div class="btns"><input type="button" value="キャンセル" onClick="cansel();"> <input type="button" value="オッケー" class="ok" onClick="next();"></div>
  </div>
</div>

<p>これでいいですか？</p>
<input type="button" value="決定" onClick="check();">
style.css
#overflow {
  width: 100vw;  /* 横幅を画面いっぱいにする */
  height: 100vh; /* 高さを画面いっぱいにする */
  background-color: rgba(0,0,0,0.2); /* 背景を半透明の黒い背景にする */
  position: absolute; /* 相対位置に指定 */
  z-index: 10;        /* ウィンドウの全面に表示 */
  display: none;      /* 初期は非表示 */
}

#overflow .conf {
  background: #FFF;   /* 背景を白色に指定 */
  padding: 20px;      /* 余白を20pxに指定 */
  position: absolute; /* 装置位置に指定 */
  top: 50%;           /* 上から50%の位置に配置 */
  left: 50%;          /* 左から50%の位置に配置 */
  transform: translate(-50%,-50%); /* コンテンツの半分だけ位置を戻して上下左右中央に配置 */
}

.btns {
  text-align: right; /* 要素を右寄せにする */
}
.btns .ok {
  /* okボタンの装飾を変えるなら書く */
}
script.js
function check(){
  $("#overflow").show();
}
function cansel(){
  $("#overflow").hide(); // 確認ボックスを消す
}
function next(){
  $("#overflow").hide();
  // ok後の処理を書く
}
結果

解説

標準で出すことのできるalert()やconfirm()は表示位置を変えることができません。
なので、新しくボックスを作り、ボタンを並べてそれぞれ個別に処理を書こうという発想です。

まとめ

今回装飾は最低限にしていますので、自由に装飾してください。
もちろんアラートのボックスを上下中央にしなくても好きな位置に持ってきたり、出し方を工夫したりしてもいいかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-27T14:59:01+09:00

日本語マークダウン案

日本語入力に適したマークダウンを考える。

思いついたことをメモしていくが、完成までの道のりは遠い。

目標

書きやすい

読みやすい

覚えやすい

解析しやすい

ブロック要素
＃見出し1

＃＃見出し2

＃＃＃見出し3


１順序リスト
２順序リスト
３順序リスト

・順不同リスト
・順不同リスト

・複合リスト
  １複合リスト
  ２複合リスト
・複合リスト

｜＃テーブルヘッダ｜＃テーブルヘッダ｜
｜テーブルセル｜テーブルセル｜


＞引用です

‘‘‘
整形済みテキスト
‘‘‘

?http://example.jp/sample.jpg width:300 height:200


；コメント  HTMLには反映しない

上記以外はパラグラフ。
改行も反映される
ブロック要素は空行が来たら終了とする。
トップレベルはブロック要素のみ。

インライン要素

考え中...
＃リンク

【サイト名：http://example.com/】
【http://example.com/】
【Wikiリンク】

＃文字装飾

「装飾したい文字：太い」

　 Tweet
Qiitaで続きを読む

20210127のHTMLに関する記事は7件です。

診断サービス？をつくってみたんだけども

開発者のレベル

診断サービスをつくろうと思った理由

つくったサービス

どうやってつくったか？

改善点

1.診断結果をシェアするときに画像も一緒にツイートさせる。

2.コードに対する理解を深める。

3.httpをhttpsにしたい。

バラージとはなにか？

つくってよかったこと

Bootstrapの基礎

デイトラWeb制作コース初級編DAY10の学び

【この記事に書いてあること】

【学習時間】

【学び】

↓

Bootstrapの基礎①

デイトラWeb制作コース初級編DAY10の学び

【この記事に書いてあること】

【学習時間】

【学び】

↓

p5.js で様々なパターンを描画してみた #2

1. はじめに

2. 準備

3. コーディング

3-1. ハート柄

3-6-1. サンプル

3-6-2. 解説

・ setup関数内 記述

・ draw関数内 記述

- heart関数内 記述

3-7. 星柄

3-7-1. サンプル

3-7-2. 解説

・setup関数内 記述

・ draw関数内 記述

・ star関数内 記述

4. おわりに

参考情報

Electronアプリの作り方

はじめに

最初にやること

Node.jsをインストールする

フォルダ作成

package.jsonを作成する

Electronをインストールする

srcフォルダ等作成

パッケージング

electron-packagerのインストール

Electronのデザイン

全画面＆タイトル、メニューバーなし

メニューバーなし

パッケージングを楽に

まとめ

参考

【初心者でもわかる】アラートや確認ダイアログを画面中央に表示する方法

どうも7noteです。アラートなどの警告ボックスを画面中央に表示させます。

確認してくるボックスを画面中央に出すソースのサンプル

解説

まとめ

おそまつ！

日本語マークダウン案

目標

ブロック要素

インライン要素

日付別

タグ一覧

　【学習時間】

　【学び】

　【学習時間】

　【学び】

・ setup関数内記述

・ draw関数内記述

- heart関数内記述

・setup関数内記述

・ draw関数内記述

・ star関数内記述