- 1. 本記事の想定対象
- 2. Template Engineとは?
- 2.0.1. htmlめも
- 2.0.2. 【CSS】flex コンテナで overflow-wrap: break-word; を機能させる
- 2.0.3. JavaScript カウントダウンタイマー
- 2.0.4. 【CSS】CSSで使えるのは色は、RGB / 16進数カラーコードだけじゃない。
- 2.0.5. Terapadで直接Edgeを起動させる方法
- 2.0.6. 個人的ハンバーガーメニュー最適解(デザインのみ)
- 2.0.7. 【新規事業】SkyWay1:1通信でスピーカーON/OFFとマイクミュート【プロト開発】
- 2.0.8. HTMLのインデント
- 2.0.9. GoogleDriveが表示されない。
- 2.0.10. 人事のおじさんプログラミングを学ぶ Day10「算術演算子~FuzzBuzzのファンクション」
- 2.0.11. HTMLの基礎
- 2.0.12. JavaScriptでUSBカメラを使って撮影してみた
- 2.0.13. width/max-width/min-widthの利用するパターンについて
- 2.0.14. ホームページのバナーはバニラのjsよりslick.jsを使った方が早いかつ品質が良い話(2)
- 3. バナーの特性と目標
【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;` が指定されているにも関わらず、改行されませんでした。**必要最低限の残時間計測のみのシンプルなカウントダウンタイマーです。
![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