webよく使わてるCMSとかECとかまとめ
webよく使わてるCMSとかECとかまとめ
改めて書いてみると、うろ覚えな情報が多すぎる。 今後のスキル習得用に。
CMS
まぁwordpressですよね。だいたいなんでもできる。 かつての覇者MTさん、最近はめっきり聞かなくなった。 下の二つもチラホラ聞く。
wordpress
MovableType
Drupal
Joomla!
サイトジェネレーター的なモノ
ひと昔前はjimdoが流行ったけど、今はWIXがcmもやってて流行っているぽい。 どちらもまともに触ったことがないので違いとかよくわからない。 無料プランと有料プランがある。
直感的にデザイン変更できるけど、凝った事やるなら普通に作った方が楽な気がする。 jimdoはKDDIが運営してるんだよね。
EC
モール型ECサイト
楽天市場は独自ルールがあって色々とめんどくさい。 文字コードがeuc-jpなんだよね、最初知らなくてはまった。
iframeを使わなければいけないとか、契約によってはjsを外部サイトに置かないといけないとか css更新してもなかなか反映されないから「?」入れるとか色々あるらしい。
ただ、なんだかんだ言って楽天のお仕事はかなり多い。 下手したら楽天ショップ専任でも食べていけそう。
レンタルショッピングカート方ECサイト
それこそ鬼のようにあるけど、下の３つはよく聞く。 カラーミーは何度か触ったことあるけど、下の二つはあったようななかったような・・・
たぶん、敷居は低い。
カラーミーとMakeshopはともにGMO経営。
システムの構築が必要なECサイト
国産だとほぼほぼこれじゃないかな。 これは覚えておくとよさげ。
アフィエイトでよく使われてそう系
印刷用（プリント用）cssについて
スマートフォンや携帯電話の普及で、webサイトを印刷はすることが少なくなってきている。
なんだけど、稀に印刷までしっかり組んでほしいという要望があるので備忘録。
横幅をA4に無理やり納める方法
以下の様にscaleでページ全体を縮小してしまうのが有効 倍率はwebサイトの横幅とA4の差異に合わせて変更。
@media print {
body{
transform: scale(0.7);
transform-origin: 0 0;
}
}
問題点
縮小する前の、ページまたぎの部分で変な間が開くことがある。 その部分に画像があると、見切れたり画像が表示されないことがある。
背景色の印刷について
これはブラウザ事に仕様が異なるので注意。 edgeなんかは基本的にbackgroundは印刷されない。
疑似classなんかに、背景色の画像を作ってはめ込めば印刷されるけど 果てしなく無駄なので、基本はやらない。
chromeで背景色を印刷するには、以下の方法が有効。
https://caniuse.com/#search=print-color-adjust によるとsafariとfirefoxもokらしい
インク代がもったいなさそうだし、仕様のブレが出そうなので あんまり使いたくはない。
@media print {
body{
-webkit-print-color-adjust: exact;
}
}
chromeで印刷時のcssを確認する方法
たまにしか見ないからいつも忘れる。
1.f12（デベロッパーツール）
2.・が三つ縦に並んだヤツをクリック
3.More tools
4.Rendering
5.Emulate CSS mediaをprintに
印刷プレビューとまったく同じではないけど どのcssが有効になっているかの確認には便利。 そもそも、いちいち印刷プレビュー押すのはめんどくさい。
結論
ブラウザ毎の差異が大きいし、 完璧に合わせることが実際無理なので、印刷用cssは触りたくない。
スマートフォンでの固定背景について
main画像なんかでよく使うやつ。 オシャレ系のサイトだと多い。
PCサイトならbackground-attachmentとbackground-size:coverで対応可能 スマホやタブレットでは画像がめちゃくちゃ大きくなってしまったりするのでこの方法は使えない。
その為よく使われるのが、position:fixedを使う方法
<div class="main-img">
<div class="main-img__bg"></div>
</div>
<div class="contents"></div>
//高さ確保
.main-img{
height: 100vw;
}
.main-img__bg{
position: fixed;
left: 0;
top: 0;
z-index :1
width:100vw;
height: inherit;
background-image: url(../img/main-img.jpg) no-repeat center;
background-size: 100% auto;
}
.contents{
position: relative;
z-index 2;
background: #fff;
}
実はページのいっちゃん下までスクロールしても表示されているけど z-indexで.contentsの奥側にいってるから見えないよねっていう仕組み。
- contentsにbackgroundつけないと下の画像がスケスケになっちゃうので注意。
- heightでvhじゃなくてvw使っているのはモバイルchromeなんかで、メニューバーが出た際にvhの値が変わってしまうから。
contentsにbackground記述しちゃうのはちょっとメンテナンス性悪そうなので body:beforeなんかでかぶせちゃったほうがいいのかも。
ちなみにこの方法で弱点が何個か。
- この要素の上部に要素を置けない
- 1ページに一か所しかできない
できるっちゃーできるけど、jsであれこれしないといけないので大変めんどくさい。
ie11対策まとめ
ユーザーエージェントで振り分け
bodyにclass付けるやつ 昔はよく、ifでつけてたやつだね
var ua = window.navigator.userAgent;
if( ua.match(/MSIE/) || ua.match(/Trident/) ) {
var bodyElement = document.getElementsByTagName('body');
bodyElement[0].classList.add( 'ie' );
}
2017/05/08追記
head内にjsを置く場合は,window.onloadにしないとエラーになるので注意
position fixedの要素があるとスクロールががたつく（edgeも）
固定headerや、固定サイドバーがの時に起こる。 以下を記載すると「マシ」になる。
if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
$('body').on("mousewheel", function () {
event.preventDefault();
var wd = event.wheelDelta;
var csp = window.pageYOffset;
window.scrollTo(0, csp - wd);
});
}
参考サイト:http://cloud-collector.link/2016/05/08/ie-fixed-scroll-bug/
画像周り
svgは画像サイズが小数点以下を含むと、ぼやけたりギザる時がある。
倍サイズ以上のサイズの画像を使うとギザる時がある（ちょっと何言ってるかわからない） 要は表示サイズが50pxなのに、200pxの画像を使うとギザるかもよって話し（やっぱり何いってるかわからない）
レスポンシブのサイトとかだとたまにあるよね。
こちらのサイトで解説されているのでチェック http://blog.medical-design.co.jp/archives/2311
游ゴシック
font-weight:600;
は認識しない？ boldはもちろんOK
form周り
selectの矢印消す
select::-ms-expand {
display: none;
}
游明朝
MediumやDemiboldだと、font-feature-settings : "palt";が効かない Lightだと効くので
body {
font-family: "游明朝 Light";
font-weight: bold;
font-feature-settings : "palt" 1;
}
にするとまだマシになる
webフォント
googleフォントが、使えるものと使えないものがある。 ie11でgoogleフォントにアクセスすると、非対応だよ的なことを言われるので 使わない方がいいかも。
https://qiita.com/chisamikan/items/c4d37754d175c17fbe41
table周り
thやtdにposition:relativeを設定すると thやtdに設定したborderが消える。
position:relativeを消せばもちろん治る。 直せない場合は、wrapperクラスを追加するなり、before疑似クラスなどでborderを付けたりする 方法も可能。
th{
positon:relative;
background:#ccc
border:solid 1px #fff;
}
main要素
main要素を認識しないので、display:block
main{
display: block;
}
固定ヘッダーでリンクがずれる件
固定ヘッダーのデザインって多いですよね。 スマホサイトだと、７～8割が固定ヘッダーな気がする（当社比） PCサイトでも1カラムのサイトだと、最近は結構多い。
ただ、ページ内リンクが固定ヘッダの高さ分ずれちゃうのが玉に瑕。 前はJSでスクロール位置ずらしたりしてたんだけど、これだと他ページから 飛んできたときにずれちゃうんだよね。
なので最近は該当箇所の疑似要素に ネガティブmarginとpaddingで対応してます。。
#hoge:before{
content: "";
display:inlne-block;
margin-top:-100px;
padding-top:100px;
}
IDにスタイルつけるのは好きじゃないんだけど、分かりやすいので、逆にIDにつけてます。
hogeに背景色つけるときは、もう一つ上にdivをかませてあげると良きです。
ネガティブマージンは、固定ヘッダーと同じ高さにするとぴったりひっついて変だから 固定ヘッダーよりちょっと高くしたほうがよいです。
2018 上半期html/cssはまりやすい大賞
font周り
游ゴシックの、font-weightがwinのchromeだけ細い問題
font-faceでなんとか対応できたり、それがまたできなくなったりと去年あたり振り回されたけど、 現在（2018/4現在）は
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
で解決したってことでいいのかな？ 仕様変更激しいので、安心できないかな。
こちらのブログが詳しい。
http://www.tomotanuki.com/entry/yugothic-weight
noto sans ie11だと下に隙間が出来ちゃうんだよ問題
これもはまりやすい。 ie11は游ゴシックも下に隙間できるよね。
noto sansはたしか、サブセット化した時だけ下に隙間できる謎仕様
ie問題は昔よりは楽になったけど、まだまだ大変・・。
他にもたくさんあったと思うけど、いざ書こうと思うと思い出せないので とりあえずこの辺で。
思い出したら追記します。
ie11周り
スクロールががたつく問題
position:fixedや background-attachment:fixed設定するとie11でスクロールがガッタガタになる。 以下をいれると治る（ましになる？）
ieは本当に・・もうね。 ie6の頃と比べれば楽だけどね・・・。
<script>
if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
$('body').on("mousewheel", function () {
event.preventDefault();
var wd = event.wheelDelta;
var csp = window.pageYOffset;
window.scrollTo(0, csp - wd);
});
}
</script>
