こんにちは。ホームページを閲覧している中で、始めはヘッダーが固定されていなかったのに、途中から常に規定の位置で固定されているページをお見掛けしたことはありませんか？

今回はスクロール中にヘッダーナビゲーションを固定させる方法をご紹介していきたいと思います。

また、本記事のコードではJQueryを使用しています。

HTML

HTMLでは、トップ画像とナビゲーション、サイトの長さを出すためにsection・footer要素を置いています。

<div id="top_visual"></div>
<nav>
    <div class="wrapper">
        <ul>
            <li class="item"><a href="#news">News</a></li>
            <li class="item"><a href="#about">About</a></li>
            <li class="item"><a href="#blog">Blog</a></li>
            <li class="item"><a href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>
<section id="news">
    <div class="wrapper">
        <h1>News</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<section id="about">
    <div class="wrapper">
        <h1>About</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<section id="blog">
    <div class="wrapper">
        <h1>Blog</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<section id="contact">
    <div class="wrapper">
        <h1>Contact</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<footer>
    <p>© 2020 nyanblog</p>
</footer>

CSS

CSSで見た目を整えていきます。
また、JavaScriptでつけ外しをする「nav.fixed」でヘッダーを固定しています。

@charset "utf-8";

*{
    margin: 0;
}

#top_visual {
    background: url(../img/visual.jpg) center center / cover no-repeat;
    height: 480px;
}

nav {
    background: #fff;
    width: 100%;
}

nav.fix {
    position: fixed;
    right: 0;
    top: 0;
}

.wrapper {
    margin: 0 auto;
    max-width: 100%;
}

nav ul {
    justify-content: flex-end;
    display: flex;
    list-style: none;

}

.item {
    margin: 0 2em;
    padding: 17px 0;
}

.item a {
    color: #B78D4A;
    text-decoration: none;
}

.item a:hover{
    color: #D5BC94;
}

h1 {
    font-size: 1.25rem;
    padding: 2rem 0;
    color: #B78D4A;
    font-weight: normal;
}

p {
    line-height: 2;
    padding-bottom: 4rem;
    color: #555A60;
}

section{
    background-color: #F0F0F0;
    padding: 2em;

}

section .wrapper{
    max-width: 800px;
}

footer {
    background-color: #B78D4A;
    padding: 2em;
}

footer p {
    font-size: .8em;
    color: #fff;
    max-width: 800px;
    padding: 0;
}

JavaScript

JavaScriptでスクロールイベントするたびに、スクロールの位置とnav要素の位置と比較しています。
スクロールの位置を超えると、nav要素に「fix」クラスを付与し、上部に固定させます。

$(function() {
    var pos = $("nav").offset().top;
    var height = $("nav").outerHeight();
    $(window).scroll(function () {
        if ($(this).scrollTop() > pos) {
            $("nav").addClass("fix");
            $("body").css("padding-top", height);
        } else {
            $("nav").removeClass("fix");
            $("body").css("padding-top", 0);
        }
    });
});

デモページ

デモページはこちらです。
実際にスクロールで動かしてヘッダーが固定されることを確認してみてください。

ひとこと

いかがでしたでしょうか。
今回はスクロールイベントを利用して、ヘッダーナビゲーションを固定させる方法をご紹介しました。

簡単にコピペで実装することができますので、良かったら試してみてください。
本記事をご覧くださり、ありがとうございました！

投稿 【JavaScript】スクロール中にヘッダーを固定する方法【簡単・コピペOK】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

前回は、＜input type = “file”＞で選択するボタンの装飾について説明しました。
詳しくは、こちらをご覧ください。

ファイルを選択するボタンの画像やスタイルを設定する方法＜input type="file"＞

input要素において、「確認する」ボタンを でsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。しかし、ファイルを選択するinput要素では、既にtype = "file"が設定されているため、少し工夫が必要になります！今回は選択ボタンの画像やスタイルの変更をいく...

nyanblog2222.com

2020.06.03

今回はinput要素で読み込んだ画像を表示させてみようと思います。
それでは、img要素とdiv要素それぞれのパターンでみていきましょう。

【サンプル1】img要素に出力

まずは、img要素に出力してみます。
input要素、type=”file”では、ファイルを選択後、onchangeのイベントが呼ばれます。
JavaScriptでは、on(“change”, function())関数です。

HTMLではinput要素とimg要素を宣言します。

<input type="file" id="input1"/>
<img id="sample1">

JavaScriptに1～4の内容を記述します。

1. ファイル選択後に呼ばれるイベントを記述
2. イベント内で画像ファイルの読み込みクラスを設定
3. 読み込みクラスの準備が終わったらimg要素のsrc属性に画像ファイルの情報を設定
4. 読み込んだ画像ファイルをURLに変換

// 1. ファイル選択後に呼ばれるイベント
$("#input1").on("change", function (e) {

    // 2. 画像ファイルの読み込みクラス
    var reader = new FileReader();

    // 3. 準備が終わったら、id=sample1のsrc属性に選択した画像ファイルの情報を設定
    reader.onload = function (e) {
        $("#sample1").attr("src", e.target.result);
    }

    // 4. 読み込んだ画像ファイルをURLに変換
    reader.readAsDataURL(e.target.files[0]);
});

【サンプル2】div要素に出力

次はdiv要素に画像ファイルを出力してみます。
JavaScriptの記述方法も変えてみました。

先ほどと異なり、input要素のonchange属性にOutputImage関数を設定しています。

<input type="file" id="input2" onchange="OutputImage(this);"/>
<div id="sample2"></div>

JavaScriptではサンプル1と同様、ファイル読み込みクラスを使用して、画像を表示させます。
サンプル1と異なるのはImageクラスを使って、heightとwidthの設定を追加しています。

1. input要素のonchange属性に関数を設定
2. イベント内で画像ファイルの読み込みクラスを設定
3. 読み込みクラスの準備が終わったら画像の情報を設定
4. Imageクラスに読み込んだ画像の情報を設定し、div要素に読み込んだ画像の縦・横のサイズを設定
5. backgroundスタイルを設定
6. 読み込んだ画像ファイルをURLに変換

// 1. onchange属性に設定した関数
function OutputImage(target)
{
    // 2. ファイル読み込みクラス
    var reader = new FileReader();

    // 3. 読み込みクラスの準備が終わった後、画像の情報を設定
    reader.onload = function () {
        $sample2 = $("#sample2");

        // 4. Imageクラスを使ってdiv要素に画像のheightとwidthのサイズを設定
        img = new Image();
        img.src = this.result;
        img.onload = function() {
            $sample2.css("width", img.naturalWidth);
            $sample2.css("height", img.naturalHeight);
        }
        // 5. backgroundスタイルを設定
        $sample2.css("background", "url(" + this.result + ") center center / contain no-repeat");
    }
    // 6. 読み込んだ画像ファイルをURLに変換
    reader.readAsDataURL(target.files[0]);
}

デモ

こちらがサンプル1とサンプル2のデモです。
内容は一緒ですが、出力方法や要素がimgかdivであることが異なります。

サンプル1

サンプル2

まとめ

今回はinput type=file要素で取得した画像ファイルを出力する方法を説明していきました。
divに関して、今回例で試してみただけなので、別の要素でも試してみてください。
次回は複数ファイルを読み込んで出力してみましょう。

本記事をご覧いただきありがとうございました。

投稿 ＜input type=”file”＞で読み込んだ画像を表示させよう【JavaScript】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

input要素において、「確認する」ボタンを ＜input type = “image”＞ でsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。

しかし、ファイルを選択するinput要素では、既にtype = “file”が設定されているため、少し工夫が必要になります！
今回は選択ボタンの画像やスタイルの変更をいくつかの方法でご紹介します。

【サンプル1】ボタンを画像に設定する

ボタンを画像にする方法について、
HTMLでは、input要素をlabel要素で囲みます。

<label id="sample1">
   <input type="file"/>
</label>

CSSでlabel要素に画像を設定します。
他にもサイズやポインタなど、スタイルを変更しておきましょう。

デフォルトでinput要素はボタンが出力されるので、display: none; で表示を消しておきます。

また、hoverの疑似クラスで別の画像を設定しておくと、少し動きが出ますね。

#sample1 {
    // サイズを設定
    height: 54px;
    width: 150px;

    // ボタンにする画像を設定
    background: url(../img/sample1.png) center center / contain no-repeat;

    // インラインボックスに設定
    display: inline-block;
    // マウスカーソルを当てた時、ポインタに設定
    cursor: pointer;
}

#sample1:hover {
    background: url(../img/sample1_hover.png) center center / contain no-repeat;
}

#sample1 input{
    // デフォルトのinputは出力なし
    display: none;
}

また、今回はサンプルなので簡単な画像なのですが、
この程度の画像の動きであればスタイルでも実現可能です。

ボタンのスタイルを変更

【サンプル2】<label>で囲んでスタイルを設定

先ほどの画像の設定と同様にinput要素をlabel要素で囲みます。

<label id="sample2">
   <input type="file"/>
</label>

続いて、今度はlabel要素をCSSで設定していきます。

#sample2 {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  background: #00BCD4;/*背景色*/
  color: #00BCD4;/*=背景色*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
  border-bottom: solid 2px #118e9e;
  border-radius: 4px;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

#sample2:active {
  /*押したとき*/
  border-bottom: solid 2px #00BCD4;
  box-shadow: none;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}

#sample2 input{
    // デフォルトのinputは出力なし
    display: none;
}

【サンプル3】CSSとJavaScriptを使ってスタイルを変更

次はdiv要素でボタンを作成し、CSSで装飾を付けます。
input要素はサンプル2と同様、出力しないようにします。

<div id="sample3">ファイルを選択</div>
<input type="file" id="sample3_input"/>

#sample3 {
    position: relative;
    display: inline-block;
    padding: 0.75em 1.25em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
}

#sample3:active {
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
}

#sample3 input{
    // デフォルトのinputは出力なし
    display: none;
}

JavaScriptでdiv要素をクリックしたときに、input要素をクリックしたイベントを呼び出します。
今回はJQueryで記述しています。

$(function () {
    $('#sample3').click(function() {
        $('#sample3_input').trigger('click');
    });
});

デモ

今までのサンプルそれぞれのデモです。
ボタンをクリックするとダイアログが表示されますが、ファイルを選択しても何も起こりません。

まとめ

今回はinput要素でファイル選択ボタンのスタイルを変更や、画像の設定を行いました。

ぜひ色々試してみてくださいね！

投稿 ファイルを選択するボタンの画像やスタイルを設定する方法＜input type=”file”＞ は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。今回はJavaScriptを使ってビンゴカードを作成してみました。Jqueryも使用していますので、ご注意ください。

HTMLの設定

まずは、枠作りのHTMLからです。

ビンゴカードの枠と作成用のボタンを設定しています。

<div>
    <table id="bingo" cellspacing="10">
        <tbody>
            <tr>
                <th>B</th>
                <th>I</th>
                <th>N</th>
                <th>G</th>
                <th>O</th>
            </tr>
            <tr>
                <td id="bi0"></td>
                <td id="bi1"></td>
                <td id="bi2"></td>
                <td id="bi3"></td>
                <td id="bi4"></td>
            </tr>
            <tr>
                <td id="bi5"></td>
                <td id="bi6"></td>
                <td id="bi7"></td>
                <td id="bi8"></td>
                <td id="bi9"></td>
            </tr>
            <tr>
                <td id="bi10"></td>
                <td id="bi11"></td>
                <td id="bi12"></td>
                <td id="bi13"></td>
                <td id="bi14"></td>
            </tr>
            <tr>
                <td id="bi15"></td>
                <td id="bi16"></td>
                <td id="bi17"></td>
                <td id="bi18"></td>
                <td id="bi19"></td>
            </tr>
            <tr>
                <td id="bi20"></td>
                <td id="bi21"></td>
                <td id="bi22"></td>
                <td id="bi23"></td>
                <td id="bi24"></td>
            </tr>
        </tbody>
    </table>
    <p id="button"><input type="button" value="カード作成" id="bingo-create"></p>
</div>

CSSの設定

ビンゴカードと作成ボタンのスタイルを設定しています。

/* カード全体のスタイル */
#bingo{
    width: 340px;
    margin: 0 auto;
}

/* B I N G Oと番号のスタイル */
#bingo th,
#bingo td {
    text-align: center;
    font-weight: normal;
}

/* B I N G O の文字のスタイル */
#bingo th{
    color: #B78D4A;
}

/* 番号のスタイルを設定 */
#bingo td {
    width: 60px;
    height: 55px;
    text-align: center;
    vertical-align: middle;
    
    border-radius: 1.5rem 1.5rem 0 0;
    color: #fff;
    background-color: #B78D4A;
    border: 2px solid #B78D4A;
}

/* 番号をチェックした時に変更するクラス、スタイルを設定 */
#bingo td.check {
    color: #B78D4A;
    background-color: #F0F0F0;
}

/* 番号をマウスオーバーした時にポインタを指矢印に変更 */
#bingo td:hover {
    cursor: pointer;
    cursor: hand;
}

/* 作成ボタンのスタイル */
p#button{
    text-align: center;
}

JavaScript

JavaScriptでカードの番号をランダムに設定する動きと、
番号をクリックした際にスタイルを変更するクラスをつけ外ししています。

$(function () {
    var make_col = function (base) {
        var arr = [];
        for(var i=0; i<15; i++) {
            arr.add(i);
        }
        var list = [];
        for (var i = 1; i <= 5; i++) {
            // ランダムで値を取得
            var a = parseInt(Math.random() * arr.length);
            list.push(arr[a] + base);
            // 数字を重複させないため、元々のリストから値を削除する
            arr.splice(a, 1);
        }
        return list;
    };

    var make_table = function () {
        // B列、I列...とそれぞれで5つの数字をランダムで取得
        var col_b = make_col(1);
        var col_i = make_col(16);
        var col_n = make_col(31);
        var col_g = make_col(46);
        var col_o = make_col(61);
        
        // 25個分の数字を格納できるtableに取ってきた列の数字を設定
        var list = new Array(25);
        for (var i = 0; i < 5; i++) {
            list[i * 5 + 0] = col_b[i];
            list[i * 5 + 1] = col_i[i];
            list[i * 5 + 2] = col_n[i];
            list[i * 5 + 3] = col_g[i];
            list[i * 5 + 4] = col_o[i];
        }
        // 中心はfreeで固定
        list[12] = 'free';
        return list;
    };
    
    // カード作成関数
    var create_card = function () {
        // 取ってきた数字が入ったtableをhtmlに出力する
        var table = make_table();
        for (var i = 0; i < table.length; i++) {
            $('#bi' + i).text(table[i]);
        }
    };

    // 初期化関数
    var init = function () {
        create_card();
        
        // チェック状態を外す
        $('#bingo td').each(function () {
            $(this).removeClass('check');
        });
    };
    
    // 初期
    init();
    
    // カード作成 ボタンをクリックすると、初期化
    $('#bingo-create').click(function () {
        init();
    });
    
    // 番号をクリックすると、スタイルを変更するクラスをつけ外しできる
    $('#bingo td').click(function (){
        $(this).toggleClass('check');
    });
});

デモ

こちらが作成したビンゴカードです。

デモページはこちら

番号をクリックすると見た目が変更されます。
（押し間違い対策でもう一度番号をクリックすると元に戻ります。）
カードをリセットしたい場合は、「カード変更」ボタンをクリックすると、初期化されます。

まとめ

今回はJavaScriptを使って、ビンゴカードを作成してみました。
列がそろったらBINGO！の表示を追加するのも面白いですね！
近いうちに試してみたいと思います。

次回の記事も良かったらご覧ください。

【Bingo Game】JavaScriptでビンゴゲームの作り方【サンプル】

JSでビンゴマシンを作成してみましたのでサンプルコードをご紹介します。簡単にできて解説もついて分かりやすくしています。ビンゴカード作成の記事もありますので、良かったら見てみてください♪

nyanblog2222.com

2020.06.09

投稿 【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

前回まで、CSSのobject-fit、object-positionプロパティの使い方をご紹介しました。

【CSS】object-fitの使い方【img要素の縦横比固定方法】

CSSに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定サイズで画像を配置する方法を紹介します。他にも「object-fit」プロパティにてどのように配置するか設定することも可能。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.24

【CSS】object-positionの使い方【img要素の画像配置設定】

img要素などの置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介します。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.26

ただし、前回までの記事でも記載したように、このプロパティはIEには対応しておらず、別途対応する必要があります。
今回はIEに対応させるobject-fit-imagesを使用して、object-fit、object-positionプロパティを有効にできる方法を紹介していきます。

object-fit-imagesライブラリを有効にする

まずは、object-fit-imagesライブラリを有効にしていきます。
方法は2つあり、
1つはCDNを読み込む方法。
もう1つはダウンロードしたファイルを読み込む方法。です。

CDNを貼り付ける

CDNとは、「Content Delivery Network」の頭文字を取った略称で、「コンテンツ配信ネットワーク」を指します。
簡単に言うと、ネットワーク上に配置されているファイルにアクセスできる仕組みのことです。
この仕組みを使うとサーバの負荷を一部肩代わりしてくれるようになるため、レスポンスが早くなると言われています。

htmlにscript要素を使って、CDNを読み込ませます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>

ダウンロードしたファイルを読み込む

こちらのサイトから「Clone or download」をクリックしてダウンロードしてください。
https://github.com/bfred-it/object-fit-images

ダウンロードしたファイルの中から「ofi.js」ファイルを読み込む設定をhtmlのscript要素で設定します。

<script src="ofi.min.js"></script>

img要素にクラスを追加

object-fit、object-positionプロパティを使用するimg要素にクラスを追加します。
クラス名は任意で問題ないので、既にクラスを指定している場合はそのクラスを使っても大丈夫です。

<img src="img/01.jpg" class="object-image">

CSSに”font-family”プロパティを設定

2～5行目まではimgのサイズ設定と処理結果が分かりやすいように、背景色と境界線を設定しています。

7、8行目：object-fit、object-positionプロパティを設定しています。
10行目：IE用に「font-family」プロパティを設定します。値は7、8行目で設定した値と同じ値を設定します。

object-image{
    width: 400px;
    height: 300px;
    background-color: #999;
    border: 1px solid #666;

    object-fit: none;
    object-position: right;
    // IEのブラウザに対応
    font-family: 'object-fit: none; object-position: right;';
}

10行目があれば、7、8行目は不要なのかも？と思い、試してみましたが、object-fit、object-positionが反映されなかったので、別々に記述が必要みたいです。

JavaScriptの記述を追加

htmlファイル内の</body>の直前にscript要素を追加し、objectFitImages関数を呼び出します。

全てのimg要素に対応させる場合は引数なし。
任意のクラスに画像を対応させたい場合は引数に「img.クラス名」を設定します。
※ クラス名のみでは、反映されないので、注意してください。

// 全てのimg要素に対応
<script>
    objectFitImages();
</script>

// 指定のimg要素のクラスに対応
<script>
    objectFitImages('img.object-image');
</script>

処理結果

ここまで設定が終わりましたら、処理結果を見てみましょう。
このページをIEで開き、対応前と比較して対応後ではobject-fitが効いていることを確認してみてください。
他のブラウザでは対応前と対応後では一緒の動きをしています。

object-fit-images対応前

object-fit-images対応後

まとめ

いかがでしたでしょうか。
今回は「object-fit-imagesライブラリ」を使って、IEのブラウザにobject-fitを対応させてみました。
まだまだIEのブラウザは使用されているので、対応させて損はないと思います。
※ 2022年6月15日でサポート終了予定

4つの簡単なステップで対応ができるので、良かったら試してみてください。

今回の記事が何かの参考になれば幸いです。
ご来訪ありがとうございました。それでは♪

投稿 【CSS】object-fit,object-positionのIE対応【object-fit-images】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

前回はCSSで「object-fit」プロパティを使って、img要素などの置換要素に対してコンテンツをどのようにはめ込むかを設定しました。
よければこちらの記事もご覧になってください。

【CSS】object-fitの使い方【img要素の縦横比固定方法】

CSSに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定サイズで画像を配置する方法を紹介します。他にも「object-fit」プロパティにてどのように配置するか設定することも可能。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.24

今回は置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介していきたいと思います。

object-positionプロパティ

このプロパティは「iframe」、「video」、「img」など要素の中身（コンテンツ）を要素のどこに配置するか設定します。

先ほども説明あったようにコンテンツをどのようにはめ込むかは「object-fit」プロパティを設定します。

値の設定について

値はこのように設定することができます。
object-fit: [左右] [上下]
初期値は真ん中の“50% 50%”が設定されています。

[左右]：left、right、center
　　　もしくは　left、right + 数値（単位付）
　　　もしくは　数値（単位付）のみ
[上下]：top、bottom、center
　　　もしくは　top、bottom + 数値（単位付）
　　　もしくは　数値（単位付）のみ

※ デフォルトで50%がそれぞれ設定されているので、片方省略も可能
例：object-fit: right もしくは、object-fit: bottom など

設定値だけ見てもイメージが湧きにくいと思いますので、
次は実際にコードを記述して、結果を見てみましょう。

サンプル

それでは実際にソースコードを記述して配置を見てみましょう。
使用する画像はこちらです。

<p>右中央に表示</p>
<img src="img/01.jpg" class="right-center sample">

<p>中央下に表示</p>
<img src="img/01.jpg" class="center-bottom sample">

<p>左上に表示</p>
<img src="img/01.jpg" class="left-top sample">

<p>パーセント表記で設定（80%、20%）</p>
<img src="img/01.jpg" class="set-percentage1 sample">

<p>パーセント表記で設定（右から80%、下から20%）</p>
<img src="img/01.jpg" class="set-percentage2 sample">

<p>ピクセルで設定（50px、180px）</p>
<img src="img/01.jpg" class="set-pixel sample">

img{
    width: 400px;
    height: 300px;

    // imgのサイズを分かりやすくするため、background-color、
    // borderを設定し、object-fitはnoneを設定しています。
    background-color: #999;
    border: 1px solid #666;
    object-fit: none;
}

// 右中央
.right-center{
    object-position: right;
}

// 中央下
.center-bottom{
    object-position: bottom;
}

// 左上
.left-top{
    object-position: left top;
}

// パーセントで値を設定（80%, 20%）
.set-percentage1{
    object-position: 80% 20%;
}

// パーセントで値を設定（右から80%、下から20%）
.set-percentage2{
    object-position: right 80% bottom 20%;
}

// ピクセルで値を設定（50px, 180px）
.set-pixel{
    object-position: 50px 180px;
}

結果がこちらです。

右中央に表示

中央下に表示

左上に表示

パーセント表記で設定（80%、20%）

パーセント表記で設定（右から80%、下から20%）

ピクセルで設定（50px、180px）

最後の結果についてですが、img要素からはみ出ている部分は出力されていないことが分かります。
つまりimg要素の中で画像を配置しているので、img要素からはみ出ている赤枠部分は表示されず、トリミングされています。

まとめ

今回は「object-position」プロパティをご紹介しました。
前回紹介した「object-fit」プロパティと合わせて使いこなしていきたいですね！

ただし、「object-fit」プロパティと同様IEにはどのバージョンでも現時点（2020年5月）では対応できていませんので、別途IE対応が必要なのは一緒ですね。
IE対応する方法として「object-fit-images」について以下の記事で紹介していますので、宜しければご覧ください♪

【CSS】object-fit,object-positionのIE対応【object-fit-images】

CSSのobject-fit、object-positionプロパティはIEに対応していません。なので、object-fit-imagesを使用して、IEに対応させる方法を紹介します！　object-fit、object-positionの使い方については前記事で触れていますので、良かったら一緒にどうぞ♪

nyanblog2222.com

2020.05.27

投稿 【CSS】object-positionの使い方【img要素の画像配置設定】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

画像の縦横比を固定する方法で、cssに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定のサイズで画像を配置することができます。
他にも「object-fit」プロパティを使うことで、どのように配置するか設定することができます。

今回は「object-fit」プロパティの使い方と設定値の内容を詳しく紹介していきたいと思います。

object-fitプロパティ

このプロパティは置換要素である、「iframe」、「video」、「img」など要素の中身（コンテンツ）をどのようにはめ込むかを設定します。

また、コンテンツをどのように配置するかは「object-position」プロパティを使用します。

値の設定について

object-fitプロパティは複数の値を設定することができます。
設定の内容を表にまとめてみました。
要素=img、コンテンツ=画像を見立てると、分かりやすいと思います。

サンプル

それでは実際に試してみましょう。
使用するのは、こちらの画像です。

さっそく、HTMLとCSSを設定してみましょう。

<p>cover</p>
<img src="img/01.jpg" class="cover">

<p>contain</p>
<img src="img/01.jpg" class="contain">

<p>fill</p>
<img src="img/01.jpg" class="fill">

<p>none</p>
<img src="img/01.jpg" class="none">

<p>scale-down</p>
<img src="img/01.jpg" class="scale-down">

img{
    width: 180px;
    height: 60px;

    // 左端に寄せてサイズを見やすくしたかったので、設定
    object-position: left;

    // imgのサイズを分かりやすくするため、background-colorを設定
    background-color: #999;
}

.cover {
    object-fit: cover;
}

.contain {
    object-fit: contain;
}

.fill {
    object-fit: fill;
}

.none {
    object-fit: none;
}

.scale-down {
    object-fit: scale-down;
}

結果がこちらです。

cover
縦横比そのまま、画像の上下トリミング

contain
縦横比そのまま、要素の右側が空いた状態

fill
画像全体をimg要素のサイズに合わせて表示。
画像が押しつぶされたような見た目。

none
画像をimg要素のサイズに合わせて一部分切り取っている。

scale-down
このサンプルでは、containが適用されています。

このように値「contain」「cover」「none」「scale-down」を使えばアスペクト比を変わらずコンテンツを設定することができます。
状況に応じて使ってみてください。

ただし、このプロパティは残念ながらIEには対応しておりません。
また、このプロパティを対応させるためには、cssかHTMLの属性でサイズを設定する必要があります。
object-fitプロパティが対応されていない！状況に陥りましたら、まずはサイズが設定されているかを確認してみてください。

まとめ

今回はobject-fitプロパティの使い方をご紹介しました。
要素のサイズさえ指定できれば値の設定も簡単なので、使いやすいかと思います。

ただ、先述しましたようにIEでは、現在（2020年5月）使用することができません。別途対策が必要になりますね！
IE対応する方法として「object-fit-images」について以下の記事で紹介していますので、宜しければご覧ください♪

【CSS】object-fit,object-positionのIE対応【object-fit-images】

CSSのobject-fit、object-positionプロパティはIEに対応していません。なので、object-fit-imagesを使用して、IEに対応させる方法を紹介します！　object-fit、object-positionの使い方については前記事で触れていますので、良かったら一緒にどうぞ♪

nyanblog2222.com

2020.05.27

【CSS】object-positionの使い方【img要素の画像配置設定】

img要素などの置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介します。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.26

また、こちらの記事も良かったら覗いてみてください♪

投稿 【CSS】object-fitの使い方【img要素の縦横比固定方法】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。