今さら聞けないHTML　2019年11月06日

セレクトボックス初期値未選択(select or AdminLteSelect2 使用パターン)

## selectタグ

“`:js
const $(selectのセレクタ).selectedIndex = -1;
“`

[参照]

[JavaScript] セレクトボックスを未選択状態にする

## adminLteライブラリselect2を使用したとき

“`:js
const $(selectのセレクタ).val(null).trigger(‘change’);
“`

[参照]
https://r17n.page/2019/09/01/jquery-select2-initialize-and-clear/#HTML-JS-single

アコーディオンの速度を統一する

“`index.html

aaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

See the Pen
枠の上に文字を乗せる by wintyo (

• 見出し1

  

  イチゴ（苺、莓、Fragaria）はバラ科の多年草。食用として供されている部分は花托（花床ともいう）であり果実ではない。

• 見出し2

【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞ

#この記事は
普段CSSでコーディングしているけど、
Scssも便利らしいし勉強しなきゃなあと思ってる人向けの記事だよ！！

わたしも初めからScssを使ってたわけではないので、使ってみるまでいまいち便利さがわからなかったんだが、
今はもう逆にCSSでどうやって書いてたかよく覚えてないぞ・・・(´-ω-｀)うぬぅ

#Scssって何？
>Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSSを便利に使えるように拡張した言語です。

-[SASS (scss) の基本的な使い方/Web Design Leaves](http://www.webdesignleaves.com/pr/css/css_basic_08.html)

CSSとだいたい一緒だけど、色々できてめちゃ便利になったのがSassって感じだな。

##あれ？Sass？Scssじゃないの？
SassとScssはだいたい一緒だけど、ちょっと違う。
で、CSSから入ってるひとなら絶対Scssのが親しみやすい。

違いはあとで説明するけど、簡単に言

HTML CSS

タグを使ってみる

テーブル（表）を使う機会があったので。
簡単に自分用のメモ。

##シンプルなテーブル

“`table.html

margin が相殺される場合とされない場合

#相殺される場合

“`html

“`

“`css
.box {
width: 200px;
height: 200px;
margin: 20px;
border: 1px solid red;
}
.box2 {
width: 200px;
height: 200px;
margin: 20px;
border: 1px sol

HTML CSS 【パンくずリスト】ってなんですか？

##パンくずリストとは
[メルカリより]https://www.mercari.com/jp/guide/car/transport_guide/
こういうのとか

[Web Design Trendsより]https://webdesign-trends.net/entry/2310
こういうのを**パンくずリスト**という

###名前の由来
童話「ヘンゼルとグレーテル」からきているとのこと。

###パンくずリストを作ろう

“`bread-c

htmlの特殊文字の表示

Railsでアプリケーションを作成しているときに、データベースから引っ張ってきた数値に、hamlで単位として「%」をつけようと思ったらエラーが発生したので調べました。

## エラーと修正
### エラーの場合
“`index.html.haml
= record.GA
%
//⬆︎この「%」の書き方だとエラーが出る
“`
record.GAというのがデータベースから持ってきている数値です。
その後に「%」をつけようとしました。
結果、こうなりました。
どうやらタグとしてみられたようです。

### 修正した場合
“`index.html.haml
= record.GA
%
//⬆︎これが特殊文字の表記の仕方(%の場合)
“`
こういった書き方をするとビューにも%がきちんと表示されます。
基本的には、&〇〇;という風に囲んであげる

webプログラミングってなに？始めるためにまずやること

#webプログラミング言語とは？
webプログラミング言語は、webサービスにおいて自分のアイデアを形にしたり、みんなに使ってもらったりするための言語です。
大きく分けるとフロントエンドとバックエンドの２つに分類することができます。

###フロントエンドとは
フロントエンドとは、ブラウザに働きかけるもので、簡単に言うと「見せる」モノです。ホームページやブログなど目に見える部分を担当する言語です。サイトに装飾や動きを与えるなど目に見えて自分が作成したプログラムが反映されていくので自分はやっていて楽しいです。(笑)

**フロントエンドの言語**
– HTML
– CSS
– Javascript
– jQuery

ホームページやブログは、HTML、CSSのみで作ることが可能であり、サイトに動きを付けたい場合にJavascriptやJQueryを用います。

###バックエンドとは
バックエンドとは、サーバ内で動く仕組みなどのことで、私たちの目には見えないとことで働くモノです。また、バックエンドのことをサーバーサイドと言い換えることもできます。サーバーサイドの言語は、目に触れ

float の解除 clearfix

# 子要素が全てfloatの時の、親要素の高さ

通常、親要素の高さは子要素を包む高さとなるが、子要素が全てfloatの時、親要素の高さは0となってしまうという性質がある。

float は浮いているという意味で、親要素からみると float の子要素は存在しないように見えるからである。

例

“`html

プロジェクト作成後にアプリを作成を選択しアプリを作る

後にホスティングを利用する
└ホスティングを利用するにはコマンドでアップするディレクトリにいる必要がある。

開発用サーバーのコマンドは firebase serve
デプロイはfirebase deploy

完成サイト

jQueryで複数のスライドダウンコンテンツを実装する

スライドで表示するコンテンツが1つの場合は単純ですが、複数ある場合と閉じるボタンがある場合という条件があるスライドコンテンツの実装方法です。

##デモ
[デモ](http://webdrawer.net/sample/js/manyslidedown/index.html)

##HTML
“`html:index.html

• 見出しテキスト1

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, quis, repudiandae neque incidunt quasi cumque quia id laudantium aspernatur impedit accusantium amet atque soluta tempore ex sequi pariatur blanditiis magnam.