20200124のCSSに関する記事は8件です。

CSS,SCSSで画像を背景にする方法

SCSSで作成

.クラス名 {
background: url(/フォルダ名/ファイル名) no-repeat top / 横px 縦px;
height: 要素の高さ;
wight: 要素の幅;
}

backgroundで背景にする

urlで画像を指定する

no-repeatで画像が何枚も投稿されるのを防ぐ
(これがないと勝手に何枚も表示される)

topで上に詰める?

画像の縦横を指定してあげる

間違いがあれば指摘をお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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絶滅しないかな♪

参考にしたところ
jQueryで背景画像を変える時にIEでの対処法【JS】
背景画像をJavaScriptで書き換える

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML, CSSの基礎

今回はProgateを使ったHTML,CSSの学習をしました。

 実は前に2、3回くらいやったことがあったので、スラスラと進めることができました。
 具体的にやったこととしては見出しの書き方やHTMLへのCSSのリンクの書き込み、ヘッダーやフッターやメインの基礎です。HTML、CSSの復習としてはかなりいいものでした。

HTMLとCSSの要約

HTMLでサイトに文字や画像などを書き込み、CSSでその文字やCSSを装飾します。基本的にはこの二つを使うことでサイトの見た目を作ることができます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

iOSを“区別”したモーダル背景のスクロール固定

概要

つい先日Win7のサポートが終わり、2020年4月以降にはEdgeもChromium製にアップデートされるとのことで、ようやくIEの壁から目を逸らせる雰囲気になってきた先にそり立つ第二の壁ことiOS Safari(個人の感想です)。

数多のトラップがiOSのアップデートのたびに仕込まれるこのブラウザですが、なまじ日本における(iPhoneの)シェア率が高いばかりに泣く泣く対応せねばなりません。どこかで聞いた話ですね:thinking:

今回はその中でもモーダルウィンドウを用いるサイトの対応について、iOSかそれ以外かを区別することでうまいこと実装できた気がするので備忘録として投稿します。

あくまで差別ではなく“区別”です。

……iOS版のVivaldiはやく出ないかな。(Safariを虚ろな目で見つめつつ)

要望と仕様

モーダルウィンドウなどのコンテンツに被る情報が表示されているあいだ、背景となったコンテンツ……つまり body 部のスクロールは動かないよう固定されるべきであると考えられます。
背景まる見えレベルのサイズ感であれば許されるかもしれませんが、画面をほとんど覆うような大きさのモーダルの場合、弄っている間にいつの間にかモーダルを開いた時とは全く違う場所までスクロールしていた……となるとユーザに混乱を招くことになりかねないので、固定する方が自然な挙動だと言えます。(お客様からの要望としてもよく言われます)

加えて、モーダルウィンドウで表示される情報が一画面内に収まるとは限りません。
PCのデザインや開発者ツール上では十分収まっている量でも、画面の小さいスマートフォンや横向きにした時(見辛いことこの上なしですが……)、またはヒョコヒョコとウザいツールバーの影響などによって想定よりも狭い表示領域で見られることを考えると、モーダルウィンドウ内もスクロールに対応するのが柔軟性のある実装だと言えるでしょう。

こうした場合、touchmove イベントをe.preventDefault(); などでキャンセルする暴力的方法は、モーダル内のスクロールも禁止してしまうため使えません。きちんと影響範囲を把握して実装すれば可能ではありますが、そのためだけにタッチイベントを制御するのは別の問題が発生しやすく、手間もリスクも多いと考えます。

よって、手早く背景 body のスクロールを固定する方法は、おおむね2つに絞られます。

  • bodyoverflow: hidden; をかける
  • bodyposition: fixed; にし、その時点のスクロール位置だけ表示をズラす

シンプルな実装

実装がシンプルかつ分かりやすいのは前者の overflow: hidden; です。

CSS
body {
  overflow: hidden;
}

body (表示領域)外のコンテンツが省略されるため、ほとんどのブラウザではこれだけでスクロールを固定することができます。
モーダルを閉じる時にも overflow:hidden; を解除するだけ。超超簡単……(カゴノトリ)

そう、iPhone(iOS)“以外”ならね。

面倒な実装

iOS(iPadOSを含む)のSafariのみ、先ほどの実装ではスクロールを止めることができません。
そのため、結局は後者の position: fixed; による実装が必要となります。

CSS
body {
  width: 100%; /* position:fixed;になった際に幅が変わるのを防ぐ */
  position: fixed;
  top: -XXXpx; /* モーダルを開いた地点のスクロール量(XXX)だけズラす */
}

bodyposition: fixed; をかけることでスクロールを無効化されるため、iOS Safariを含めた全てのブラウザで強制的にスクロールを固定することが可能です。(この際、 body の内容によっては表示幅が変わってしまうことがあるため、保険としてwidth: 100%;をかけておきましょう)

ただ、position: fixed; をかけた時点でこれまでのスクロール情報が失われてしまう(表示がページトップに戻ってしまう)ため、 top プロパティによってモーダルを開いた地点のスクロール量だけbodyをマイナス(ネガティブ)方向にズラすことで表示位置が変わらないように見せかける必要があります。手間ですね:cry:

また、先ほどの方法と同様モーダルを閉じた際には position: fixed; を解除するのですが、その際にも失われたスクロール情報は戻らないので、今度はスクロール位置をモーダルを開く前と同じ位置に自力で戻す必要があります。二度手間ですね:sob:

……愚痴を言っても仕方ないので、モーダルを開いた時点のスクロール量 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の方で適用していてもあまり問題なさそうなので、先に書いておきます。この辺りは好みだと思います。

CSS
body {
  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などはスクロールバーごと非表示にする以外どうしようもなさそう……?

結論としてはなんでもかんでもモーダルに頼るのをやめるのがよさそうというオチでした。やめて(懇願)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

始めて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サイトを作成して思ったことは、自分が悩んでいる問題の解決策を無料で教えてくれる現代のネット環境は素晴らしいな、ということでした。
これからも楽しみながらプログラミングに取り組んでいきたいです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML CSSの基本だけど少し詰まる点

フォントの設定について

フォントの種類を指定するにはfont-familyプロパティを使用する必要がある。
その際に注意すべき点は、Avenir Nextのようにフォント名にスペースがある場合は、
ダブルクオーテーションで囲む必要があります。

ex h1 {
font-family: "Avenir Next";

入れ子のセレクタについて

同じ要素に別々のCSSを使用するには入れ子構造を利用します。
具定例として

要素がヘッダーとフッターの両方にあるが、ヘッダーの要素にの色のみを変えたい場合を考える。
.header-list li {
color: #ff0000;
}

上記のようにセレクタにおいてスペースを開けて記述することで特定の

要素にのみ変更を加えることができる。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

レスポンシブ設計 キホンの基本 part1~display:flex;

CSSでレスポンシブなサイト作成のキホンについてやっていきますが、

その中でも超基本から。

このような構図があったとします。スクリーンショット 2020-01-24 1.02.02.png

この図のように、何もしないと要素は縦並びになってしましますよね。

レスポンシブにするためにはまず親要素のcontainerにdisplayをflexを設定します。

ちなみに、子要素の幅(width)は均等にするため、各子要素にflexを1に設定します。

style.css
 .container {
display: flex;
}
.boxA {
flex: 1;
}
boxB {
flex: 1;
}

そうすると、こうなります。スクリーンショット 2020-01-24 1.15.02.png

子要素が横並びになます。

デフォルトでは子要素の高さ(hieght)は同じで、幅(width)はコンテンツによって変わります。

今回の場合は、flex:1;を設定しているので、幅は均等です。

これがレスポンシブのキホンの基本です。

では次回は親要素のcontainerの幅を設定して、折り返す方法を書いていきたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

transformについて[html, css]

はじめに

「transformは何ができるのか」
「transformはどんな時に使うのか」
ということについて書いていきたいと思います。

transform自体を使ったことがない人も多いと思いますが、
Webデザインをしていく中で必ず目にすることになると思います。

そんなtransformについてまとめていきたいと思います。

transformについて

transformを使用することによって、デザインに移動、回転、伸縮、傾斜の効果をつけることができます。二次元的な動きだけではなく、三次元的な動きにも対応しています。

transformの種類

transformには4つの関数が用意されています。

  1. translate() 「移動」
  2. rotate() 「回転」
  3. scale() 「伸縮」
  4. 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)
}

.transformtransition: 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)
}

値にはpxdegも使用しません。
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-origin_1.png

まとめ

transformはマスターするとWebデザインの幅がとても広がります。
基礎的な使用方法でも十分幅が広まります。
ぜひマスターしましょう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む