今さら聞けないHTML 2022年09月03日

今さら聞けないHTML 2022年09月03日
目次

【Vue.js】imgタグのwidht,heightにパーセント(%)を指定してはいけない

# 結論

Vue.jsで``のようにwidht,heightをバインドする時、hoge,fooに100%などのようにパーセンテージは渡せない。必ず数字だけを渡すこと。
HTML5においてimgタグのwidth,heightに単位は指定できず単位なし数値しか指定できない。もしパーセンテージで指定したいならcssで指定する。
VueはこのHTML5の仕様に(おそらく)厳密に従っているのでこのような仕様になっている。

# 背景
v-bindでimgタグのwidthとheightをVueから指定しようとして以下のコードを書いたがうまくいかなかった
“`html:hoge.html

ロゴ画像

“`

“`hoge.js
Vue.createApp({
data() {
return {
p

元記事を表示

PHPの古いtemplate engineであるTemplatePowerについて

ほぼ使われていないと思いますが、もし本当に不幸で10年前以上の技術を使われたプロジェクトの保守に任せられたら、ご参考になっていただければ幸いです。

本記事の想定対象

本記事は以下の対象を読者として想定しています。

  • PHPの初心者
  • 不幸にもPHPの古い技術TemplatePowerを使えざるを得ない担当者
  • HTML、CSS、Javascript初級〜中級の方
  • PHPのtemplate engineに変な見たことのない記述に遭遇する時
  • TemplatePowerを知りたい方
  • template engineのHTML、CSS、Javascript担当者がPHP担当者の業務を知りたい方

と、その他諸々の方も大歓迎です。

参考資料があまり見つからなかったため、錯誤、間違いがあれば、お気軽にコメントしていただければ幸いです。
何度でも修正しますので、多分これが数少ない上古時代技術の参考文献になると思います。

Template Engineとは?

Template Engine(テンプレ

元記事を表示

htmlめも

## position

よくやるのが親要素にrelativeつけて
子要素にabsoluteつけるやつ。
そうするとrelativeつけた親要素を起点に子要素がポジショニングしてくれる。

ちなみにbottomとかtopは
positionとセットで使わないと意味を成さない。

“`html:test.html

指定なし

指定あり

“`

“`css:test.css
#absolute {
bottom: 0px;
position: absolute;
}

p {
background: aqua;
width: 100;
margin: 0px;
}

.parent2 {
background-color: beige;
padding: 50px;
/* position: relati

元記事を表示

【CSS】flex コンテナで overflow-wrap: break-word; を機能させる

# はじめに
下記の記事での検証の結果、文字列をはみ出さずに改行させるためには、`overflow-wrap: break-word;` が良さそうだ、ということがわかりました。

https://qiita.com/punkshiraishi/items/308f0f68ae682ee8608a

しかし、flex の文脈の中ではこの方法では解決しないケースがありました。

# 困ったこと
flex の要素内で、固定値の幅を持った緑の要素と、そうでないオレンジの要素を並べます。
オレンジの要素は **`overflow-wrap: break-word;` が指定されているにも関わらず、改行されませんでした。**

JavaScript カウントダウンタイマー

必要最低限の残時間計測のみのシンプルなカウントダウンタイマーです。
![ss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618708/7b7788dd-4a62-17f3-46f8-e1705de32a5b.jpeg)

#### [動作デモ](https://akebi.jp/temp/countdown_timer_s.html)

—-

“`html:countdown_timer_s.html





Simple Countdown Timer