読者です 読者をやめる 読者になる 読者になる

【css】javascriptで挿入した要素のz-indexが効かなかった時の原因と対応メモ

css詳しくないのに見よう見まねで書いててjavascriptで生成した要素のz-indexがどうにも効かなくてハマりました。 そのときの対応をメモ。ググってるz-index当てる要素はpositionがrelativeかabsoluteじゃないといけないって記事があってコレが原因って線で…

【css】imgやvideoをアスペクト比を保ちつつ画面一杯に表示する

はじめに 機会ないかもしれないけど次やるときのためのメモ。 やりたいのはスマホでこんな感じの画面。画像でも動画でも同じcssで。 横画像 portrait landscape 縦画像 portrait landscape 実装 htmlはどちらの動画も共通で、cssは横長と縦長とでそれぞれ用…

【javascript】Androidでonclickが取得しずらい原因がz-indexだった件

addEventListenerでclickに処理をセットしたのだが何とも押しづらかった。 全く押せないのでなく押しづらかった。iPhoneでは普通に押せるのにandroidだけ押しづらい。 HTMLが複雑で要素が入り組んでいたからその辺が原因なのかなと思って調べていただけどよ…

【css】photonでチャットui風の画面を作る方法メモ

css

はじめに jsの勉強でreact + reduxとelectronで簡単なチャットアプリを作ってみた。 その際、いつも困るuiの作成を最後にやったのだがなかなか良いcssフレームワークを発見Photon こちらのもので非常にシンプルだけど、macのデスクトップアプリみたいのが簡…

【bootstrap】table(th, td)列幅を固定する方法メモ

修正前 <table class="table table-hover"> <thead> <tr> <th>・・・</th> <th>・・・</th> ・・・ </tr> </thead> <tbody> <tr> <td>・・・</td> <td>・・・</td> ・・・ </tr> </tbody> </table>tableタグに「style="table-layout:fixed;"」追加 thタグに「style="width:200px;"」追加修正後 <table class="table table-hover" style="table-layout:fixed;"> </table>

【css】aタグの擬似要素(:visited :hover :active)をインラインで書いてみる

css

css a :visited, a:hover, a:active { color:#ABC }インライン <a style=":visited {color: #ABC}; :hover {color: #ABC}; :active{color: #ABC};">・・・</a>とりあえずこんな感じでいけた 以上です

【css】擬似クラス・擬似要素(:before,:afterみたいな)のインラインで書いてみる

css

はじめに 最近昔からずっと苦手だったcssをいじる機会が多くて四苦八苦しています。 とはいえアプリ開発してから少しは免疫がつきました(まだまだ全然低レベルですが・・・)で、今回やりたいことは全然よくないことなんですけど、実現したい画面があって理解…

画面を上から下に引っ張ったときにページを更新する - htmlにて〜pull to refreshと言うらしい

はじめに どういうタイトルつければいいかわからなかったのですが。 iPhoneアプリとかでリストページを下に勢いよくスクロールしときにページの上の方にクルクル「更新」画像が表示されるあれ。 cordovaでのハイブリッドアプリ開発で実装したくて調べてたと…

bootstrap 参考URL箇条書き

cssとかぜんぜんわからないけど、bootstrap使ってモックを作る際に参考になったページをダラダラ追加(あとでまとめます。たぶん...)

外部css読み込み方

css

<link rel="stylesheet" type="text/css" href=""> すぐ忘れるからメモ</link>

CSS便利やなぁって思ったのでメモ

css

マウスオーバーでボタンの表示・非表示とかきりかえるやつです http://www.webopixel.net/html-css/418.html