2560 x 1440のモニタを買ったけどたまに1920で表示されるときがある。windows10

windowsのダメなところなのか、なんなのか。
起動するとせっかくの2.5kモニタが今までの2kとしてボヤっとして表示される。

再起動で直ってたからいいかなーと思ってたが今日からそれでも直らず。

https://support.microsoft.com/ja-jp/help/182595/unable-to-select-a-higher-screen-area-in-display-properties
公式のリンクを参考にしようにも

[スタート] ボタンをクリックし、[設定] をポイントして、[コントロール パネル] をクリックします。次に、[画面] をダブルクリックします。

まず、これがない。

のでどうしようか悩んでいたのだが自分の環境だけかもしれないけど、nbiviaのコンパネにはいってディスプレイ>解像度の変更 で最大解像度を選べば平気ぽい

 

396 views

【解決】atomでejsを利用するときにemmetがうまく機能しない

調べると環境設定 パッケージ emmetのSetting Extensions PathにSnipets.jsonを置けとあるがそれがどこなのかよくわからない。

~/emmet

これどこよと。

ユーザーフォルダ直下の、、、っていうブログもあったけどおいてみたがちがう。

ユーザー/HOGEHOGE/.atom/emmet/ココ

に置けばいいらしい。

 

中身はこれ

{
"ejs": {
"filters": "ejs",
"extends": "html",
"profile": "xml"
}
}

とおもったけどうまくいってない・・・

 

2018/9/29追記

解決しました。
上記でShift+eではEmmetが動いていることが確認できたのであとはショートカットの設定を変更するだけでした。

Setting > keybindings > your keymap fileをクリックでユーザー設定を追加。

追加内容は以下

'atom-text-editor.editor:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'

 

835 views

CSSでradioを修飾するときにlabelにidを振るのはエンジニアさんに苦笑いされる

ということでid振らずに何とかならないかね、ということで考えてみたらどうせソースが少し汚れてしまうならばlabel内にspan置けばいいじゃないと。

<label><input type="radio" name="name" value="hoge" />hoge<span class="radio-checked"></span></label>

こんなかんじか。
inputの後ろじゃないとCSS的に指定ができないので注意。

あとはCSSを(以下はSass)

label {
display: flex;
position: relative;
cursor: pointer;
padding-left: 25px;
margin-right: 20px;
.radio-checked {
position : absolute;
left: 0;
display : block;
height: 17px;
width: 17px;
border-radius: 17px;
border: 1px solid #000;
&::after {
position : absolute;
content : '';
width : 11px;
height : 11px;
border-radius : 100%;
left : 3px;
top : 3px;
background-color : transparent;
z-index : 1;
}
&::after {
}
}
input[type="radio"] {
display: none;
&:checked +.radio-checked {
border-color: #f00;
&::after {
background-color : #f00;
}
}
}
}

こんな感じか。
横並びにするのにflex利用したりしてるけどこの辺は好みで好きなようにできそう。

label idよりかはいいのかな。

451 views 378 views

IE11でtransitionがうまくいかないときは該当要素にflexを指定してる可能性があり?

Chrome、Firefox、Edgeでは問題なくtransitionアニメーションをしているのにIE11だとアニメーションが発動しなかった。

原因は該当要素にflexを指定しているせいでアニメーションがうまくいかなかった。cssでallにしてるせいかもしれないけど。

疑う箇所として記憶しておこう。

495 views

たまに発生するError: File to import not found or unreadable: *** の対応方法

いろいろなサイトをみて、ファイルのパスをなおしたり ファイルの権限を変えてみたりしてもうまくいかず。

最終的にはgulp-waitでsassのコンパイルを遅らせることで無事解決。

gulp.task('sass',function(){
gulp.src(['sass/**/*.scss'])
.pipe(wait(500))

こんな感じで最初に遅らせる。
var wait = require(“gulp-wait”); も忘れずに。

参考サイト
https://github.com/olefredrik/FoundationPress/issues/731

2,416 views

iphoneでtwitter widegetのiframeが横にはみ出るバグの修正

twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが

<a class="twitter-timeline" data-width="100%" 

 

 

のくだり。

幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。

jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。

iPhone7でTwitterのウィジェット(iframe)がはみ出す【解決】

簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。

でかいけつしました。

このアイデアを思いつくのが素晴らしいです。ありがとうございました。

6,582 views

ここ最近頻繁にWindows10がフリーズする原因はWindowsUpdateのKB4054517が原因かもしれない

12月にはいって作業中に急にフリーズ→カーソルは動くけどクリックしてもなにも反応しない→強制終了
を1日何回もやらされることに。

もともとESETと相性悪いみたいで安定していなかったからそのせいかと思ったけどTwitterで「Windows フリーズ」と検索するとみなさんも同じようなタイミングで発症中

そんな中以下のような記事を発見。
https://qiita.com/Kaguya_2324/items/81563dc0b5da377d9386

ほほう、とおもいWindowsUpdateをチェックしてみると上記更新を何度もインストール⇔失敗を繰り返していた。

ので参考サイトを手本に手動でいれてみることに。

参考サイトで情報が足りなくて困ったのは

Windows Update カタログ にアクセスし、KB4054517で検索を掛ける。一覧からPCに適したファイルをダウンロードする。

http://www.catalog.update.microsoft.com/Home.aspx
でいっぱい表示されてどれがどれだか分からない。
そんなときは先ほどDLしたwushowhide.diagcabを再起動してHideした更新プログラムを表示ってやれば詳細が分かります。
20171220

あとは参考サイトにそって作業すれば問題なくインストールできると思われます。

さてフリーズはおさまるか。

2,306 views

position:fixed;にした要素の子にoverflow-scrolling: touch;を設定するとフリーズすることがある

ナビの固定などでヘッダーを固定、その子要素のナビがクリックで階層表示されるみたいなことをやっているとfixedした要素が画面の高さを超えることが多々ある。

そういうときにナビに対してoverflow-y:scroll;をしてスクロールできるようにするのだけどデフォルトのままだとカクカク

そのため
overflow-scrolling: touch;
を設定してスムーズになるようにするのだが画面の高さ以上にスクロールしようとすると画面が数秒フリーズする。

原因調べていたら以下のようなサイトの情報が。
http://webdev.jp.net/ios-safari-fixed-overflow-scrolling-bug/

諦めるしか無いのか・・・

と思っていたけど試しに親要素自体に
overflow-scrolling: touch;
を設定してみたらバグなくなった。

たしかfixedとoverflow-scrolling: touch;は一緒にかけるな。的発言があったような気もしつつ。
まぁいいか。

4,433 views 1,019 views

うえぶでざいなー