【css】marginを取消（リセット？初期化？）する

css

css全然わかってないけど、デザインちょっと調整してとか言われるとchromeのデベロッパーツール使って、チクチク直すことが多々あります。で、上書きはよくやっていたけど、スタイルの取消?リセット?初期化はやったことなかったかも。 <style> /* 既存のスタイル */</style>…

2017-02-20

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

css javascript

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

2017-01-27

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

css html

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

2017-01-13

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

javascript css

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

2016-07-29

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

css

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

2016-04-18

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

bootstrap css html

修正前 <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>

2016-03-02

【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>とりあえずこんな感じでいけた以上です