- 投稿日:2020-01-24T20:23:19+09:00
CSS,SCSSで画像を背景にする方法
SCSSで作成
.クラス名 {
background: url(/フォルダ名/ファイル名) no-repeat top / 横px 縦px;
height: 要素の高さ;
wight: 要素の幅;
}backgroundで背景にする
urlで画像を指定する
no-repeatで画像が何枚も投稿されるのを防ぐ
(これがないと勝手に何枚も表示される)topで上に詰める?
画像の縦横を指定してあげる
間違いがあれば指摘をお願いします。
- 投稿日:2020-01-24T16:13:37+09:00
IE11でbackground-imageのJQueryが反映されない...!!
問題となったコード。
html<div id="image_area"></div>JQuery$("#image_area").css("background-image","url(画像パス)");このコードでは、Chrome、FireFoxでは動作するが、IE11では動かず。
いろいろ原因を探って、たどり着いた答えがコレ。修正後$("#image_area").css({ "background-image": 'url("画像パス")', });IE11で
background-image
プロパティを指定するときは1.
{ "background-image": 値 }
の形式で書く
2. 画像パスはダブルクオーテーションで囲む必要があるようです。なんでこうしないといけないのかはわからないですが...
はやくIE絶滅しないかな♪
- 投稿日:2020-01-24T15:34:29+09:00
HTML, CSSの基礎
- 投稿日:2020-01-24T14:01:21+09:00
iOSを“区別”したモーダル背景のスクロール固定
概要
つい先日Win7のサポートが終わり、2020年4月以降にはEdgeもChromium製にアップデートされるとのことで、ようやくIEの壁から目を逸らせる雰囲気になってきた先にそり立つ第二の壁ことiOS Safari(個人の感想です)。
数多のトラップがiOSのアップデートのたびに仕込まれるこのブラウザですが、なまじ日本における(iPhoneの)シェア率が高いばかりに泣く泣く対応せねばなりません。どこかで聞いた話ですね
今回はその中でもモーダルウィンドウを用いるサイトの対応について、iOSかそれ以外かを区別することでうまいこと実装できた気がするので備忘録として投稿します。
あくまで差別ではなく“区別”です。
……iOS版のVivaldiはやく出ないかな。(Safariを虚ろな目で見つめつつ)
要望と仕様
モーダルウィンドウなどのコンテンツに被る情報が表示されているあいだ、背景となったコンテンツ……つまり
body
部のスクロールは動かないよう固定されるべきであると考えられます。
背景まる見えレベルのサイズ感であれば許されるかもしれませんが、画面をほとんど覆うような大きさのモーダルの場合、弄っている間にいつの間にかモーダルを開いた時とは全く違う場所までスクロールしていた……となるとユーザに混乱を招くことになりかねないので、固定する方が自然な挙動だと言えます。(お客様からの要望としてもよく言われます)加えて、モーダルウィンドウで表示される情報が一画面内に収まるとは限りません。
PCのデザインや開発者ツール上では十分収まっている量でも、画面の小さいスマートフォンや横向きにした時(見辛いことこの上なしですが……)、またはヒョコヒョコとウザいツールバーの影響などによって想定よりも狭い表示領域で見られることを考えると、モーダルウィンドウ内もスクロールに対応するのが柔軟性のある実装だと言えるでしょう。こうした場合、
touchmove
イベントをe.preventDefault();
などでキャンセルする暴力的方法は、モーダル内のスクロールも禁止してしまうため使えません。きちんと影響範囲を把握して実装すれば可能ではありますが、そのためだけにタッチイベントを制御するのは別の問題が発生しやすく、手間もリスクも多いと考えます。よって、手早く背景
body
のスクロールを固定する方法は、おおむね2つに絞られます。
body
にoverflow: hidden;
をかけるbody
をposition: fixed;
にし、その時点のスクロール位置だけ表示をズラすシンプルな実装
実装がシンプルかつ分かりやすいのは前者の
overflow: hidden;
です。CSSbody { overflow: hidden; }
body
(表示領域)外のコンテンツが省略されるため、ほとんどのブラウザではこれだけでスクロールを固定することができます。
モーダルを閉じる時にもoverflow:hidden;
を解除するだけ。超超簡単……(カゴノトリ)そう、iPhone(iOS)“以外”ならね。
面倒な実装
iOS(iPadOSを含む)のSafariのみ、先ほどの実装ではスクロールを止めることができません。
そのため、結局は後者のposition: fixed;
による実装が必要となります。CSSbody { width: 100%; /* position:fixed;になった際に幅が変わるのを防ぐ */ position: fixed; top: -XXXpx; /* モーダルを開いた地点のスクロール量(XXX)だけズラす */ }
body
にposition: fixed;
をかけることでスクロールを無効化されるため、iOS Safariを含めた全てのブラウザで強制的にスクロールを固定することが可能です。(この際、body
の内容によっては表示幅が変わってしまうことがあるため、保険としてwidth: 100%;
をかけておきましょう)ただ、
position: fixed;
をかけた時点でこれまでのスクロール情報が失われてしまう(表示がページトップに戻ってしまう)ため、top
プロパティによってモーダルを開いた地点のスクロール量だけbodyをマイナス(ネガティブ)方向にズラすことで表示位置が変わらないように見せかける必要があります。手間ですねまた、先ほどの方法と同様モーダルを閉じた際には
position: fixed;
を解除するのですが、その際にも失われたスクロール情報は戻らないので、今度はスクロール位置をモーダルを開く前と同じ位置に自力で戻す必要があります。二度手間ですね……愚痴を言っても仕方ないので、モーダルを開いた時点のスクロール量
XXX
をJSのグローバル変数に逐一保持しておくことで、これらの問題を解決します。さらに面倒な仕様
しかし、
position: fixed;
を使う方法にもいくつかの穴があります。ひとつはスクロール情報が失われることにより、スクロール量に応じて表示が切り替わるコンテンツに影響が出ます。例えばスクロールすると表示されるページトップに戻るボタンであったり、
position: sticky;
ないしはそれに近い動きをJSで実装しているものはスクロールを固定した途端に表示が消えます。ただ、これらはスクロールの固定を解除した後にはきちんと元の状態に戻るはずなので、些細な問題ではあります。別の問題としてはMacOS(PC)のSafariで見た場合に、
position: fixed;
によって「ページトップに戻った」瞬間が見えてしまうことがあります。つまりモーダルを開閉するたびにページトップが一瞬チラつくような表示が稀に発生するため、モーダルを開く箇所が多いサイトだと地味に鬱陶しく感じます。IEですら起きないのにまた、よく他サイトなどで紹介されている方法として
overflow: hidden;
とposition: fixed;
を併用している(2つの実装が合体したような)ものをよく見ますが、そうするとiOSのSafariでモーダルの開閉時に一瞬白いチラつきが発生することがありました。これはoverflow: hidden;
がなければ発生しないようなので、上記のCSS例では省いています。同じSafariって名前なら挙動ぐらい統一してくれともあれ、起こってしまうものは仕方ありません。それぞれの環境に適した実装対応を表にまとめてみました。
iOS Safari MacOS Safari それ以外 overflow: hidden; × ○ ◎ position: fixed; ○ △ ○ (併用) △ △ ○ iOS, MacOS以外の環境(WinやAndroid等)はどちらの方法でもほぼ同じ挙動にはなるのですが、前述した通り
overflow: hidden;
の方がシンプルかつ確実な方法なので二重丸つけてます。さらにまとめるとこうなります。
- iOS:
position: fixed;
で対応- MacOS、それ以外:
overflow: hidden;
で対応つまり、iOSか否かを区別できれば、それぞれに適した方法でスクロールを固定することができそうです。
iOSかどうかをチェックするUA(ユーザーエージェント)は以下を参考にさせていただきました。
https://qiita.com/mtdune/items/97abb9c0bd926d4c8a13実装
position: fixed;
対策のwidth: 100%;
は予めCSSの方で適用していてもあまり問題なさそうなので、先に書いておきます。この辺りは好みだと思います。CSSbody { width: 100%; /* position:fixed;になった際に幅が変わるのを防ぐ */ }準備が済んだところで、スクロール固定・解除用の関数を作成します。
jQuery//モーダルを開いた時のスクロール位置を保持 var scrollPosition; //iOS(iPadOSを含む)かどうかのUA判定 var ua = window.navigator.userAgent.toLowerCase(); var isiOS = ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document; //bodyのスクロール固定 function bodyFixedOn() { if(isiOS){ // iOSの場合 scrollPosition = $(window).scrollTop(); $('body').css('position', 'fixed'); $('body').css('top', '-' + scrollPosition + 'px'); }else { // それ以外 $('body').css('overflow', 'hidden'); } } //bodyのスクロール固定を解除 function bodyFixedOff() { if(isiOS){ // iOSの場合 $('body').css('position', ''); $('body').css('top', ''); $(window).scrollTop(scrollPosition); }else { // それ以外 $('body').css('overflow', ''); } }これでモーダルを開く際に
bodyFixedOn()
を読み込むことで、
- iOS(iPhone, iPad):
position:fixed;
による固定- それ以外のPC(Win,Mac)やAndroid等:
overflow:hidden;
による固定が成されるようになります。
また、モーダルを閉じる際にはbodyFixedOff()
で解除すれば元通り。ちなみに、上記の条件だと端末部分のみの判定となるため、iOSアプリ版のChromeなどを使った場合であっても同じくiOSに該当するかと思います(iOSだとSafariしかちゃんと開発者ツールでの検証ができない……)。
ただ、そういった環境でもチェックした限り挙動としてはほとんど問題はないかなと思っています。とはいえ、そもそもUAを廃止する流れやiOSのアップデートによってコロコロ仕様が変わることを考えるとこの方法も永久に使えるわけではなさそうなので、ひとまず現在(2020年1月)時点の暫定対応というつもりです。備えよう。
無理……しんどい……おまけ
ES6できちんと書くならこういう感じ……?(テンプレート文字列って便利ですね)
JavaScript(ES6)let scrollPosition; const ua = window.navigator.userAgent.toLowerCase(); const isiOS = ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document; const body = document.querySelector('body'); function bodyFixedOn() { if(isiOS){ scrollPosition = window.pageYOffset; body.style.position = 'fixed'; body.style.top = `-${scrollPosition}px`; }else { body.style.overflow = 'hidden'; } } function bodyFixedOff() { if(isiOS){ body.style.removeProperty('position'); body.style.removeProperty('top'); window.scrollTo(0, scrollPosition); }else { body.style.removeProperty('overflow'); } }余談
この記事ではSafariばかりを目の敵にしてしまいましたが、今回紹介したどの方法でも「スクロールを固定する」=「スクロールバーが非表示になる」ので、スクロールバーの常時表示がデフォルトであるWindows環境ではスクロール固定時に画面がスクロールバーの幅の分だけ横にガタつくなどの問題もあります。
挙動自体は正しいものなので気になるなら〜程度ですが、対応策としてはいちおうIE/Edge(レガシ)専用ですが
-ms-overflow-style: -ms-autohiding-scrollbar;
あたりで強制的にauto-hide(コンテンツに被るスクロールバー)に変えてやるのが良さげです。ただWin版のFireFoxやChrome、Chromium版Edgeなどはスクロールバーごと非表示にする以外どうしようもなさそう……?結論としてはなんでもかんでもモーダルに頼るのをやめるのがよさそうというオチでした。やめて(懇願)
- 投稿日:2020-01-24T13:20:02+09:00
始めてWebサイトを作成した時にお世話になった記事
初めに
プログラミングを始め、初めてWebサイトを作成した時に自分がお世話になった記事をここにあげます。
もし自分と同じようなところで悩んでいるところがあれば、参考にしていってください。参考にした記事一覧
環境構築編
WindowsでPHP/Apache環境構築(ダウンロード~画面を起動するまで)
なぜか自分のパソコンにxamppがダウンロードできなかったので、この記事を参考にApacheサーバーを入れました。CSS編
サルワカ ChromeでCSSが反映されない?キャッシュ消去で対処
CSSの変更がブラウザになかなか反映されないという問題がこれで解決しました。JavaScript編
JavaScriptに"Maximum call stack …"で怒られた1例と解決までにやったこと
Google ChromeのデベロッパーツールのPerformanceを使ったエラーの検出方法、Maximum call stack というエラー文の意味について知ることができました。Samurai Blog【JavaScript入門】誰でも分かるPromiseの使い方とサンプル例まとめ!
実際のWebサイトには実装しませんでしたが、JavaScriptの関数を同期的に使う方法について学べました。PHP編
【PHP】HTMLSPECIALCHARS関数でエスケープ処理をしてください【XSSの防止】
利用者の入力情報のエスケープの方法について学ぶことができました。Qiita PHPオブジェクト指向入門(前半)
本だけでは理解しきれなかったPHPの基本について知ることができました。終わりに
Webサイトを始めて作成した際にブックマークをつけた記事はもう少し多かったのですが、いくつか消してしまったので7割程度しかあげられませんでした。
Webサイトを作成して思ったことは、自分が悩んでいる問題の解決策を無料で教えてくれる現代のネット環境は素晴らしいな、ということでした。
これからも楽しみながらプログラミングに取り組んでいきたいです。
- 投稿日:2020-01-24T11:51:05+09:00
HTML CSSの基本だけど少し詰まる点
フォントの設定について
フォントの種類を指定するにはfont-familyプロパティを使用する必要がある。
その際に注意すべき点は、Avenir Nextのようにフォント名にスペースがある場合は、
ダブルクオーテーションで囲む必要があります。ex h1 {
font-family: "Avenir Next";入れ子のセレクタについて
同じ要素に別々のCSSを使用するには入れ子構造を利用します。
要素がヘッダーとフッターの両方にあるが、ヘッダーの要素にの色のみを変えたい場合を考える。
具定例として
.header-list li {
color: #ff0000;
}上記のようにセレクタにおいてスペースを開けて記述することで特定の
要素にのみ変更を加えることができる。
- 投稿日:2020-01-24T01:22:33+09:00
レスポンシブ設計 キホンの基本 part1~display:flex;
CSSでレスポンシブなサイト作成のキホンについてやっていきますが、
その中でも超基本から。
この図のように、何もしないと要素は縦並びになってしましますよね。
レスポンシブにするためにはまず親要素のcontainerにdisplayをflexを設定します。
ちなみに、子要素の幅(width)は均等にするため、各子要素にflexを1に設定します。
style.css.container { display: flex; } .boxA { flex: 1; } boxB { flex: 1; }子要素が横並びになます。
デフォルトでは子要素の高さ(hieght)は同じで、幅(width)はコンテンツによって変わります。
今回の場合は、flex:1;を設定しているので、幅は均等です。
これがレスポンシブのキホンの基本です。
では次回は親要素のcontainerの幅を設定して、折り返す方法を書いていきたいと思います。
- 投稿日:2020-01-24T01:05:28+09:00
transformについて[html, css]
はじめに
「transformは何ができるのか」
「transformはどんな時に使うのか」
ということについて書いていきたいと思います。transform自体を使ったことがない人も多いと思いますが、
Webデザインをしていく中で必ず目にすることになると思います。そんなtransformについてまとめていきたいと思います。
transformについて
transformを使用することによって、デザインに移動、回転、伸縮、傾斜の効果をつけることができます。二次元的な動きだけではなく、三次元的な動きにも対応しています。
transformの種類
transformには4つの関数が用意されています。
- translate() 「移動」
- rotate() 「回転」
- scale() 「伸縮」
- skew() 「傾斜」
transformの使い方
それぞれの関数にX,Y,Z,3Dが用意されています。
translateX()
のように()の前にX,Y,Z,3Dを記入することでその軸に対して関数を使用することができます。
また、translate(X,Y,Z)
のように記入してもそれぞれの軸に対して関数を使用することができます。index.html<div class="transform">Transform<div>style.css.transform{ padding: 10px 20px; background: #59b1eb; text-align: center; color: #fff; width: 30%; }このhtml,cssに対して、transformを使用していきたいと思います。
わかりやすくするために:hover
,transition
を使用していきたいと思います。
hoverはカーソルを要素に置いた時に適用されるようにする要素です。
transitionはtransformを適用するにあたり、開始から終了までの時間を決めることができます。translate
translateは要素に移動の効果を追加することができます。
style.css.transform{ padding: 10px 20px; background: #59b1eb; text-align: center; color: #fff; width: 30%; transition: 1s; } .transform:hover{ transform: translate(20px,20px) }
.transform
にtransition: 1s;
を追加し
.transform:hover{
を新たに追加しました。
transform: translate(20px,20px)
}
動きを確認してみてください。
X軸方向に20px、Y軸方向に20px動くのが確認できたかと思います。rotate
rotateは要素に回転の効果を追加することができます。
style.css.transform:hover{ transform: rotateX(360deg) }rotateを使用する場合
px
ではなくdegree「度」を表す
deg
を使用します。
このコードの場合X軸に対して360度回転します。確認してみてください。style.css.transform:hover{ transform: rotateY(360deg) }この場合Y軸に対して回転するのが確認できるかと思います。
scale
scaleは要素に伸縮の効果を追加することができます。
style.css.transform:hover{ transform: scale(1.5,1.5) }値には
px
もdeg
も使用しません。
1.5と書けば要素の1.5倍、2.0と書けば要素の2倍になります。また、-2.0と書けば要素の1/2倍になります。
このコードではX軸、Y軸共に1.5倍になるのが確認できると思います。skew
skewは要素に傾斜を持たせることができます。
他の要素と異なり、X軸Y軸に対してしか使用できない特徴があります。また、値にはdeg
を使用します。style.css.transform:hover{ transform: skew(30deg,30deg) }他の要素と異なり、X軸Y軸に対してしか使用できない特徴があります。また、値には
deg
を使用します。transform-originについて
transform-origin
を使用することによって、要素の変化の基準点を設けることができます。style.css.translate:hover{ transform: rotate(45deg); transform-origin: top left; }基準点の設定方法ですが、
- 絶対指定(px)
- 相対指定(%)
- 位置指定(top, center,left等)の3つがあります。
ざっくりで良いなら位置指定、細かく決めたいなら絶対指定、相対指定を使用するという風に分けたら良いと思います。
まとめ
transformはマスターするとWebデザインの幅がとても広がります。
基礎的な使用方法でも十分幅が広まります。
ぜひマスターしましょう。