カテゴリー別アーカイブ: css

多言語対応・ブラウザ言語設定での切り替え・ローカライズについて

Published / by hihihi / Leave a Comment

ブラウザの言語設定で訪問時に言語を切り替えてって依頼が来たけど、これの最適解まとめたのってあんま見たことないなぁ〜

  • いろいろ手法があるけど、どれがえんやっけ
  • そもそもそれってほんとにユーザーにやさしいの?

って部分を説明する用にググってたら、グーグルさんが俺にも優しくしてくれないと検索結果にうまく出せないよって言い出した。

結論

忘れそうだからまとめておく。出し分けの手法メモったのは下の方に。

「振り分けするよりすなおにデフォルト言語で見せて選択させたげて〜。訪問時リダイレクトはグーグルさんが各言語クロールしづらくなるから、するならHTML リンク要素:hreflangとx-defaultの設定をしてかつ、クローラーがクロール可能なようにしてね。」

<link rel="alternate" hreflang="ja" href="http://ja.example.com/" />
<link rel="alternate" href="http://example.com/" hreflang="x-default" />

っってまとめた後になんやけど
下記SONICJAMさんの記事にわかりやすくほぼ全部書いてありました。(クローラーの事以外。おれの小一時間・・・・!)
素敵すぎますね。
みなさんこちらをご覧になればよいかと〜↓

WEBサイトの多言語化において考えるべきこと | ビジネス・戦略・サービス | BLOG | 株式会社ソニックジャム
http://www.sonicjam.co.jp/blog/strategy/001587/

以下調査内容知りたい方のみどうぞ〜
(さらに…)

【memo】今週のおバグさんとか

Published / by hihihi / Leave a Comment

ホバー時にgifアニに切り替えるとChromeで止まる

Gif画像のリロード問題 – Qiita
https://qiita.com/RuriKameoka/items/dfc2ef45a85221ccc4b1

ロールオーバーで画像切り替え レスポンシブイメージ編 – Qiita
https://qiita.com/hibikikudo/items/95376b5134023811a9c1

忘れがちなやつ

max-widthのリセットはautoではなくinitialを使う – Qiita
https://qiita.com/volkuwabara/items/90654ed6bb81c2b8cdaf

Google が提供する日本語 Web フォント – Qiita
https://qiita.com/shotets/items/502f8093d53369eaab50

forループの中でsetTimeoutしたらiはどうなるか – console.lealog();

【IE】いんらいんSVG めんどくさい【爆発しろ】

Published / by hihihi / Leave a Comment

IEにも対応したレスポンシブSVGの作り方 | たんしおどっとねっと

IEにも対応したレスポンシブSVGの作り方

レスポンシブSVGをインラインで配置するとき、IEとandroidが高さを計算しないのに対応する -『CSS』 – webmanab.html/ウェブまなぶ

レスポンシブSVGをインラインで配置するとき、IEとandroidが高さを計算しないのに対応する -『CSS』

忘れがちなことの記事メモと忙しいので突っ込んどく系の記事メモ

Published / by hihihi / Leave a Comment

忘れがちなことメモ

【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法 | delaymania

【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法

display: none; のDOMに対してtransitionを使う際の注意 – Qiita
https://qiita.com/gonshi_com/items/4ae066ef4bea6d519854

backgroundまとめ。ショートハンド、複数指定、各プロパティ – Qiita
https://qiita.com/katsunory/items/1e952d3f5ab2a0306c4d
(さらに…)

俺が考えるレスポンシブ対応最新のブレイクポイント 2017

Published / by hihihi / Leave a Comment

max750pxブレークでサイトを作ることが多かったのですが

タブレット対応のお話をしていて、ふとそういや最新ってこれでほんとにこれのままじゃろか。えんじゃろか。と、調べ直したのでメモ。
お客さんに多分これじゃね〜?とか言えないもの…!言えないもの…!

レスポンシブの現状最新のブレイクポイントってどないなっとんぞ

iPhoneXの投入による変更などは特に無かったようですし、
余裕があれば下記のようにするのでしょうが…

(さらに…)

IE11もEdgeもええかげん爆発していいよ!

Published / by hihihi / Leave a Comment

display:tableでwidthがteke me to the universe

上下中央寄せのためにtable と table-cellを使ったところ、何故か要素がcontainerを超えて宇宙(200%)まで伸びていた。
そして背景画像のfixedも超カクつく。
結局flexにして直した。

fixedなbackgroundがガタつく

→スムーズスクロールを強制的に無効にする

IE、Edgeでposition:fixedな要素がスクロール時にガタつく場合の対応策 | 雲をつかみに

IE、Edgeでposition:fixedな要素がスクロール時にガタつく場合の対応策

メモめも

Published / by hihihi / Leave a Comment

機会があってSquarespaceで作られたサイトの中を覗き見することがあったので、めも。

Build a Website – Squarespace
https://www.squarespace.com/

notつかわれとった。

CSS3で追加されたセレクタ「:not()」について考えてみました|Webpark
http://weboook.blog22.fc2.com/blog-entry-382.html

notつかえるねぇ・・・
Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/#feat=css-sel3

投稿日:2017年10月1日