今さら聞けないHTML 2021年11月03日

今さら聞けないHTML 2021年11月03日

tableタグ・Cannot set properties of null (setting ‘textContent’)

“`

おはよう こんにちは こんばんわ

“`
このようにtableタグで囲み忘れてしまうと、テキスト意外認識してもらえない。なのでcss、javascriptが効かなくなってしまう。
![スクリーンショット 2021-11-03 11.56.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2241999/f0be59bf-411b-d131-d9f9-31152002d1d2.png)
![スクリーンショット 2021-11-03 11.58.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2241999/9764467d-969b-44e5-7738-1420ad9f0597.png)
![スク

元記事を表示

「絶好調」「好調」「普通」「不調」「絶不調」を顔判定!

##今日の体調を顔で判定してくれる!
出社時、上司に「顔疲れているよ、大丈夫?」とか、「疲れてそうだね」とか顔で決めつけられるシーンとかよくありますよね?店舗で勤務している時も従業員に、「店長大丈夫?最近寝てないでしょう?」「店長顔が老けた」とか言われることが多々ありました。
自分では、「結構寝てるのに」とか「疲れてないんだけどなぁ」とか感じるシーンがよくありました。
自分で見る顔と他者から見た時の顔の印象って大きく違うという事ですね!

##そんな課題を解決する仕組みを開発
自分の顔の状態を確認できる仕組み。
「絶好調」「好調」「普通」「不調」「絶不調」と顔で認証してくれる。
また、状態に合わせたコメントも見れる仕組み。
「絶好調」:ガンガン攻めてこう!
「好調」:そこそこ攻めよ!
「普通」:平常心
「不調」:今日は、やめとけ!顔が疲れてる!
「絶不調」:早急にレッドブルを!人と顔を合わせない方がいい!

##成果物
①codepenを張る
②写真も載せる

##開発環境
・[TeachableMachine](https://teachablemachine.withgoogl

元記事を表示

プログラミング言語を暗記するのは効率が悪い

プログラミング言語を暗記するのは非常に効率が悪い

初めて機械学習のプログラミングをやった時
いろいろな言語を暗記して勉強していたけど
とても効率が悪かった

プログラミング初心者の人は
右も左もわからないから
暗記してしまう人もいると思います。

暗記するのではなく
メモ帳にまとめるだけで
暗記するという無駄な時間がなくなり

勉強効率がすごく上がるとおもいます。

元記事を表示

【Vue.js】v-else-if

#はじめに
こんにちは!
今回は【Vue.js】v-else-ifについてアウトプットしていきます!

#v-else-ifとは
`v-if`→`v-else-if`→`v-else`といった感じで使われます。
`v-if`でない時は`v-else-if`が表示される。そうでもない時は`v-else`というイメージです。
Javascriptでいうところの`else if`に相当します。

#書き方・解説
例題として信号機の色の示す意味を出力するプログラムを書いていきます。

“`HTML:HTML

Stop

Caution

Go

Not red/yellow/blue

“`
“`Vue.js
var app = new Vue({
el: “#app”,

元記事を表示

Java WordをHTMLに変換

はじめに

HyperText Markup Language、略してHTMLは、ハイパーテキストを記述するためのマークアップ言語の1つです。日常の仕事でWordをHTMLに変換する場合がよくあると思います。なので、今回はSpire.Doc for Javaというライブラリを活用して、WordをHTMLに変換する方法を紹介します。

Spire.Doc for Javaとは?

Spire. Doc for Javaは、Eiceblue社が開発され、開発者が JavaプラットホームでWordのドキュメン

元記事を表示

ウェブサイト用の17の無料ツールチップライブラリ

今日は、多くの便利な機能を備えたWebページ用のHTML CSSJavascriptで機能的なツールチップを作成するのに役立つライブラリを学習します。
#ツールチップとは何ですか?
ツールチップは、ユーザーがWebページ内のオブジェクトにカーソルを合わせたときに詳細に注釈を付けるのに役立つ要素です。 私の意見では、それはサイトの新しいユーザーがその追加情報を通して機能を明確に理解するのを助けるでしょう。 通常はタグのtitle属性のように見えますが、ツールチップライブラリを使用すると、美しいツールチップを簡単に設計して、サイトに機能を追加できます。

#Tippy.js
Tippy.jsは、ツールチップを簡単に作成できる強力なライブラリです。 ツールチップテーマの設定、ツールチップのネスト、表示位置の変更など、ツールチップ機能をHTMLオブジェクトに拡張する柔軟性があります。 また、非常に簡単で、npm、yardを介してインストールすることも、CDNを使用して直接使用することもできます。 HTMLページ(reactサポートライブラリも利用可能)。 また、Webサイトに適用可能な場合にプ

元記事を表示

【Vue.js】条件付きレンタリング v-ifとv-else

#はじめに
こんにちは!
今回は【Vue.js】v-ifとv-elseについてアウトプットしていきます!

#v-ifとv-elseとは
真偽値により要素の表示/非表示を切り替えることができる。

#書き方・解説
“`HTML:HTML

YES

NO

“`
“`Vue.js
var app = new Vue({
el: “#app”,
data: {
toggle: true
}
})
“`

![スクリーンショット 2021-10-24 14.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/a1de2520-a61c-9473-1bf3-e740c950aa4e.png)

`toggle`が`true`なのでYESと表示されています。
`toggle`が`false`なのであればN

元記事を表示

記憶の回収をお手伝い!飲酒量&お会計記録Webアプリ!  #codepen #javascript #html

#昨日もいつの間にか記憶がない!!
お酒でこんな経験ある方いませんか?
勧められるがままにお酒を飲んでいたら、いつの間にか記憶がない・・・!

***一体どれだけ飲んだんだ?!***
***会計どうなった?〇〇さん払ってくれましたっけ?***
***そしてこんなことになるの何回目?!***

#飲酒量もお会計も安心!次の日の確認も簡単!!
そんなあるあるに対抗するためにこんなものを作りました!
もはや飲み会中は常にこれを開いていれば安心?!

https://quizzical-mayer-a57428.netlify.app

~ポイント~

***①***何件ハシゴしても***自分が飲んだ杯数だけ***を記録できる!

***②***蓄積されていくから、***まずい!もうこんなに飲んでるって危機感も覚えやすい***。

***③***会計も記録できるので、よくある***会計どうなった?!問題も次の日に確認できる!***

***④***そして***どんな酔っ払いでも簡単に操作***できます。(クリアボタンを押すミスだけ注意)

#CodePenを初めて使ってみました。
仕様

元記事を表示

無料のナビゲーションライブラリ

2021年に、いくつかの人気のあるライブラリとナビゲーションビルダープラグインをWebサイトに導入しました。
#Webナビゲーションとは何ですか?
ナビゲーションはWebサイトの不可欠な部分であり、その主な機能は、ユーザーがWebサイトの主要なセクションに簡単に移動できるようにすることです。 ナビゲーションを設計する際の最初の条件は、ユーザーが簡単にアクセスして使用できることです。 次に、より便利な機能と美しいデザインを組み合わせます。

#Vertical Fixed Navigation
垂直ナビゲーションをすばやく簡単に作成できます。 これにより、ユーザーはページのコンテンツをより一般的に表示し、サイトのセクションにすばやく移動できます。 右側の各ボタンにカーソルを合わせると、重要な情報が自動的に表示されます。 私が気に入っているのは、コンテンツを編集し、各ナビゲーション要素のスタイルを設定する方法の詳細な手順です。
![Vertical Fixed Navigation](https://res.cloudinary.com/dn4nxz7f0/image/upload/v15

元記事を表示

inputのradioボタンをカスタマイズしようとして、borderが効かない時・・・

#はじめに
radioボタンのカスタマイズ、**超めんどくせぇ・・・**

そう思いませんか?擬似要素を使ったり、何か色々とコネコネせんとダメっぽい・・

と言うのを、思い知った記念の記事となります!

##環境
・Nuxt.js
・bootstrap

#あれ?radioボタンの色が変わらんのやけど??
普通にinputタグの`background`と`border`を変えたらいいのかな〜?とか思ってると、全然ダメでした。。。

“`vue:index.vue

`
``
``
`

`

css property
`.id{text-align:left;
color:;}``

参照
https://qiita.com/shizen-shin/items/a997bc228fa2850c9fce

元記事を表示

ウェブサイト用の16ファイルアップロードHTML5

コンポーネントファイルのアップロードは、今日のWeb開発で一般的に使用されている機能です。 必要に応じて、画像、製品、ビデオ、およびその他のファイルタイプをWebサイトにアップロードできます。 今日は、CSS、Javascriptを使用して事前に設計されたファイルアップロードテンプレートをいくつか紹介します...あなたのウェブサイトが美しいデザインとより多くの機能を持つのを助けるために...

#ファイルJqueryをアップロード
![ファイルJqueryをアップロード](https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/upload-file/Upload%20File%20Jquery.png)
以下の結果をご覧ください!

WebAssemblyを使ってJavaScriptからC++を動かしてみよう!

みなさんこんにちは、こんばんは!!!!
今回はWebAssemblyを使ってJavaScriptからC++を動かしてみます

:::note warn
なおこの記事を書いた人はただの高校生です 最近はライブラリに頼らず自力で図形描画してたりします
初投稿記事です
:::
認識が間違ってるよ、とかあればコメント欄で連絡してくれるとありがたいです。助かります。

# そもそもWebAssemblyって?
簡単に要約すると「高水準の言語をバイナリー形式に変換してウェブ上から動かすことができる」というのです

JavaScriptに実行速度が求められる時代になりましたが、インタプリンタ型で動的型付けをしている以上、コンパイラ言語より遅くなってしまう問題があります (グラフィック使ったりめちゃくちゃ凝ったサイトとかあるもんね)

そこでWebAssembly、バイナリに変換することで実際に読み込む量を減少させることができ、またC++など処理が速い言語を利用することができます

最高ですね

# 使ってみよう インストール
今回はwasmを作ってもらうためにemscriptenを使うことにします

元記事を表示

【Vue.js】算出プロパティと監視プロパティの比較

#はじめに
こんにちは!
今回は【Vue.js】算出プロパティと監視プロパティについて比較していきます!

#算出プロパティ VS 監視プロパティ
算出プロパティと監視プロパティどちらでも実装できてしまう場合、基本的には**算出プロパティ**を利用することを推奨されている。理由としてはシンプルに記述することができるからである。

#書き方・解説
今回は以下のように、**firstNameテキスト**、**lastNameテキスト**を入力したら
`fullName: firstName スペース lastName`
と表示されるようにしていきます。
これを`算出プロパティ`と`監視プロパティ`で記述し比較していきます。

![スクリーンショット 2021-10-19 20.51.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/0bc4ddd4-2adf-a495-4374-d9fbf1a0cd96.png)

```HTML:HTML

元記事を表示

VS Codeの拡張機能:Live Sass Compilerではuseとforwardが使えない

※この記事は2021年10月28日に書いた記事になります。

#Live Sass Compilerについて
**Live Sass Compiler**はVS Codeの拡張機能であり、これをインストールすると自動でSassからcssへと変更する非常に便利なものです。しかし、少し対応していないことがあります。それがUseとforwardが使えない点です。

#Sass公式はimportを推奨していない
[公式](https://sass-lang.com/documentation/at-rules/import)には以下のことが書いてあります。

"**The Sass team discourages the continued use of the @import rule.** Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that

元記事を表示

ウェブサイトのデザインのための12のカラーピッカー

今、私たちはウェブデザインの色選択をサポートするツールを一緒に学びます 2021年に一般的に使用されました。

色はウェブデザインの重要な要素の1つであり、大きな注目を集めています。 ユーザーにアイデアを提供し、特定の意味を表現し、ウェブサイトとの相互作用を増やします... あなたのウェブサイトに適切な配色を選択することは難しく、多くの深い知識を必要とします。 したがって、 上記の問題を解決するために、カラーパレットの作成が生まれました。

#Color Hunt
Color Huntは、GalShirによって作成されたオープンパレットコレクションです。 それはデザインの同僚の間でパレットを共有するというアイデアから始まりましたが、その有用性のために、ますます多くの人々がパレットを作成してこのサイトで共有しています。 ウェブサイトを利用するためにアカウントを登録する必要はありません。 ウェブサイトの原色を入力するだけで、サイトに適した配色が自動的に検出されます。 または、このサイトで独自のカラーパレットを共有することで、コミュニティをサポートすることもできます(ただし、Color Hu

元記事を表示

OTHERカテゴリの最新記事