f@ctor

今さら聞けないHTML　2020年08月20日

今さら聞けないHTML　2020年08月20日
目次

HTMLの説明リストのタグ(dl dt dd)の使い方

#プログラミングの勉強日記
2020年8月20日　Progate Lv.226

#それぞれのタグの意味
少し前までは、定義リストとしての役割を持っていた。
　dl（definition list）：定義リスト
　dt（definition term）：定義する言葉
　dd（definition description）：定義の説明

“`html:

バスケットボール
アメリカ発祥のスポーツ

“`
実行結果
![0820-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/81585c21-2973-b3c6-5454-943953aeb171.png)

HTML5では、説明リストとしての意味に変わり用途が広がった。
　dl（definition list）：説明リスト
　dt（definition term）：説明する言

元記事を表示

Webデザインが捗るサイト

#著作権フリー系
著作権フリー画像集
[Pixabay(ピクサベイ)](https://pixabay.com/ja/)
![pixabay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526954/fcb133ac-63fc-98bf-9e49-36fd1401969d.png)

#イケてるサイト系
クオリティが高い縦に長いサイト集
[muuuuu.org](https://muuuuu.org/)
![muuuuu.org.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526954/15722afb-44b2-fdd4-17a4-77fc886de607.png)

元記事を表示

縦スクロールバーが2本出てくる&hidden消したら内側に出てきちゃう問題

今のPJにBacklogがないので備忘録

#問題
・webサイトの縦に長いページだと縦スクバーが2本出てくる
・参考サイトで出てきた以下記述を消すと、横スクが出てくる＆縦スクがbodyの内側に出てきちゃう

“`CSS:css
html, body {
width: 100%;
overflow-x: hidden;　←消す
}
“`

縦スクロールバーが2つ表示される

#解決方法
“`CSS:css
html, header {
width: 100%;
overflow-x: hidden;
}
“`

bodyをheaderにするだけでした。
これに1時間近くかけてたの工数泥棒としか言えず…。

元記事を表示

[css]開発でよく使用する便利技

開発でよく使用する便利技をここに残しておきます。
これいいなと思ったものはここに残すつもりなので都度更新するかもしれません。

## 要素の上下中央寄せ
要素の上下中央寄せの方法はいくつかあります。
その中でも、自分が開発を行う上でよく使うのいくつか紹介させて頂きます。

### 完成例
![スクリーンショット 2020-08-14 18.09.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/a2fe5adf-9970-81a3-1260-abed22100087.png)

#### html
“`html

“`

#### flex
まずはflexを使った上下中央寄せをご紹介します。

“`css
.c-box {
display: flex;
align-items: center;
width: 200px;
height: 200p

元記事を表示

ウェブサイトでお洒落なフォントを使おう！

#この記事の対象読者
・最近CSSの勉強を始めた人
・自分のサイトをもっとカッコ良くしたい人
・フォントを変えて見たいけど方法がいまいち分からない人
#新しフォントを探そう！！
ネット上では色々なフォントが公開されていますが、初心者が手っ取り早くかっこいい**フォント**に変えるなら[google fonts](https://fonts.google.com/)がお勧めです。なので今回はgoogle fontsを使ってフォントの見た目を変えて見ましょう。そうれでは始めにこちらの[サイト](https://fonts.google.com/)に飛んで見てください。![スクリーンショット 2020-08-19 23.34.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581846/db909629-8169-2a0b-5fe0-7af2842e135a.png)
そうすると上の画像の様なサイトに飛ぶはずです。次に今回は日本語のフォントを使いたいので**Language**の所からJapaneseを選

元記事を表示

要素タイプ”meta”は、対応する終了タグ”“で終了する必要があります。となったときの対応方法

– 環境
– Windows10 64bit バージョン1909
– openjdk 11 2018-09-25
– Eclipse IDE for Enterprise Java Developers Version: 2020-03 (4.15.0)
– JSF 2.3.9

# 事象 : metaタグでviewportを指定したらエラーになった
“`bash
2020-08-19 11:02:09:810 X-TrackingId:6ac183f5-3ea5-41d4-993b-231267d1 ERROR ExceptionHandler.handle:63 Error Parsing /ponsuke/sampleEdit.xhtml: Error Traced[line: 28] 要素タイプ”meta”は、対応する終了タグ”“で終了する必要があります。
javax.faces.view.facelets.FaceletException: Error Parsing /ponsuke/sampleEdit.xhtml

元記事を表示

ハロトレ3日目 ~コンテキストメニュー/サークルブラケット/タッチタイピング/Photoshop~

#####コンテキストメニュー
右クリックで出てくるメニューのこと
![コンテキストメニュー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526954/c10038fe-fcda-e455-85be-c193dd3c7a81.png)

| 記号 | 説明 |
|:———–|:———–|
| [] | ブラケット |
| （） | サークルブラケット |
| : | コロン |
| ; | セミコロン |

###タッチタイピング練習サイト

・[ひよこタイピング](https://typing.twi1.me/training)
・[コードドリル　文字列一覧](https://www.code-drill.com/chars/)

###タイピングを速くする小技

| 記号 | 押す指 |
|:———–|:———–|
| Shiftキー

元記事を表示

夏だ！カレーだ！都内の人気店のメニューガチャ作ったので、みんなでカレーを食べよう！！！

#カレーは好きですか？
私は大好きです。
カレー専用のInstagramもやってます。(https://www.instagram.com/tawa.tawa.tawa/)

プログラミングの練習も兼ねて、好きなカレーを題材に何か作れないか考えました。

うーーーーーーん

__そうだ！メニューガチャアプリを作ろう！__

話題になったサイゼリヤガチャを参考に、Javascriptで自分なりにアレンジして作ってみることにしました！

サイゼリヤガチャ　▶　https://saizeriya-1000yen.herokuapp.com/
　Qiita記事　　　　▶　https://qiita.com/marusho_summers/items/a2d3681fac863734ec8a

#My favorite カレー屋さん『プルジャダイニング』
タイトルを見て、都内の人気店？ココ●チ？とか予想した方もいるでしょう。
おそらく、実用性を考えると、ココ●チのようなチェーン店の方がいいに決まっています。

ですが、ここは宣伝も兼ねて、私の大好きなお店にしたい・・・。
私の好きなお店と言えば・

元記事を表示

iPadのWebアプリの関門、加速度センサ、audio、videoの制限をJavascriptで突破するまで

# これはなに
* 藝大との合同プログラムで以下のような作品を作った。

* iP

元記事を表示

【初心者向け】初心者コーダーが陥りやすいHTML・CSSのトラップ4選

# どうも7noteです。HTML・CSS初心者は気をつけたい罠(トラップ)4選

始めたての頃には気付きにくい、参考書にも載ってない（小さくしか載ってない）HTML・CSSのトラップを紹介していきます。
初歩的だけど私自身悩んだりつまったりしたことがあったので、参考になれば嬉しいです。

## HTML・CSSで陥りやすいトラップ4選

### ①インライン要素の間で改行してはならない
HTMLを記述する際、このような書き方はNGです。

“`index.html

あいう
えお

“`
なぜいけないのか？こうなるからです。

“`実行結果
–結果–
あいう えお
“`

問題点として、**エディタでインライン要素とインライン要素の間に改行を入れてしまうと実行結果側で約半角分の余白ができてしまいます。**

#### 対策方法

**改行をコメントアウトで繋ぐ**

“`index.html

あいうえお
<

元記事を表示

自宅で夏の散歩ができる「夏休み君」をYoutube Player APIで作ってみた

#作業用BGM多すぎ長すぎィ！
皆さんは何か作業に没頭するときに、__作業用BGM__をかけたりしますか？
人によっては音楽をかけたり、人によってはYoutubeをただ流したり、ある人は耳栓をして無音で頑張ったり、色々なスタイルがあると思います。

今年はコロナの影響で、夏のイベントが何から何まで無くなってしまいました。
外出できなくても__夏気分を味わいたいなあ__と思い、__youtubeでフリー環境音BGM__を探して流してみようと考えてみました。
森の音、海の音、川の音、虫の音、、、などなどいろいろあるようですが、どうせなら一つのBGMをずっと聞くより__色んなBGMを聞きたいなあ__と思い、Youtube Player APIを使って実装してみました。

Webアプリはデプロイしてあるので、お散歩気分でお楽しみください。

コードは[こちらから！](https://gist.github.com/canonno/4b8e7cbc58dcfe8952870ed96133d43d)
アプリは[こちらから！](https://cranky-nobel-9a6c3c.netlify.

元記事を表示

Enterキー押下時にJavaScriptで指定のボタンを押下させる

## 事象
複数のsubmitボタンがある状態でEnterボタンを押したとき、
どのフォームにフォーカスが当たっていても一番最初のボタン押下になってしまうので

Aのフォームを入力してEnterならAのボタン、
Bのフォームを入力してEnterならBのボタン、

をJavaScriptで押下させたい。

—-
イメージ
<フォームタグ>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243523/ca980bb3-19f4-33ab-1ed3-9dd6785719f6.png)

—-

※デフォルトの挙動ではBを入力＆エンターを押しても1番目のボタン（Aの行のボタン）
　が押下されてしまう

## 解決方法
それぞれのテキストボックスでEnterキーを押した際の挙動を指定する。

input要素にキー押下時のスクリプトを指定　※onkeydownなら日本語変換＆Enter時は反応しない
`onkeydown=”pressSearchButton(‘A’);”

元記事を表示

ホームページ作成入門メモ2

[前回の記事](https://qiita.com/yuki_yanagi/items/7d2445d9804dcd1a6b0a) の続き
HTML, JavaScript それぞれでよく使う項目について解説していく

## HTML

### head タグ
ページのヘッダ部分を示すタグで、ページ自体の情報などを載せる箇所

例えば以下のようなタグが入る

meta
文字コードなどのメタ情報を示すタグ
title
文章のタイトルを指定するタグ
link
リソースとのリンクを設定するタグ。cssやwebフォントとの結びつけに使われる

### class, id について
class は同名の class を複数のタグにつけていいが、id は複数のタグにつけることが禁じられている
そのため、CSS でスタイリングをする場合はセレクタを id ではなく class で指定してあげるのが好ましいとされている
なお、p や div などのタグ名自体をセレクタにしてし

元記事を表示

jsによってsubmitを実行した場合、onsubmitは動かない

“`javascript:動かない



“`

正解はこれ。

“`javascript:動く