今さら聞けないHTML　2021年08月31日

2021.08.31
OTHER

今さら聞けないHTML　2021年08月31日

目次

1. サンプル
2. ソース
- - 2.0.1. PodcastへのSmart App Bannerを表示する
  - 2.0.2. ほんとにちょっとhtmlを公開したいだけ
3. 手順
4. ここでハマった
5. Drive to webの操作
6. ちょっとだけオーディオファイルを連続再生したい
7. サンプル
8. ソース
- - 8.0.1. 【input】disabled属性が無効/有効化でボタンの色を変えたい

相対パスと絶対パスの違い

#相対パス
今の位置からの目的地までのルートを示したもの

#絶対パス

目的地の住所

元記事を表示

【pug】コメントの書き方（1行コメント/ブロックコメント/条件付きコメント）

pugにおけるコメントの書き方についてまとめました。
pug公式サイト –> [Comments – Pug](https://pugjs.org/language/comments.html “Comments-Pug”)

## 1行コメント
### 出力される1行コメント
“`pug:pug
// 出力される1行コメント
p foo
p bar
“`
“`html:html

foo

bar

“`

### 出力されない1行コメント
“`pug:pug
//- 出力されない1行コメント
p foo
p bar
“`
“`html:html

foo

bar

“`

## ブロックコメント
### 出力されるブロックコメント
“`pug:pug
body
//
出力される
ブロックコメント
“`
“`html:html

“`

### 出力されないブロックコメント
`

元記事を表示

bootStrap で使われる言葉の説明(編集中)

## 最初に来る短縮文字の候補
|省略名|正式名(推測)|説明|使用例|
| — | — | — | — |
|d-|display||d-flex|
|g[ ]-|gutter|ガター(カラムの左右の空白)|g-1|
|h-|height|高さ|h-25|
|m[ ]-|margin|マージン|m-1|
|p[ ]-|padding|パディング|p-1|
|w-|width|幅|w-25|
|bg-|back ground|背景カラー|bg-primary|
|fs-|font size|フォントの大きさ|fs-1|
|fst-|font style type|フォントのタイプ|fts-italic|
|fw-|font weight|フォントのウェイト|fw-bold|
|lh-|line height|行間|lh-1|

g, m, pに関しては、以下のオプションを付け加えることができる

|短縮名|正式名(推測)|説明|使用例|
| — | — | — | — |
|(空白)||全方位|m-1|
|s|start|左|ms-1|
|t|top|上

元記事を表示

1htmlで手持ちのmp3を太鼓の達人化(疑似自動作譜)

## サンプル
[drum_masters.0.03.htm](https://gtlgqvxdkbh2dm3axzu5fq-on.drv.tw/drum_masters/drum_masters.0.03.htm)

## 使用方法
htmlを開いてローカルのmp3などを選択すると再生が始まります。
Level　の数値がどこでマークを出すか　を示しています。
つまり静かめの曲だとこのLevel値を下げないとマークが出てきません。
対象のmp3自体のゲインにもよります。
別に200を超えても問題はないです。
![無題の図形描画 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906297/b2d18879-a91f-a989-d6fe-dd407d742fcd.png)

![無題の図形描画 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906297/fef3ce26-82ec-7309-6a03-8

元記事を表示

ブートストラップ(bootstrap)でフッター(footer)のpopupを上にする方法

#スマホ用にfooterのpopupを上にしようとした時に参考にした記事です。

https://stackoverflow.com/questions/17581352/how-to-get-a-bootstrap-dropdown-submenu-to-dropup

#方法

“`html:index.html

“`

classにdropupと記載するだけです。

下記のように表示されます。

![スクリーンショット 2021-08-30 12.24.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670485/0df1fa76-7ee6-2955-5157-a6fbf1681e98.png)

#感想

すごくシンプルでした。

見切れてしまう場合にはCSSでleftもしくはrightで調整してみてください

元記事を表示

node-redで簡易掲示板を作る

# 1. はじめに

node-redで、簡単な掲示板を作ってみます。厳密には、node-redというよりもhtmlのテクニックの方がメインです。

# 2. フロー全体
利用するノードはたったこれだけです。初期化が2つで、httpに関係するノードは全部で5つです。

![bbsOnNodeRed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/421f0a0f-c7d1-63ee-7dcc-9b608818d684.png)

最終的なフローはこちらです。試して見たい方は、コピペしてみてください。

フロー.json

“`json
[
{
“id”: “a5f3251e.9214f”,
“type”: “http in”,
“z”: “65f2617e.1211a8”,
“name”: “”,
“url”: “/bbs”,

元記事を表示

【Swift】UITextViewでHTMLを表示してアンカータグをタップ可能にする

# やりたいこと
UITextViewでhtmlを表示してアンカータグをタップ可能にかっただけなのですが、巷の記事を参考にしても実装が出来なかったので成功体験を共有できればと思います。

# 環境
* Xcode：12.5.1
* Swift：5.4.2

# 実装
NSAttributedString型に変換する際にオプションを指定してあげるだけです。
これでHTMLとして表示することが可能です。

“` swift
textView.attributedText = convertToAttributeString(contents: information.infoContents)

private func convertToAttributeString(text: String) -> NSAttributedString? {
guard let data = text.data(using: .utf8) else { return nil }
do {
return try NSAttrib

元記事を表示

リアルタイムの時刻と干支を表示（魔歴・悪魔干支）

#目次
[1.前回投稿](#1-前回)
[2.概要](#2-概要)
[3.内容](#2-内容)
[4.おわりに](#5-おわりに)

#1. 前回投稿

https://qiita.com/ak-matsu/items/ba79cfc46793e5432561

#2. 概要
htmlファイルだけでリアルタイムに時刻と干支を表示させるプログラミングを作成。
この時刻表示は普通ではありません。

### 作成理由

箸休め的にrailsチュートリアル以外でやってみたことを投稿
html単体で時刻と干支を表示させてみました。
きっかけは聖飢魔IIが好きな知り合いのユーチューブライブを見ていた際、
時刻をhtmlファイルを使ってライブ画面に時刻を表示させてみたい
という一言から作ってみました。
聖飢魔IIは魔歴表示でカウントされるので
ただの時刻表示ではなく、知り合いの好みに合わせた時刻表示にさせてみました。

https://ja.wikipedia.org/wiki/%E9%AD%94%E6%9A%A6

#3. 内容

作成したもの
![時刻表示.gif](https://qiita

元記事を表示

【Rails】超簡単！画像のプレースホルダー設定方法

#爆速！！！画像投稿機能のプレースホルダー設定方法
rails でのwebアプリケーション開発で、画像投稿機能を実装した際に、画像がある場合とない場合の設定方法を今回は使えるととっても便利な「Helper」というものを使って実装していきます。

[Helperとは？という人はこちらを見てみてください](https://qiita.com/yukiyoshimura/items/f0763e187008aca46fb4)

###前提
テーブル作成→新規投稿機能が実装済み
また、画像投稿機能を実装済み(carrie waveを中の人は使用しています)
【今回の記事について】
テーブル名：posts
画像を保存するカラム名：image

##STEP1
まずは適当に画像を投稿していない場合に表示させたい画像をダウンロードし、
「app/assets/images」　の中に入れましょう。
＊この作業を忘れてエラーになることが多々見受けられるので要注意。

今回は画像名を「placeholder.png」として保存しています。
初心者などの方は、画像を左クリック→「Rename」→「place

元記事を表示

cssで要素を下から上に表示させる

cssで要素を下から上に表示させる方法になります。
各記述した内容の、解説もしております！
記述を変えれば、表示させる開始時間など変えられます。

##例)コード
太郎を下から上に表示させます。
こちらは
・最初は表示されていない
・1秒後にアニメーション開始
・下から上に0.5秒で表示させる

“`perl:HTML

太郎

“`

“`perl:css
.name {
opacity:0;
animation-name:anime;
animation-duration:0.5s;
animation-delay: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes anime {
0% {
opacity: 0;
transform: translateY(30px);
}
100%{
opaci

元記事を表示

シンプルアナログ時計

本当にシンプルな時計が欲しくて作ってみました。
画像群は Google図形描画で作成。
jsなのでローカルPC時刻に依存。

サンプル

アナログ時計

ソース

analogue.htm
<html>

  <head>

    <title>

    <style>

      img{width: 860px;height: 860px;}

      #base {width: 860px;height: 860px;position: relative;}

      .clock {

        position: absolute;

        top: 0px;

        left: 0px;

      }

      .clock_hour_shd {

        position: abso

元記事を表示

PodcastへのSmart App Bannerを表示する

# この記事の対象とする人

自分でPodcastサイトを運営しているPodcaster

# Smart App Bannerとは

Smart App Banner(スマートバナーとも言うらしい)というのは、iPhoneからWebサイトを見たときに、上に表示されているアプリダウンロードのバナーみたいなやつのこと。
↓こんなやつ
![IMG_4580.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602340/2cf691b1-e8ef-6788-84fb-ae2982648dd2.jpeg)

この記事では、Smart App Bannerの「自分のPodcastへのリンク」版を表示させます。
↓上の方に表示されているやつです。
![IMG_4579.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602340/2a7280d9-c6f4-35a7-4438-614020f56c06.png)

押すと、Podcas

元記事を表示

ほんとにちょっとhtmlを公開したいだけ

新しくアカウントなどを増やしたくないがhtmlを公開したい時
GMailアカウント(Google Drive)があれば
Drive to webでの公開がラクでした。

手順

１、ファイルをGoogle Driveにアップ
２、共有設定を誰でも見られるように設定
３、Drive to webにGoogle Drive参照を許可する
の3ステップだけでした。

ここでハマった

何回上げてもhtmlファイルとして認識されず小パニック。
結果は　設定チェックが入ってしまっていた。
htmlファイルなどを上げたい場合はチェックを外す！
![Google Drive設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906297/7d215a72-8e76-4cf7-9c74-9fe932170fd8.png)

Drive to webの操作

元記事を表示

どんな画面幅でも同じ比率で拡大・縮小するサイトを作る【scss】

## はじめに
どんな画面幅でも同じ比率で拡大・縮小するサイトをHTMLとSCSSを使って作ります:writing_hand:
もちろん画像で作るパワープレイではないです:ok_hand:

### まずは完成品イメージ
![cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1322014/0701601b-c9f2-c2bc-d9fb-384f38d172d5.gif)

## 作り方
上記のようなサイトを作るには`vw`を単位として使うのですが
画面幅に対しての値なので`font-size: 3.73333vw;`というような指定が必要となり、可読性が悪く扱いにくいです。

scssの機能である`function`と`mixin`を使うことで
慣れ親しんだ`px`の値で書けるようにする関数を作り、可読性を良くして扱いやすくしましょう:thumbsup:

### `function`と`mixin`
```scss
// 基準にする画面幅（デザインデータの幅）
$defaultWidth : 3

元記事を表示

Vueでお絵かきアプリ作成3(canvas使用)

#趣向
vueでお絵かき機能を作成する機会があったため作ってみました！
![スクリーンショット 2021-08-15 17.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/843952/9ffc5175-6583-9e15-6d03-252324b66008.png)

#2の続き
[前回の2はこちら](https://qiita.com/ryotaro_tech/items/4fb9b4d57d966a63092c)
このページでは「前に戻る」「次に進む」が動作できるようにしていきたいと思います。

まずはhtml。画面に「進む」と「戻る」のボタンを追加します。
@clickを忘れずに。

```HAML:html

戻る：