f@ctor

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

今さら聞けないHTML　2021年09月08日
目次

CSS コンテンツ量が少ない時にフッターをしたに表示させつつ、フッターを固定させない

#はじめに
![スクリーンショット 2021-09-06 21.10.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/17046508-71b4-1243-4878-0256648a1843.png)

**なんでフッターがコンテンツに被ってるねん！！！**

フッターを`position:fixed`で固定したからか？

でも下で固定しとかな、コンテンツが少ない時フッターが上にあがってきてしまう。。。

**・コンテンツ量が多い時、スクロールしたら下にフッターがある**
**・コンテンツ量が少ない時、常に下にフッターがある**
?を同時に実現するにはどうしたらいいか・・・

Webのcssを触るのが久々で、結構な時間こんな問題と格闘してしまった。。:cold_sweat:

#cssだけで解決してみせます

“`html

元記事を表示

[Html/Rails]画像の大きさを調整をしたい

##初めに
####この記事の対象者
・画像を貼ったのはいいけど、大きすぎて/小さすぎてなんか見にくい。。。ヒト用

####環境
・Macbook Air (Retina, 13-inch,2019)
・プロセッサ 1.6GHz デュアルコアIntel Core i5
・メモリ　8GB 2133 Mhz LPDDR3
・MacOS Big Sur　バージョン 11.5.2

####記事の目次
**１）cssを使って画像の大きさを変える方法**
**２）rubyを使って画像の大きさを変える方法**
**３）画面の大きさに応じて画像の大きさを変える方法**
**４）最後に**

##cssを使って画像の大きさを変える方法**
####１）html内に画像を添付

“`

“`

####２）cssで画像のクラス名を指定して横幅、縦幅を設定

“`
.sample{
width:50px;
height: 50px;
}
“`

##rubyを使って画像の大きさを

元記事を表示

[Html/Rails]範囲指定について

##初めに
####なぜこの記事を書こうと思ったのか
**フロントサイドの実装をするとき、クラス名を直前に決めているせいかcssで装飾をするときに名前を忘れてしまったクラス名は思い出すのにどの部分に当たるのか曖昧の場合があるので自分中でルールを決めてここにメモしたいと思ったから。**

####環境
・Macbook Air (Retina, 13-inch,2019)
・プロセッサ 1.6GHz デュアルコアIntel Core i5
・メモリ　8GB 2133 Mhz LPDDR3
・MacOS Big Sur　バージョン 11.5.2

####記事の目次
1)土台
2)状況に応じてのテンプレート
3)最後に

##土台
・基本的にheaderとfooterは部分テンプレートとして使う頻度が多いのでスルー
・いままで作ったアプリはメイン部分を２−3分割で分けていた

####application.html.erb
“`


タイトル名



```
```styles.css
.gri

元記事を表示

送信ボタンがdisabledのときにテキスト入力欄でEnterを押すと、フォームはどうなるか

送信ボタンがdisabledのときにテキスト入力欄でEnterを押すと、フォームはどのような動きをするでしょうか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308595/74862c88-9bf5-01e5-2f72-43d917ffce71.png)
ChromeとFirefoxで試すと、フォームは送信されません。ところが、Safari（macOSもiOSも）では送信されてしまいます。Rails的に言えば、data-disable-withを使うだけではフォームの二重送信を防げないということです。

この挙動はHTMLの仕様ではどうなっているでしょうか。ググったところ、Stack Overflowで次のような記述に行きあたりました。

- https://stackoverflow.com/questions/5629805/disabling-enter-key-for-form#answer-42806658

> Consequently, if the default b

元記事を表示

【必須】Font Awesomeを使ってアイコンを挿入しよう！！

#はじめに
Font Awesomeを使って自作のHPやアプリにアイコンを挿入することで画面が格段に良くなるので、どんどん使っていきましょう。

#Font Awesomeの使い方
1) [公式サイト](https://fontawesome.com/)にログインして、以下のコードをコピーし、HTMLのheadタグ内に貼り付けます。
　①右上の人のマークをクリックして、Font Awesome CDNをクリックすると、以下のコードがあります。

```html ```

②右上の人のマークをクリックして、Kitsをクリックすると、「Your Kits」の下に、アイコンとKit名（数字とアルファベット

元記事を表示

ソースコードをhtmlに変換

#変換アプリ
htmlではスペースやタブなどが表示されないので、pythonなどで記述したソースコードをhtmlに貼り付けるときは

[srctohtml](http://marginalsoft.com/tools/srctohtml/)などの変換アプリを使うと便利。

#使い方
使い方はソースコードを貼り付けて、言語は特に選択する必要はないので、[HTMLに変換]というボタンを押せば、下にhtmlのコードが表示されるので、それをコピーしてhtmlファイルに貼り付ければOK

元記事を表示

【CSS】CSSのスタイルが効かないとき〜カスケード・詳細度・継承〜

# はじめに
CSSのスタイルが効かないときは```カスケード・詳細度・継承```が原因となることが多くあるので、まずは疑ってみるとよいです。スタイルの優先度を忘れていたりすると解決に時間がかかったりします。
今回カスケード・詳細度・継承についてまとめましたので、CSSのスタイルが効かないとき思い出してみてください。

## カスケードとは

* CSSの順序
* [MDNドキュメント　カスケード](https://developer.mozilla.org/ja/docs/Web/CSS/Cascade#%E3%82%AB%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%89%E9%A0%86)
* 基本的にはあと勝ちと考えておけば良い

下記のコードの場合、後に書いた```h1{color: blue;}```が適用される

```html:html

h1タグです

```
```css:css
h1 {
color: red;
}

h1 {
color:

元記事を表示

【CSS】よく使うセレクターをまとめてみた

# はじめに
開発現場でよく使うCSSのセレクターをまとめてみました。随時追加していく予定です。

## タイプセレクター

```html:html

こちらはdivタグです。

```

```css:css
div {
color: red;
}
```
* カンマ区切りでも使える

```css:css
div, p {
color: red;
}
```
## classによるセレクター

```html:html

こちらpタグです。

```

```css:css
.ptag{
background-color: gold;
}
```

## idによるセレクター
```html:html

こちらpタグです。

```

```css:css
#ptag{
background-color: gold;
}
```

## ユニバーサルセレクター
```css:css
* {
color: blue;
}

```

## 属性によるセレクター
指定した属

元記事を表示

はじめてのHTML5・CSS

##この記事の目的

+ 一度使ったHTML5・CSSの書き方をメモに残す。
+ 後で同じことしたいときに見返す。
+ 言語化して頭を整理する。
+ 私が「こんなのが最初に読めたらよかったな」という説明記事をめざして書く。記述ルールは「可能な限り手順と説明を省略しない」「応用が利くように一般化する」「余計な（説明のない）情報は書かない」。

##やりたいこと
テキスト記事をWEB掲載したい。レイアウトのイメージを共有するため、試作版のHTMLファイルを作成する。ローカルでレビューするのでWEB公開は不要。社内共有フォルダにHTML・CSSファイルを置いて、各々開いてもらう。テキスト原稿があるので、それをマークアップする作業イメージ。

##前提
私は、HTML経験がほとんどなく、CSSは今回初めて知った。
最初に「初心者向け！ HTMLを作ってみよう」的な動画シリーズを１つ見て、基本的な書き方を覚えた。後は実際に作りながら試行錯誤した。本業が暇なときにやっていたが、トータルで2週間くらいは時間を使った気がする。

##メモ

以下メモです。

###HTMLファイル
最低限の書き方。

元記事を表示

Rails × Vue.jsでvideoタグが機能しない。問題を解決できなかった。

バックエンドがrailsでフロントをvueで記述しています。
vueでビューを書いてるときに 動画を表示したいと思い、

このように書きました
videoタグというものがhtmlにはあるらしく、htmlで使えるものはvueでも使えるだろう。っといった感じです。
srcの指定パスも間違ってない。

だけど表示されない。
色々調べてくと、https://teratail.com/questions/323372
こういった解決方法があるらしい。
どうやら動画をmp4に変換するときに色々な圧縮方法があるらしいが、特定の圧縮方法で生成されたmp4じゃないと行けないらしいので、

https://convertio.co/ja/download/26774974af37d49cd96e3d7ea334f2e6fa2716/

![スクリーンショット 2021-09-03 14.32.27.png](https://qiita-image-store.s3.ap-northeast-1.amaz

元記事を表示

TwitterとLINEのシェアボタンカスタマイズ（改行タグ・半角スペース・絵文字・文中ハッシュタグ）

# 基本フォーマット
### Twitter

`https://twitter.com/share?url=[URL]&text=[テキスト]&hashtags=[ハッシュタグ1,ハッシュタグ2]`

▼例

```html
ツイートする
```
シェアしたい[URL]と[テキスト]と[ハッシュタグ]を&で繋ぎます。
ハッシュタグはカンマ繋ぎで複数指定可能。

### LINE
`https://social-plugins.line.me/lineit/share?url=[URL]&text=[テキスト]`

▼例

```html
Promiseのresolve()を他の場所で呼び出してawaitでの待ちのを終了する

# 確認した環境

- Google Chrome Version 93.0.4577.63 (Official Build) (64-bit)
- 今回、試した記述方法が、あらゆる環境で動作するかは把握できていない

# 内容

- Promiseのresolve()は、「Promiseクラスのコンストラクタの第1引数に渡す関数内」でしか呼び出してはいけないと思っていたが、
- resolve()を参照する変数を別のスコープに用意して、呼び出しても期待通りに動作した
- Pormiseオブジェクトを返却する関数を用意しないといけないとも勘違いしていた

```html




Promise

Click me!


元記事を表示

OTHERカテゴリの最新記事