【初心者でもわかる】たった1行でカラーピッカーを実装

#どうも7noteです。1行で作るカラーピッカー（※IE非対応）

HTMLではカラーピッカーをたった1行で作成できてしまいます！

“`index.html

“`


ちょっとわかりにくいかもですが、左上の小さいボタンらしき四角をクリックすると、カラーピッカーを表示することができます。

## 応用編：カラーピッカーの値を取得して、WEBサイトの背景色を変更する

“`index.html

“`

“`script.js
// カラーピッカーを変数に格納
var picker = document.getEl

【Scss】フォームのcheckbox自作例

##HTML

“`html:index.html




プライバシーポリシーに同意します。
“`

##Sass

“`scss:style.scss
.contact-privacy {
position: relative;
display: inline-block;
width: 22px;
height: 22px;
[type=”checkbox”] {
position: absolute;
top: 0;
left: 0;
opacity: 0;

&:checked + .contact-privacy_part {

htmlの一番端に枠線を引く方法

***bodyとかhtmlにborderいれると枠をはみ出してしまうので、その解決策***

開発環境：
macosx catalina　バージョン10.15.17
visualStudioCode

以下をbodyタグに入れて、枠線にすることで解決できる
“`
box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
-webkit-box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
-moz-box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
“`

引数を使ったデータの呼び出し方　備忘録

“`〇〇.html.erb
<%= f.collection_select(:category_id, Category.all, :id, :name, {}, {class:"select-box", id:"item-category"}) %>
“`

第一引数, category_id
保存先のカラム名

第二引数, Category.all
配列データを指定する

第三引数, id
表示する際に参照するDBのカラム名

第四引数, name
実際に表示されるカラム名

第五引数, {}
（オプション) 今回はオプションの指定なし
（include_blankという値のない選択肢を先頭にするオプションなどがあります。）

htmlオプション {class:”select-box”} 今回はクラス名を付与
（cssを当てるため）

**リストを入れたモデルを作成し、そのモデルからデータを取り出す為ビューに使用したコード**です。一時は引数を省略しすぎて、表示できませんでしたが、引数の意味合いを考え、入力していきたいです。

【初心者ならわかる】HTML・CSSのよくやりがちな誤字と、スペルミスを減らす方法

# どうも7noteです。初心者ならではのよくやってしまいがちな誤字集を作ってみました。スペルミスを減らす方法も！

初心者のうちはまだHTML・CSSに慣れていなくて「あれ、うまく効かないなぁ」なんて事が多いと思います。

そして原因を調べてるうちに、あることに気付きます。

***「ここスペルミスってるやん。」***

そんなあるあるを一覧にしてみました。
誤字を探すときに参考にしていただければと。

また**スペルミスを減らす方法についても後半でまとめています！**

## HTML・CSSでやりがちな誤字

### HTML編
|◎ 正しいスペル|✕ 間違ったスペル|間違っている理由・補足|
|:–|:–|:–|
|header|herder|「a」が「r」になってる|
|footer|fotter|「o」ではなく「t」が2個ある|
|nav|navi|「i」がいらない|
|table|tabre
teble|「l」が「r」になってる
「a」が「e」になってる|
|form|from|「o」と「r」が逆になってる|
|button|botton
but

HTMLとCSSのあれこれ

忘備録。

# html
##目次
– 水平線の種類

###水平線の種類

* none
* ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
* hidden
* ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はhiddenの値が優先されます。
* solid
* 1本線で表示されます。
* double
* 2本線で表示されます。
* groove
* 立体的に窪んだ線で表示されます。
* ridge
* 立体的に隆起した線で表示されます。
* inset
* 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
* outset
* 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ま

canvasやiframeをアスペクト比16:9で表示する(レスポンシブ)

最近マップやキャンバス、動画をアスペクト比16:9で表示させることが多いためメモ。

“`html:canvas.html

“`

“`css:canvas.css
.canvas-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
}

canvas{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
“`

Nuxt.jsのpugテンプレートをHTMLに書き換える方法

Nuxt.jsでtemplate部分をpugで記述していたのですがHTMLに書き換えたときのメモです。

# なぜやめるのか？
やめた理由はeslint-plugin-vueが効かないからです。
これにより書き方に統一感がなくエラーも自力で発見しないといけないなどもろもろの問題が見えてきました。

他にもソースのサンプルがだいたいHTMLで書かれている、
pugでできることはだいたいvueでもできるなどから
pugからHTMLにすることにしました。

## どうやって書き換えるのか？

https://www.npmjs.com/package/@plaidev/pug-to-html

こちらのツールを利用しました。
vue-pug-to-htmlというのがもともとあったようなのですが

– Jadeにも対応
– テンプレートエンジンのオプションに doctype を指定する
– タグの属性中の HTML Entities の変換

を拡張してくれています。

## pug-to-htmlをインストール

npm

“`
npm i -g @plaidev/pug-to-html

Slimの書き方　メモ

#基本的な書き方

“`
/ hello 　　　　　//　コメント
/! hello　　　　　//　ブラウザのhtmlに表示されるコメント
.test　　　　　　//　

#test　　　　　　//　

h3 hello　　　　//　

hello

-　　　　　　　　//　<% %>　rubyのコードを書くとき
=　　　　　　　　//　<%= %>　変数などrubyの値を出力するとき
“`

・クラスやidが複数になるときは、`div.btn.btn-primary.text-danger#test hello`のように繋げて書いていく

・htmlの文字列とコントローラーから持ってきた変数などの連携は、

“`slim
p
| 氏名：#{name}
“`

と繋げる。
pタグの時はpタグのすぐ後ろに文字列を書いていくのではなく、段を下に下げて`|`を最初に加えて書いていく。

「WP-PostViews」プラグインでタグを人気順（閲覧数順）に表示する方法

WordPressって情報が豊富にあって便利な分、情報が無いときにしんどい思いをすることもあります。
最近開発したWebメディアで、タグを人気順に並べる要望があったのですが、全く情報がなかったので自分で作ることになりました。
知識のある人からすると何てことはないと思うのですが、誰か同じことで困っている人のためになればと思い、まとめてみようと思います。

##結論
まず結論から。
WordPressで「WP-PostViews」プラグインを有効化し、以下のコードでタグを人気順に並べて表示することが可能です。
（ここでは紹介のためにHTMLと混合して書いていますが、実際はそれぞれの環境に合わせてfunction.phpにまとめてメソッド化するべきでしょう。）

“`php

‘post’,
‘post_status’ => ‘publi

HTML, CSS, JavaScriptで掲示板システムを作ってみた【その3-要素が重なる問題】

#あらすじ
可愛い掲示板を作ってアンカーを実装したはいいものの、コメントを指差すアンカーをリンクで修飾してしまい、NotFoundエラーが出されてしまっていました。そこで、前回はアンカーをリンクではなく色付き文字だけで表現し直し、アンカーをクリックするとエラーページが表示される問題を解決しました。
【作っている掲示板】

しかしながら、新たにポップアップしたメッセージが下に隠れてしまう問題を新たに発見したので今回はそれを修正することにしました。
![スクリーンショット 2021-05-18 10.30.10.png](https://qiita-image-store.s3.ap-north

【Python】教科書の要約がダルかったので自動でキーワード抽出してサボってみた

#はじめに
皆さんは、教科書の要約がめんどくさいと思ったことはありませんか？
僕は、思ったこと**しか**ありません。

今回は、Python のキーワード抽出ライブラリを使って、
**「要約で外してはいけないキーワードをどれだけ拾えるか」**
を検証していきます。
あわよくば、毎週のように出る教科書の要約課題を **(準)自動化** するのが目標です。

余談ですが、僕は最近 YouTuber を始めました。

[](https://youtu.be/uo8DLigidO8)
[【怠惰】教科書の要約がダルかったので自動でキーワード抽出してみた – YouTube](https://youtu.be/uo8DLigidO8)

admin lte で管理者画面を作る

## 内容
admin lteをつかって管理者画面を作る

## やりたいこと
URL http://localhost:3000/admin/users　
views/admin/layoutsディレクトリに管理者画面をつくる

## 手順
[](https://gyazo.com/4829cb338fbf10653d6edd6ef74e8dc4)

今回はyarnをつかってインストールする

“`
$ yarn add admin-lte@^3.1.0
“`
node_modulesディレクトリの
`starter.html`を拝借！！（コピペ）

CDNでstyleを持ってくる

“`html

【初心者でもわかる】某スケッチブック風の交互に2色ずつ背景色を指定する方法

#どうも7noteです。4等分して背景色を交互に2色ずつ指定する方法

某有名スケッチブック風の交互に背景色を指定して、少し斜めにしたものを作ります。


## ソース

“`inex.html

“`

“`style.css
.box {
width: 100px; /* 幅を100pxに指定 */
height: 150px; /* 高さを150pxに指定 */
overflow: hidden; /* はみ出た部分を非表示にする */
}

.box .sketchbook {
width: 200%; /* 幅を倍のサイズにする */
height: 200%; /* 高さを倍のサ

Webブラウザで使えるメモ帳アプリを作成してみよう#1〜独学でどこまで作れるのか〜

プログラミング初心者です。
開発の備忘録として書いています。

HTML・CSSを初めて勉強する人で何から手をつけていいかわからない方向けです。
私も初心者なので、間違っている点があると思いますが、ご了承ください。

#目標

メモ帳アプリを作ること。

最終的な全体のイメージ図は、まだ固まっていませんが、以下サイトを参考にする予定。
https://mimemo.io/m/new

#第1回目の完成度


htmlのコードは下記です。

“`memo.html





【JavaScript】記述方法まとめ

# JavaScriptの記述方法
– HTML内外への記述方法
– コメントアウトの記述方法
– 変数の記述方法

##HTML内外への記述方法
###1.HTMLのbody内に記述
＜script＞＜/script＞で囲って記述する。

####メモ
短い記述や、動作確認の際に最適。
複数ファイルで同じJavaScriptを使いたい場合は非効率なので、2番の方法の方が良い。

例）

“`html

テキスト

“`

###2.拡張子.jsの外部ファイルに記述
htmlのhead内に＜script src=”リンク先とファイル名.js”＞＜/script＞で追加する。

####メモ
複数のJavaScriptファイルがある場

HTML+CSSでトグルスイッチ

HTMLとCSSでシンプルなトグルスイッチを作ります。

# デモ

# 解説
## HTML
HTMLはシンプルにいきます。セマンティックなHTMLを心がけます。

“`html
Click Me
“`

楕円部？が``本体、中の●が``の::before (pseudo-element)です。
普通のチェックボックスも使う場合は``は`class=to

素人がGW中に履歴書作成ウェブアプリを作ってみたよ

（職業訓練校でWebデザインとAIを学習したばかりの）素人が、ゴールデンウィークを利用して、履歴書作成ウェブアプリを作ってみました。?
　ウェブアプリといっても、HTML、CSS（SCSS）、JavaScriptのみで構成されていて、ソースをダウンロードしてローカル実行も可能です。

できれば、ソースとか見て意見等を頂きたいです。
勝手ですいません?

## Webサイト
下記ページにアクセスすれば利用できます。

– [提供ページ](https://www.mikuro.works/portfolio/works/resume_editting/)
– [GitHub](https://github.com/bonji-396/resume_editting)


## ターゲット
履歴書作成ウェブアプリです。

「日本独自

【初心者でもわかる】2枚の画像を重ねる3つの方法

# どうも7noteです。画像をテキストや文字に重ねたいときに使える3つの方法を解説

## ①背景画像にする

背景画像を指定してしまえば、画像の上に文字や別の画像を設置できます。
ただし、背景画像を前面に持ってくることはできません。

“`index.html

“`

“`style.css
.box {
background: url(sample02.jpg); /* 背景画像に緑の画像を指定 */
width: 800px; /* 画像にあわせて適当な幅を指定 */
padding: 20px; /* 適当な余白を指定 */
}
“`


## ②position指定で重ねる

position指定

作成したHTMLファイルをFirebaseで公開する

最近、Firebaseを使い始めた為、作成したHTMLファイルをFirebaseで公開するための、環境構築からdeployまでの流れを記録しておきたいと思います。

# 対象読者

– Firebaseを初めて使用する人
– HTMLファイルを作成したが、公開のやり方がわからない人
– Web制作、Web開発初心者の人

# 前提条件

– 既に公開用のHTMLファイルが作成されていること(SPAではないことを前提として手順を書いています)
– [Node.js](https://nodejs.org/ja/)がインストールされていること
– npm コマンドを使用する為、windowsの場合は[gitbash](https://gitforwindows.org/)などをインストールしておいてください

# Firebaseの設定

## Firebaseプロジェクトの作成

[Firebaseの公式ページ](https://firebase.google.com/?hl=ja)を開く
※Firebaseのプロジェクト作成はGoogleアカウントで行います。
右上のアイコンを押