青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

CSS

IEでposition: fixedでmargin: autoでmax-width中央寄せにならない

position: fixed; margin: auto; max-width: 1200px; これ、IEで効かずに中央寄せになっちゃう。 stackoverflow.com これが解決策だった。 position: fixed; margin: auto; max-width: 1200px; width: 100% これ。max-widthがIEで意外とバグるイメージ。max-…

パフォーマンスのために、遅延読み込み・非同期読み込みについて調べる

qiita.com これを読んで。最適化とか表示早くするのが特に必要なものならここらへんのチューニング必要なのかもしれないなーと思い調べてみようと決意。ちなみにこれ書いてる現状はなにも知らない。 JavaScriptの非同期読み込み qiita.com 全然気にしたこと…

CSSで良い感じに調整可能なよみがな、ルビを振る

CSS

qiita.com このQiitaが参考になります。 一応HTMLのタグとして存在はしているものの、そこもline-heightに含まれてしまうが故に見た目として悪い。のでこのQiitaのようにdata属性に読みがな降ってあげるのが正しそう。 アクセシビリティ的に気にする必要ある…

Sassで & + & がなんか理解できていなかったのでちゃんと考える

Sassで、同じ要素同士の隣接セレクタの指定として .class { & + & { margin-top: 10px; } } みたいなのあるじゃないですか。なんかずっと腑に落ちてなくて、 .class { + & { margin-top: 10px; } } え、こうじゃないの?ってなぜか思ってたんですよねずっと…

CSSでhover時になぜか少しずれるときがある…対策

【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する | バシャログ。 backface-visibility: hidden; これで謎のずれが消える。 backface-visibility - CSS: カスケーディングスタイルシート | MDN なんで消えるんですかね…?裏側…

select要素のデフォルトのUIを消す 特にIEでは特殊な記述が必要

shinimae.hatenablog.com 基本的には、 select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } これでいけるわけです。これでデフォルトで出る矢印のUIが消えてくれます。 しかし、IEではこれが効かない。 select{ -webkit-appeara…

ブラウザで見ると、選択時に青枠出るやつ。消したい。

nichiyogogo.com まあ直し方は簡単で、 outline: none; これで終わり。inputがfocusされてるときとかだと思うので、そのときにoutlineがブラウザによって規定のものが出るはずなのでそれを消せます。 まあただ、これ出るのには理由あって、健常者なら関係な…

CSSで禁則処理のおすすめ

手動で文章に改行を入れたくない。 wemo.tech 禁則処理、例えば句読点(,や.)が文章の先頭に来ないようにとか。 どこまでを禁則にするかによりますが、単語レベルで単語中では改行しないように、とかも出来ます。これらを改行調整することなく良い感じに自動…

テキストの両端揃え

sterfield.co.jp text-align: justify; text-justify: inter-ideograph; これで出来る。 基本はtext-align: justifyで問題ない。 text-justify: inter-ideographはIE用とのことだが、やってみたところ上手くいかなかったので諸説ある気がする。text-justify:…

タブ切り替え等で中身のコンテンツの高さが変わる、display:noneで切り替えているときの、その切り替えているコンテンツの下の位置でスクロール位置保持

こんな感じでタブで選んで中身のコンテンツを入れ替えたい。 わかりづらいがこの上がタブで、下がコンテンツ。 しかも、そのタブは上下にあり、どちらでも中身のコンテンツを入れ替えられる。 ↓下 つまり、 こういう感じ。 で、問題なのは、 ・このコンテン…

position:fixedとz-index: −1の組み合わせはIEでだめかも

tech.motoki-watanabe.net IEでスムーススクロールのなんかでガタついてしまうという現象 があったが、これ以外にも、 どうやらposition:fixedの要素にz-index: -1 を指定すると、ガタついた。 原因は謎。z-indexを指定しない、もしくはz-index: 1を指定する…

IEやEdgeでFixedした要素が、スムーススクロールがデフォルトでONになっているブラウザのためスクロールでガタつく

mo-ja.net これで解決。 つまり、スクロールを無効にして、JSで同じような動作を作って上げる必要があるそうです。 これをブラウザ判定して、IEやEdgeのときに上記のJSを効かせてあげれば解決します。

display: inline-blockで出来ることがある上下の隙間への対処

css-tricks.com ここを見ると早い。 こうやって上下に隙間ができてしまうのを、このように解除できる。 display: inline-blockになっている階層の上に、 font-size: 0px; /* display: inline-block で出来る上下の隙間へ対処 */ と書いてあげると、消せます…

疑似要素で画像を置いて、高さ幅を制御する

saruwakakun.com 背景画像にして、background-size: contain; にすればOK content: ''にして、background-image: url()で画像を指定し、background-size: contain で、width、heightで幅、高さで制御出来ます

box-shadowってなに、PhotoshopのドロップシャドウからどうCSSに落とし込むの

ってなりません? ボタンとか、後ろから浮かせたいものにつけるシャドウ。 あと、Photoshopでドロップシャドウってついてるやつ、値とかそのままCSSに入れればOK、とならないんですよ。面倒くさいったらありゃしない。 developer.mozilla.org まあ影つけるや…

position: absoluteの水平中央寄せ

cssで position : absolute な要素を中央に配置する(上下左右センタリング)|プログラムメモ どういう論理なんですかね 親要素に position: relative; して、中央寄せしたい要素に position: absolute; left: 50%; transform: translateX(-50%); でOK。 ab…

display: inline-blockで出来る上下の隙間への対処

css-tricks.com ここを見ると早い。 こうやって上下に隙間ができてしまうのを、 このように解除できる。 display: inline-blockになっている階層の上に、 font-size: 0px; /* display: inline-block で出来る上下の隙間へ対処 */ と書いてあげると、消せます…

画像の上に文字を重ねたい時、positionでabsoluteとrelative。

public-constructor.com 親要素にposition: relative;を持たせ、実際重ねたい要素にposition: absolute;をもたせます。 これで重ねたい要素は親要素の位置を基準になります。 これに加えて、absoluteを指定した要素にはX軸とY軸の指定が必要なので、top: 0; …

jQueryの様々な指定の仕方。疑似要素とかidとか

idotdesign.net jQueryで疑似要素(:afterとか)を変えたいとき。でも疑似要素はjQueryから指定できません。そういうときはClassのつけ外しで対応しましょう。 .imgOnGreen::before { background-color: rgba($color: #26c52e, $alpha: 0.5); position: abso…

HTMLCSSで画像のトリミング、最適解はHTMLのタグにstyle属性でbackground-image。

tech.motoki-watanabe.net tech.motoki-watanabe.net とか色々やりました。HTML側で画像を指定したほうがいいと。 しかしtransition効かせたいとかの場合、imgタグで書いてると出来ない。 結局は最適解はHTMLのタグにstyle属性でbackground-imageですね。

Webで画像のトリミング、backgroundを使わずに、今度はobject-fit。

tech.motoki-watanabe.net とか書いといてあれですが、 画像をCSSでBackgroundで指定する方式は単純なプロジェクトならばいいものの、画像はそもそもスタイル定義というよりコンテンツ定義で、HTML側で指定したほうが良いケースが多い、と指摘を受けました。…

CSSで画像のトリミングをする際にどれが良いかな

style01.net どうやら3つあるらしい。 今回は、これの1つ目の手法である 「画像をBackgroundとして使う」 で実装した。 $imgWidth: 1200px; $imgHeight: 400px; background: url(./img/img1.jpg) no-repeat; background-size: cover; width: $imgWidth; heig…

CSSをそのまま書くよりSassを使いたいのだが、Sassのインストールでエラー「ERROR: Failed to build gem native extension.」

qiita.com この通りやろうとします。 MacなのでRubyは入ってるので、Sassのインストールを試みる。 まず普通に gem install sass しようとしたらエラー。Permissionがねえよと。 ERROR: While executing gem ... (Gem::FilePermissionError) You don't have …