What's New Qiita

20191112のCSSに関する記事は15件です。

  • 投稿日：2019-11-12T22:16:20+09:00

フロントもさわるようになって絶望的にCSSができなかったため勉強した話

フロントもさわるようになって絶望的にCSSができなかったため勉強した話

これまでフロント。というより、HTMLやCSSについて少し触ることはあってもガッツリレイアウトとか触ってこなかったわけで、いざやろうとなったときに、できなすぎて絶望しました。

そのため、今回は最低限コレくらいはしっておけというものをまとめてみました。
(お恥ずかしながら、classは.でidは#で位しか知らんかった。。。)

position

  • relative
    • 現在の位置から相対的な位置を決める
  • absolute
    • 親要素を基準に絶対的な位置を決める
  • fixed
    • 決まった位置に固定する
  • flex
    • flexboxコンテナで自由度高く設計可能(後述)
    • コンテンツを並べて表示したいときに使ってる

ポジションが決まったら。

  • top
  • bottom
  • left
  • right

で配置を決める。
左上から位置はスタートする。
↑positionを指定しない場合、static(デフォルト)となるがこの場合はtopとかを指定できない

  • z-index
    • 重ねて表示する場合に、その順序を指定する

親要素はrelativeにしておき、重ねるものはabsoluteで指定する

flexbox

  • flex-direction
    • 子要素の配置方向を縦や横で指定する
  • flex-wrap
    • 折り返し位置を指定する
  • justify-content
    • 子要素を揃える
  • align-items
    • 子要素の高さやベースラインを指定する

display

  • block
    • 要素が横いっぱいまで広がり縦に並んでいく
    • div, h1, p, ulなど(デフォルト)
  • inline
    • 要素は横に並んでいく
    • a, span, imgなど（デフォルト）
  • inline-block
    • 要素は横に並ぶが、ブロックのように扱える
  • none
    • 非表示にする

block, inline-blockはwidthとheightが指定できるが、inlineは指定できない
block, inline-blockはmarginとpadding(４方向)を指定できるが、inlineは左右しかできない

逆にinline-blick, inlineはtext-alignが指定できる

inline要素は基本的にはblock要素の中で利用される

width heightの指定

  • px
    • ピクセル数で絶対値で指定する
  • %
    • 親要素に対する割合で指定
  • em
    • 親要素のfont-sizeを基準に計算する
  • rem(root em)
    • html要素（ルート要素）のfont-sizeを基準に計算する
  • auto(デフォルト)
    • 自動で決まる。基本的には親要素いっぱいに広がる

widthだけ指定してheightはautoにすると、縦横比を維持したまま、広がる

autoだとwidthの中にpaddingとborderが含まれるが、100%だと含まれない

  • min-width
    • 横幅の最小値を指定する
  • max-width
    • 横幅の最大値を指定する

margin padding

  • margin
    • 要素の外側の余白を設定する
  • padding
    • 要素の内側の余白を設定する

div span

  • divはblock
  • spanはinlineである
  • divを指定すると前後に改行が挿入される
  • spanは文字の装飾とかに使う

white-space

  • normal(デフォルト)
    • 改行、スペース、タブは１つの半角スペースと認識
    • 行の折り返しは自動でされる
  • nowrap
    • 改行、スペース、タブは１つの半角スペースと認識
    • 行の折り返しは自動でされない
  • pre-line
    • 改行は反映される
    • 行の折り返しは自動でされる
  • pre
    • スペース、タブも反映される
    • 行の折り返しは自動でされない
  • pre-wrap
    • スペース、タブも反映される
    • 行の折り返しは自動でされる

before after

  • ::before
    • 要素の直前に内容を追加
  • ::after
    • 要素の直後に内容を追加

overflow

  • visible(デフォルト)
    • はみ出た部分はそのまま表示
  • hidden
    • はみ出た部分が隠れる
  • scroll
    • はみ出た部分は隠れてスクロールできるようになる
  • auto
    • ブラウザによりけり

その他

  • style属性適用の優先度

    ⇒タグに近い方が優先されるが、!importantがついている場合はコレが最優先

  • sass or scssはコンパイルしてcssになるやつ
    簡単な計算とか分岐とかをかける
    継承とかもできるため、CSSをプログラム的に記述できる

  • グリッドも区画された感じで扱うことができる

  • スマホ対応のレスポンシブはJSではなくCSSでやる方が無駄なコーディングがなくて良いらしい

  • border-radiusはボックスの角を丸くできる

  • vertical-alignは縦方向の揃え位置を指定できる

  • コーディングする際はフレームワークの導入か、自作である程度フレームワークてきなものを作ってからやった方が保守性があがる

グリッドとか段組みについては後で勉強したら追記します。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T21:58:36+09:00

年末まで毎日webサイトを作り続ける大学生 〜25日目 画像の縦横比を最大限で保つ、画像の上にテキストを表示させる（中央配置）〜

はじめに

こんにちは！最近週末は温泉に通っている@70days_jsです！
webサイト制作でお金を稼ぐために年末まで毎日webサイトを作っております。
今日は画像を縦横比を保ったままなるべく大きくボックス内に表示させる、画像の上にテキストを表示させる、ということをしました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は25日目。(2019/11/12)
よろしくお願いします。

サイトURL

やったこと

今日やったことは大まかに分けると3つです。

  1. 画像の縦横比を保ったままボックス内で最大表示する（原寸サイズ以上にはならない）
  2. 画像を中央配置にする
  3. テキストを画像の上に被せ、かつ中央配置にする

とりあえずまずは実装を見てみましょう！↓
test.gif

というわけで実装自体はシンプルでメインは仕組みの理解です。今日は前々からやりたかったテキスト on 画像の仕組みが理解できたので嬉しいです。
それでは1から順に説明していきます。

1. 画像の縦横比を保ったままボックス内で最大表示する（原寸サイズ以上にはならない）

これはとてもシンプルです。

    max-width:100%;
    max-height:100%;

この二行を加えるだけで画像はボックス内で縦横比を保ったまま最大でいてくれます。
maxを100%にすることで、画像の縦か横のどちらかがボックス最大までリサイズしてくれるという寸法です。maxが100%なので、小さい分にはいくらでも縦横比を保ったままリサイズしてくれますが、原寸以上のサイズには対応しません。

2. 画像を中央配置にする

次。画像の中央配置ですが、これはflex boxを使うのが一番早いという結論になりました。

htmlがこうあってimgを中央配置したいのなら、

<body>
    <div id="image_wrapper">
        <img class="background_image" src="day24_image/photo4.jpg" alt="テントの画像">
        <h2 class="text_on_image">テント泊</h2>
    </div>
</body>

idがimage-wrapperのdivに

#image_wrapper {
    background-color: rgba(0, 0, 0, 1);
    width: 100vw;
    height: 100vh;
    /* 画像を真ん中に配置するためのflex */
    display: flex;
    justify-content: center;
    align-items: center;
}

とdisplayをflexにしてあげると解決です。
flexだったらimgの下にあるh2も反応するのではないかと思うかもしれませんが、後述しますがh2は画像の上に被せるためにpositionをabsoluteにするので全く問題ないです。
というわけで、子要素が一つしかなく、positionがabsoluteでもfixedでもない要素を中央配置したい場合、flex boxを使うのが一番楽です。
逆にいうと、要素を中央配置したい場合はこの条件にいかに当てはめるかという考え方もできると思いました。

3. テキストを画像の上に被せ、かつ中央配置にする

最後にテキスト on 画像について説明します。
テキストを画像に被せること自体はとても簡単です。

    /* 要素同士を被せるためにはabsoluteかfixedを使わないといけない */
    position: absolute;
    top: 値;
    left: 値;

positionをabsoluteにして、topやleftの値を画像の上に設定すれば解決です。
ですが、ここで困ったことが起こります。例えば画像が中央配置になっていて、テキストのpositionをtop,leftとも50%にしても中央にはなりません。
これは要素の端の部分が50%地点に置かれるためです。（残念ながら、要素の中央部分が50%地点ではないのです。。。）
と、ここでこの問題を解決するために、transformプロパティを使います。transformプロパティで行うことはtopやleftで行うことと同じです。
言葉では理解しづらいので図にしてみました。↓
スクリーンショット 2019-11-12 21.06.16.png

topやleftで指定しても要素の端がきて困るのなら、transformでも反対から位置を指定してやれば、両者の値が平均されて要素がちょうど真ん中にくるという仕組みです。

上の図は簡略化のため横方向のみを真ん中に置くだけですが、縦方向もtranslateYとtopを指定して真ん中にすれば、縦横両方とも真ん中なので中央配置が実現します。

cssの表記はこうなります。↓

.text_on_image {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    /* または
    bottom: 50%;
    right: 50%;
    transform: translateY(50%) translateX(50%); */
}

コメントでも書いていますが、top,leftを使わなくてもbottom,rightの指定でも可能です。その場合はtransformの値も要素がちょうど真ん中にくるよう書き換える必要があります。

感想

晩御飯を作る前に今日の分を作ろうと思ってたら、意外とハマって結局2時間も腹ペコのままコーディングする羽目になりました。特にテキストの中央配置が意外と時間を食いました。最初はなぜtop,leftだけで中央配置にならないのか疑問でしたが、「要素の端が指定した部分にくる」ということと、transformプロパティを知るとなるほどと思いました。でもこれ初見殺しだと思うので、いずれ直接要素を中央配置できるように改定されるんじゃないかな・・・。とはいえ、これだけ知っていればもうabsoluteと併用して自由自在に要素を配置できるので気分アゲアゲです。よし、晩御飯食べてきます！

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

  1. 【CSS】img画像の縦横比を保ったままボックス内に収める方法 | フリーランス ジャーナル(https://1design.jp/web-development/css/1844)
  2. CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法(https://naifix.com/relative-absolute/)

とても勉強になりました。ありがとうございます！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T21:09:09+09:00

初心者によるプログラミング学習ログ 158日目

100日チャレンジの158日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

158日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T19:29:35+09:00

canvas要素の描画を任意のタイミングで切り替えたい

はじめに

canvas要素を最前面に配置したかったが、アプリ起動時からcanvasを展開すると裏の要素の操作ができなくなってしまいます。
なお描画するエフェクト（紙吹雪）はjsdo.itにあったものを利用しました。
（現在は閉鎖されてしまっているようです）

環境

  • Mac OS X EL Capitan 10.14.5

解決策

紙吹雪を描画する関数内ではsetInterval関数が用いられおり、それによって継続的な動作が行われていました。以下が実際のコードです。

setInterval(draw, 20);

20msごとにdraw関数を呼び出す処理が行われています。この処理を止めるためには、setIntervalに対応するclearIntervalを用いました。

描画を停止することでcanvasを消し、下の要素への操作が可能になりました。

実装例

今回はアプリ内で任意の箇所をクリックした時に描画を停止できるよう、外部の関数として停止処理を実装しました。

var carryout;


function celebrate() {


  function draw{
/*
    描画処理は省略
*/
  }

//20msごとに描画繰り返し
    carryout = setInterval(draw, 20);


}

//呼び出された時にIntervalを破棄
function stopDraw() {
    clearInterval(carryout);
}

この関数をクリック時に呼び出すことで停止処理を実現することができた。

デモ

以下のように任意のタイミングでcanvasのオンオフを切り替えることができます。

canpas.gif

終わりに

他にも実装方法がありそうだと思ったが、Interval関数が使われている場合これが一番簡単に実装できそう。
止まり方が少し不自然かも？

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T18:58:11+09:00

[jQuery]コピペで簡単！ホームページによく使うアニメーション集

jQueryって何？

jQueryはJavaScriptで書かれたライブラリ（使用頻度の高い機能を持つプログラムをまとめたもの）です。
もちろんjQueryを利用せず、JavaScriptだけでプログラムを書くことも可能です。しかし、短いコードで簡単に機能を実装できるため、JavaScriptで何十行もコードを書かなければならないときも、jQueryを使えば数行で済むことがあります。

jQueryを読み込む方法

jQueryを使用する際には、まずダウンロードする必要があります。
[Download the compressed, production jQuery 3.4.1]をダウンロードすることをお勧めします。
以下のURLからダウンロードが可能です。
https://jquery.com/download/

HTMLファイルでjQueryを読み込む際には、ダウンロードしたjQueryを任意の場所(ここではjsディレクトリ)に保存して、そこから<head>内に読み込みます。

sample.html
<head>
<script src="/js/jquery-1.12.4.min.js"></script>
</head>

アニメーション一覧

以下にホームページ制作でよく使われるアニメーションの実装例を紹介します。
すべてシンプルな仕様であるのでぜひ実装して確かめてみてください。

１．ハンバーガーメニュー

実装結果
ドロワーナビはウインドウ上端に隠れていて、ボタンを押すと上端から出てくる仕様になっています。×ボタンを押すことでドロワーナビは閉じます。
以下にハンバーガーメニューの実装例を示します。

[ボタン押下前]
exe.png
[ボタン押下後]
exe_2.png

実装項目
・コンテンツとナビゲーションを用意
・ドロワーナビの表示設定
・jQueryで開閉を制御する

・コンテンツとナビゲーションを用意

最初に、コンテンツとナビゲーションを用意します。HTMLファイルにハンバーガーメニューを記述し、ドロワーナビが開いたときに表示されるリストを作成する。

sample.html
<!-- ハンバーガーメニュー -->
<div>
    <div class="navToggle text-white d-flex">
    <span></span><span></span><span></span><br>
    <a class="mt-4 pt-2">MENU</a>
</div>

<!-- ドロワーナビ -->
<nav class="globalMenuSp">
　　<!-- 以下にリンク先を記述する -->
    <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="food_menu.html">お品書き</a></li>
        <li><a href="drink_menu.html">お飲み物</a></li>
        <li><a href="party.html">ご宴会</a></li>
        <li><a href="positional_information.html">店舗情報</a></li>
    </ul>
</nav>
</div>

・ドロワーナビの表示設定

ハンバーガーボタンの位置や色についての設定を行います。
また、ハンバーガーボタンは、CSSによりXボタンに変化するようになっています。横並びになっている3本の線のうち、一番上の線と一番下の線が45度傾き、真ん中の線が消えることでXボタンになるように設定してあります。

sample.css
nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background: #fff;
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
}

nav.globalMenuSp ul {
    background: #ccc;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px dotted #333;
}

/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

nav.globalMenuSp ul li a {
    display: block;
    color: #000;
    padding: 1em 0;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}

.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 20px;
    top: 20px;
    width: 42px;
    height: 51px;
    cursor: pointer;
    z-index: 3;
    text-align: center;
}

.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}

.navToggle span:nth-child(1) {
    top: 9px;
}

.navToggle span:nth-child(2) {
    top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}


/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

・jQueryで開閉を制御する

最後にjQueryで開閉を制御します

sample.js
$(function() {
    $('.navToggle').click(function() {
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
        } else {
            $('.globalMenuSp').removeClass('active');
        }
    });
});

２．スライドショー

実装結果
一定間隔でスライドを繰り返すだけのシンプルなスライドショーが実装されます。
実装例としてスライドショーを用いているホームページを紹介します。
以下のURLから参照できるホームページ上部に配置されているものです。

参考：新大宮の焼き鳥は居酒屋「熟成鶏 とことこ」
(http://www.tokotoko-nara.com/)

実装項目
・初期表示imgに表示用クラス「showSlide」を付与
・スライドショーの見た目を整える
・スライド切替に関するスクリプトを書く

・初期表示imgに表示用クラス「showSlide」を付与

初期表示imgに表示用クラス「showSlide」を付与します。
本例では、画像を3枚使用する場合で考えています。

sample.html
<ul id="slideshow" class="slideshow">
  <li class="showSlide"><img src="https://myscreate.com/wp-content/uploads/2018/09/slide1.jpg"></li>
  <li><img src="https://myscreate.com/wp-content/uploads/2018/09/slide2.jpg"></li>
  <li><img src="https://myscreate.com/wp-content/uploads/2018/09/slide3.jpg"></li>
</ul>

・スライドショーの見た目を整える

スライドショーの配置場所や、大きさなどを設定します。

sample.css
.slideshow {
width: 50%; /* スライドショー幅（PC）*/
list-style-type: none;
position: relative;
}

.slideshow > li {
opacity: 0;
position: absolute;
transition: opacity 3s ease-in-out; /*フェード時間・イージング*/
}

.slideshow > li.showSlide{
opacity: 1;
}

.slideshow > li > img {
width : 100%;
height: auto;
}

/* スマートフォン用メディアクエリ */
@media screen and (max-width:600px){
.slideshow{
width: 100%; /* スライドショー幅（SP）*/
}
}

・スライド切替に関するスクリプトを書く

用意した画像がうまく切り替わるようにスクリプトを書きます。
また、数字を変えることで画像切り替えのタイミングを設定できます。

sample.js
$(function(){
  var imgs = $("#slideshow > li");
  var imgLen = imgs.length;
  var count = 0;
  function changeImg(){
    //スライド切替のポイント（配列を順番に処理し終わったら配列の先頭に戻る計算式）
    count = (count + 1) % imgLen; 
    imgs.removeClass("showSlide").eq(count).addClass("showSlide");
  }
  setInterval(changeImg, 5000); //切替の間隔（ミリ秒）
})

参考：コピペで簡単！超シンプルスライドショー［HTML / CSS / jQuery］
(https://myscreate.com/pure-slide/)

３．スクロール幅によりヌルっと出てくる「トップに戻る」ボタン

実装結果
スクロール幅に合わせてこのようなボタンがサイトの右下にヌルっと現れます。
pagetop.PNG

実装項目
・ボタンをマークアップ
・ボタンの見た目を整える
・スクロールとクリックに関するスクリプトを書く

・ボタン部分をマークアップ

ボタンをフッター近くに配置します。
文字の代わりに画像を使っても大丈夫です。

sample.html
<p id="page-top"><a href="#">PAGE TOP</a></p>

・ボタンの見た目を整える

ボタンは灰色にしていますが、ここにイラストやアイコンを配置して個性を出すのもアリですね。

sample.css
/*ボタンを固定する位置を決める*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
}

/*ボタンの色やサイズを設定する*/
#page-top a {
    display: block;
    background: #666;
    color: #fff;
    width: 100px;
    padding: 25px 0;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
}

/*マウスオーバーした際に色を変化させる*/
#page-top a:hover {
    background: #999;
    text-decoration: none;
}

・スクロールとクリックに関するスクリプト

jQueryで書いていきましょう。(※jQueryを忘れずに埋め込んでおいてください。)
まずボタンをマークアップしておいたidの#page-topを指定しておきます。
次にスクロールの処理ですが、最初にボタンは隠しておくので、topBtn.hide(); を先に書いておき、スクロールが500pxに達したらボタンを表示するような記述をします。
数字は変更可能で、表示させたい位置に指定できます。

sample.js
$(function () {
    var topBtn = $('#page-top');
    topBtn.hide();
    //スクロールが500に達したらボタンを表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スルスルっとスクロールでトップへもどる
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

クリックした時の処理をスクロールの処理の下に書いていきます。アニメーションでスルスルっとトップに戻る処理です。数字は戻る速さですので、お好みで変えることが可能です。

参考：[jQuery]スルスルっとトップへ戻るボタンを設置しよう
(http://pilgrim-guild.com/scroll-top_button/)

4．マウスオーバーで画像を切り替える

実装結果
画像にマウスを乗せたら違う画像に切り替わる。
（ボタンなどによく使用される。）

実装項目
・画像ファイルの作成
・サイトに画像を配置する
・jQueryで画像を切り替える

・画像ファイルの作成

まず、通常時に表示される画像（元画像）とマウスオーバー時に表示される画像（切替後の画像）の2種類を用意します。
※以下の説明では、ファイル名の末尾に元画像は_off、切替後の画像には_onを付けています。

元画像：images/hover_off.png
切り替え画像：images/hover_on.png

・サイトに画像を配置する

HTMLファイルに元画像のパスを指定します。

sample.html
<!--画像パスを指定-->
<img src="images/hover_off.png" alt="クリック！">

・jQueryで画像を切り替える

マウスを画像に乗せた場合とマウスを離した場合の2パターンの命令を記述します。

sample.js
$(function() {

  //画像にマウスを乗せたら発動
  $('img').hover(function() {

    //画像のsrc属性が別画像のパスに切り替わる
    $(this).attr('src', 'images/hover_on.png');

  //ここにはマウスを離したときの動作を記述
  }, function() {

    //画像のsrc属性を元の画像のパスに戻す
    $(this).attr('src', 'images/hover_off.png');

  });
});

参考：jQueryのhover()でマウスオーバーの処理
(https://www.flatflag.nir87.com/hover-1691)

おわりに

今回の記事は、webサイト作成のための備忘録です。他にもwebサイト作成に関わる知識があれば教えてもらえると嬉しいです！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T18:00:13+09:00

ホームボタンがスクロールしてもついてくるように。

【結論】 position: fixed;

縦長のページで、下にスクロールしてもヘッダーやボタンなどを追従させたい時。

例）

index.scss
.home_button {
  position: fixed;
  top: 10px;
  right: 10px;
  略
}

これだけで勝手に追従してくれます。
top,right,left,bottomで固定させたい位置を指定できます。
今回の例ではホームボタンを左上に固定させました。



CSSだけで簡単に実装できるので非常に便利です！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T17:42:58+09:00

CSSセレクタの詳細度 (優先順位)

CSSセレクタの詳細度とは

ある要素へのCSSの指定が競合した場合、どのセレクタが優先されるかということ。

CSSセレクタの優先順位 (強さ順)

  1. HTMLのstyle属性
  2. id
  3. class、擬似クラス、属性
  4. 要素型、擬似要素

⚠️ 同じ優先順位の場合は後に書いたCSSが優先される。

例

<body>
  <div class="red">
    <h1>あああ</h1>
  </div>
</body>

.red {
  color: red;
}
div {
  color: black;
}

スクリーンショット 2019-11-12 17.38.46.png

classの方が要素型よりも強いので文字がredになる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T16:15:22+09:00

HTML＆CSSまとめ

簡単なHTMLは知っているけど、実際のテンプレートファイルとかを見るとよくわからなくなる人向けの記事です。HTMLとCSSの最低限の知識をつけるのが目標で、自分の勉強も兼ねてまとめています。

詳細なHTMLの仕様説明が欲しい方はそれ専用のサイトをご覧ください。この記事を書くにあたって参考にさせてもらっています。

http://www.htmq.com/html5/br.shtml
http://www.tohoho-web.com/html/index.htm

この記事では、テンプレとかでよく見るけどいまいちよく分からないタグに話を絞って書きます。正直こういう記事を見るよりも自分で書いて動かすのがいちばん覚えるので、ぜひ一緒にどうぞ。最初に自分が作ったhtmlファイルの確認の仕方を説明します。

HTMLファイルの見方

まずは好きなところにexample.htmlというファイルを作ってください。中身はhelloとか適当な文字列を書いておきましょう。これをブラウザ（SafariでもChromeとか）で開きます。入れるのは以下。

file:///(htmlファイルまでのパス)/example.html

デスクトップにexample.htmlを作った田中さんとかなら
file:///User/tanaka/Desktop/example.html
みたいな感じです。（ここら辺は正直適当）

スクリーンショット 2019-06-19 18.48.45.png

これでそのブラウザで開くとhelloという文字列が表示されているはずです。エラーが出るときは基本的にパスが間違っているはずなので、よく見直してください。

スクリーンショット 2019-06-19 18.54.18.png

↑こんな感じのシンプルな表示。表示ができたら、あとは適当にいろんなタグを試しましょう。

HTMLタグ

まずは用語の説明。タグ内で指定するものを属性という。
属性の例としては、<img>タグのsrc属性。これは写真を表示するファイルを示す。

例　<img src="example.png">

属性の中には、ほとんどのタグが持つグローバル属性というものもあり、id属性とかstyle属性とかがある。（これについては後述）

ここから、テンプレートとかでよく見るけど、意味がわかりづらいHTMLタグを中心に紹介します。

<meta>

その文章のメタ(meta)情報を示すもの。charset属性は文字エンコーディングの指定。name属性とcontent属性では、セットでその文章の説明を入れます。例えばnameが"auther"ならcontentには著者名を入れる、nameが"keywords"ならcontentにその文章を説明したキーワードを入れる、という感じ。他にもnameとcontentの組み合わせはあるがここでは省略。あとはhttp-equiv属性もある。

コード例
<meta charset="Shift_JIS">
<meta name="author" content="tanaka">

<h1>

見出し(heading)。h1からh6まであって数字が小さいほど大きい。h7は存在しないので、無視されて普通の文字サイズになる。

コード例

<meta charset="utf-8">   ←文字化けする人はこれを入れる
<h1>h1 あいうえお</h1>
<h2>h2 あいうえお</h2>
<h3>h3 あいうえお</h3>
<h4>h4 あいうえお</h4>
<h5>h5 あいうえお</h5>
<h6>h6 あいうえお</h6>
<h7>h7 あいうえお</h7>

表示例
スクリーンショット 2019-06-19 17.30.28.png

<br>

改行(break)を表す。htmlファイル上の改行は反映されないことに注意(下の例だと、aiueoと123の間にコード上では改行が入っているが、表示では改行されていない)。

コード例 

aiueo
123
<br>
hello

表示例
スクリーンショット 2019-06-19 19.05.44.png

<ul>

順序のないリスト(unsorted list)を表す。<li>で要素を示す。ちなみに順序のあるリスト(ordered list)は<ol>を使う。使い方はほぼ一緒。

コード例

<meta charset="utf-8">  ←文字化けする人はこれを入れる
<ul>
  <li>みかん
  <li>りんご
</ul>

表示例
スクリーンショット 2019-06-19 19.35.31.png

一旦タグの紹介を止めて、CSSについて説明します。

CSSについて

簡単にいうと、その文章のレイアウトや見栄えをよくするコンピュータ言語。文章の見栄えをよくするための言語をスタイルシート言語（スタイリング言語）というが、CSSはその中で代表的な言語の一つ。

HTMLでCSSを使う方法にはいくつか種類がある。代表的なのは<style>タグを用いる方法。

<style>

スタイルシートを記述するのに使う。

コード例

<style>
h5 { color:red }
</style>

<h4>h4 あいうえお</h4>
<h5>h5 あいうえお</h5>
<h6>h6 あいうえお</h6>

このように<style>タグで囲まれた中にスタイルシート言語を書く。今回の例はh5 { color:red }の行がCSSで書かれていて、文章内の<h5>タグは赤色にするという意味。

表示例
スクリーンショット 2019-06-20 9.20.10.png

<h5>の部分だけ赤くなっているのがわかる。

次にスタイルシートを記述する方法として、タグの中に埋め込むという方法がある。

<div>

区分(division)。style属性を用いて、このタグで囲まれた範囲のページレイアウトやスタイルを指定する。

コード例
<div style=" background-color:black; color:white;">あいうえお</div>

表示例
スクリーンショット 2019-06-20 9.32.50.png

また多くのタグは、idやclassという属性（グローバル属性）を持っている。これらはそのタグを名前づけており、これをCSSで指定してスタイリングすることが可能。

コード例

<style>
#id1 { color:red }
.class1 { background-color:black; color:white; }
</style>

<div id="id1">あいうえお</div>
<div id="id2">かきくけこ</div>
<div class="class1">さしすせそ</div>
<div class="class2">たちつてと</div>

表示例
スクリーンショット 2019-06-20 10.15.08.png

style内で、id名を使うときは#をclass名を使うときは.を使用していることに注意（#id1と.class1）。この例ではid1というidを持つものや、class1というclass名を持つものだけにCSSが適用されている。

<p>

段落(pragraph)を表す。<p>から</p>で囲まれた部分を一つの段落とみなす。これもstyle属性を持つのでその段落だけにスタイルを適用することが可能だし、id属性やclass属性なども持つ。

コード例

<style>
p.class1 { background-color:black; color:white; }
</style>

<p class="class1">あいうえお</p>
<div class="class1">かきくけこ</div>

表示例
スクリーンショット 2019-06-20 10.46.43.png

CSSの指定方法として、タグ名.クラス名(コード上ではp.class1)という指定の仕方も可能で、これにより同じクラス名前でもタグによって指定を変えることが可能。

<link>

文章に関連するリンク(link)を示す。rel属性にその文章の関係を示し、href属性にその文章のリンクをおく。例えば、rel="icon"ならhrefにアイコンの写真ファイルを置いたり、rel="stylesheet"ならhrefにその文章に適用したいCSSファイルを置いたりなど。

コード例
<link rel="icon" href="example.ico">
<link rel="stylesheet" href="example.css">

<a>

リンクを貼る。anchor（アンカー：船を繫ぎ止めるやつ）の略です。

コード例
<a href="index.html">目次に戻る</a>

表示例
スクリーンショット 2019-06-20 11.28.25.png

<script>

JavaScriptなどのスクリプトやデータブロックを組み込むのに使う。type属性にはスクリプト言語やデータ形式を指定する。デフォルトはtype="text/javascript"で、JavaScriptを使う際は省略可能。src属性でスクリプトファイルを指定。

コード例　<script src="./sample.js"></script>

JavaScriptなんかでは、例えばクリックしたら動作するもの（投票ボタンを押して、投票結果が出てくるアプリとか）が作れます。これをjsファイルで作ってこのタグで記述することで、ホームページ上にそのアプリを埋め込むことが可能になります。

まだまだタグはありますが、とりあえずはここまで。時間があればまた追記します。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T14:51:12+09:00

padding によるレイアウトの崩れ

問題点

要素の幅を100%に設定している時に、その要素にpaddingを設定してしまうと、要素の幅の合計が100%を超えてしまいレイアウトが崩れてしまう。

改善策

* {
  box-sizing: border-box;
}

全ての要素に対してbox-sizing: border-box;を適用し、要素の幅の合計(width)にpadding,borderを含めるようにすることでレイアウトの崩れを防ぎ、この問題を解決することができる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T14:36:12+09:00

Reactで画像の遅延ロードするためのコンポーネント

ReactでHooksとIntersection Observer API使って、プレースホルダー付きで画像の遅延読み込みするコンポーネントをだいぶ前に作った時のメモ。

使い方
<LazyImage src="https://your-image-url" />

import React, { useState, useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
require('intersection-observer') // intersection-observer api polyfill

const Img = styled.img`
  transition: all 1s ease-in-out;

  @keyframes placeHolder {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }

  ${props => props.imageLoaded
    || props.noPlaceholder
    || `
    animation-name: placeHolder;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dfdfdf 20%, #eeeeee 33%);
    background-size: 800px 104px;
    filter: blur(5px);
    position: relative;
  `}
`

function LazyImage({ src, ...props }) {
  const imageRef = useRef()
  const [imageLoaded, setImageLoaded] = useState(false)

  let observer

  useEffect(() => {
    observer = new IntersectionObserver(startLoading, { rootMargin: '50px' })
    if (!imageLoaded) {
      observer.observe(imageRef.current)
    }
    return () => observer.unobserve(imageRef.current)
  }, [])

  function startLoading(entries, object) {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return

      if (entry.intersectionRatio > 0) {
        observer.unobserve(entry.target)
      }

      if (!imageLoaded) {
        const downloadingImage = new Image()
        downloadingImage.onload = () => {
          if (imageRef.current) {
            imageRef.current.setAttribute('src', downloadingImage.src)
            setImageLoaded(true)
          }
        }

        downloadingImage.src = src
        object.unobserve(entry.target)
      }

      object.unobserve(entry.target)
    })
  }

  return (
    <Img
      {...props}
      alt="GOOD BOYE"
      ref={imageRef}
      imageLoaded={imageLoaded}
    />
  )
}

LazyImage.propTypes = {
  src: PropTypes.string,
  noPlaceholder: PropTypes.bool,
}

LazyImage.defaultProps = {
  src: '',
  noPlaceholder: false,
}

export default LazyImage
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T14:18:20+09:00

受託開発サイト作成の反省

テンプレートをいじって簡単なサイトを作成しようとしたけど、表示ズレがひどくなってしまったのでとりあえずの反省

  • まずは要素を動かさずに文字だけ書いてしまう。要素いじらない。
  • エディタでいちいち手直しするのではなく、検証ツールで変更してみて正解が出たらそれをエディタ上に採用するとミスも少なくなるし、楽。
  • 最初のテンプレートがbootstrapが採用されているので、少し要素をいじるといろんなところの要素が同時に崩れてしまうことが多かったので、大きいブロックごとの枠組みを把握しておく必要がある。

要素のどこにプロパティを指定したらいいか問題

  • 例えば画像のリサイズするときは画像の要素をdivで囲む必要があるとか。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T13:51:30+09:00

Lazy Loadとは

How Lazy Loading can Optimize Your Shopify Theme Images(Lazy loadingはいかにShopifyテーマの画像を最適化するかの意訳・まとめです。

Lazy Loadとは

そのオブジェクトが必要になるまで、オブジェクトの初期化を遅延する技術。
多くの場合、Webサイト上の画像の遅延読み込みをする技術。

Lazy Loadを利用するメリット

ユーザーは、サイトが実際よりも早く読み込まれていると感じる。

Lazy Loadの仕組み

大量の画像の読み込みが必要なサイトがあるとする。

デフォルトでは、ユーザーがWebサイトの1番上だけを見ているかどうかに関わらず、ページ上の全ての画像がフルサイズで読み込まれる。
ユーザーに見られることのない画像もあるため、全ての画像を読み込む必要はない。

商品ページに行く前に、最初の10商品だけを見たい場合、50商品それぞれの商品ページを読み込むならば、かなり時間がかかる。
ユーザーは最初の数商品だけに興味があるので、それだけの時間は無駄となる。

Lazy loadingは上記とは異なるアプローチであり、ほとんど全てのモダンWebサイトで用いられているアプローチである。

Lazy loadingを利用する最も普遍的な方法の一つは、プレースホルダーとして低画質の画像を表示することである。
ページは画像サイズが小さくなるおかげで、ずっと早く読み込まれる。

ユーザーがスクロールすると、画像は高画質に置き換わる。

さらに全てのプロセスは、ユーザーがその画像を見ていて、高画質の画像を表示する必要がある時のみ起こる。

Lazy Loadingのライブラリ

Lazy Loadingを利用するには様々なライブラリがある。(スクラッチからコードのロジックを作る必要がない)

Shopifyのディベロパーツールのスターターテーマは、

  • responsive-image.liquid
  • responsive-bg-image.liquid

という２つのスニペットを含んでいる。(snippetsフォルダにある）。これらはlazy loadingを始めるのに必要なもの全てを含む。

上記2つのスニペットが動作するには、3つのdependenciesが必要となる。多くのライブラリが利用できるが、ShopifyスターターテーマではLazysizes、Responsive image as a Services、BGSetを利用している。

これらのライブラリは、 theme.liquid ファイルの <head></head> タグの間に、次のコードを追加することで読み込むことができる。

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'ls.rias.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'ls.bgset.min.js' | asset_url }}" async="async"></script>

responsive.image.liquid のスニペットはすでに collection.liquid ファイルにあり、下記のように書かれている。

collection.liquid
{% include 'responsive-image' with
  image: product.featured_image,
  max_width: 700,
  max_height: 800
%}

この例は拡張することができ、画像とそのラッパーにいくつかのカスタムCSSクラスを渡すこともできる。

次の例を考えてみましょう。

lazyloading-products-loop.liquid
{% for product in collection.products %}
  {% include 'responsive-image' with
    image: product.featured_image,
    image_class: "image",
    wrapper_class: "image-wrapper",
    max_width: 700,
    max_height: 800 %}
{% endfor %}

前の例との違いは、CSSのクラスを追加することで、ページのレイアウトを操作することができるようになっていることである。
例えば下記のようなCSSを使うことができる。

lazyloading-classes.css
.image {
  display: block;
  margin: 0 auto;
  with: 100%;
}

.grid-view-item__image-wrapper .image {
  position: absolute;
  top: 0;
}

.image.lazyload {
  opacity: 0;
}

.image-wrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

responsive-image.liquidファイル、特に img タグとそのパラメータがどのように作用するか、もう少し見てみましょう。

lazyloading-responsive-image.liquid
<img id="Image-{{ image.id }}--{{ responsive_image_counter }}"
  class="responsive-image__image lazyload {{ image_class }}"
  src="{{ image | img_url: '300x' }}"
  data-src="{{ img_url }}"
  data-widths="[{{ image_widths }}]"
  data-aspectratio="{{ image.aspect_ratio }}"
  data-sizes="auto"
  tabindex="-1"
  alt="{{ image.alt | espcape }}"
  {{ image_attributes }}
>

src 属性はプレースホルダーとする画像を特定しています。
この画像は、元の画像が読み込まれているときに、ユーザーに表示されるものとなります。
data-src 属性は元の、フルサイズ画像と呼ばれるものです。
src パラメータ内の img_url フィルターを修正することで、プレースホルダー画像のサイズを変更することができます。
デフォルトの値は300xですが、これは一時的に表示される画像が300pxの解像度を持つという意味です。

src="{{ image | img_url: '300x' }}"

数が小さくなればなるほど、画像ファイルは小さく(軽く)なりますが、一層ぼやけて表示されます。
速度の提供と良いユーザー体験の維持の間にはバランスがあります。
次のセクションではそれについてアイデアとストラテジーを見ていきます。

lazy loadをデザインする

ぼやけた画像を見ることは、それがたとえ数秒でも、顧客にとって良くない体験になり得ます。
顧客はアセットがアップロードされた方法に関して何か間違えがあったのか、または圧縮が強すぎたのか、と考えてしまうかもしれません。

さらに、顧客の信頼を掴むより重要な側面の一つは、ショップのブランドに一層関わっている良いデザインを持つことです。
不完全な(オンライン)ショップに立ち寄ることは顧客がそのショップを去ってしまう決定的な要因となるかもしれません。

これらの状況は滅多にありませんが、考慮する価値があります。ショップのブランディングとスタイルを促進するユニークな体験を提供し、顧客のリテンションに集中することができるからです。
顧客の損失を避けるいくつかのアプローチを見てみましょう。

ドミナントカラーの使用

マニュエルウィーザーによる興味深いアプローチは画像が読み込まれている時、その画像のドミナントカラーを表示することです。これを達成するプロセスは実際にかなりシンプルでエレガントです。

responsive-image スニペットで見たように、開発者は src 属性に読み込まれる画像のサイズをセットすることができます。デフォルトでは、300pxの画像を表示する300xです。

その値を300xから1xに変更することによって、画像のドミナントカラーを描画するだけの小さなサイズの画像を表示します。さらにこの利点は読み込む画像がとても小さいので、ほぼ即座に読み込むことができることです。

これは鮮明な色の商品を持つショップにとって最適です。絵画や写真を売るショップは、特にこの技術を使うメリットが得られます。

ぼかしの使用

もう一つのアプローチは魅力的なぼかし効果の当てられた画像を使用することです。これは Blur-Up と呼ばれるLazysizesプラグインを使用することでとても簡単に実行できます。

この方法を実行するために、 theme.liquid 内のスクリプトを最初に呼ぶ必要があります。
前に追加されている他のスクリプトの下に、直ちに追加することができます。

theme.liquid
<script src="{{ 'ls.blur-up.min.js' | asset_url }}" async="async"></script>

次に responsive-image.liquid クラス内のスニペットに blur-up クラスを追加します。

responsive-image.liquid
<img id="Image-{{ image.id }}-{{ responsive_image_counter }}"
  class="blur-up responsive-image__image lazyload {{ image_class }}"
  src="{{ image | img_url: '30x' }}"

これはぼかし効果を使ったCSSコードの例です。

lazyloading-blur-effect.css
.blur-up {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}

この技術を利用することで、スタイリッシュで視覚に訴えつつ、とても小さなサイズの画像を利用することができます。

また、上記二つの技術両方の利用、クラス内に blur-up を置き、 img_url パラメータを1xにセットすることで、ぼかし効果を持つソリッドカラーのプレースホルダーを使用することができます。このぼかしは画像にソフトタッチを加え、結果としてそれほど粗くないプレースホルダー画像になります。

異なるlazy loadのアプローチを使用することで、顧客のブランドに一貫性を持つ、計算された決定を下すことができます。

その他のオプション

そのほかにも様々なlazy loadの技術があります。例えば、スニペットの src 内にはどんなURLを渡すこともできます。読み込み中の時に、回転する歯車のGIF、ショップのロゴを読み込むことができるということです。
オプションは無限にあります。全てはスニペット内の src 属性を変更するだけです。

src="link_to_your_image.gif"

さらに、、

ショップの読み込み速度を向上する技術に関して言えば、ショップを奇妙に見せる必要がないということを思い起こさせることは有益です。ユーザーは裏で起きていることに全く心配していませんし、サイトが早く読み込まれていることにすら気づきません。しかし、それが遅すぎる時には気づいてしまうのです。

この記事ではSlateテーマでのlazy loadingの仕組みについて注目しました。普遍的にlazy loadingについてもっと学びたいならば、 CSS Tricks の The Complete Guide to Lazy Loading Imagesをおすすめします。こちらでは、様々な技術やライブラリの詳細について見流ことができます。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T13:16:30+09:00

HTML/CSS 基本の復習

ポイントポイント自分に必要なとこだけをただただ書き出し。

ブロックレベル要素とインライン要素

ブロックレベル要素は並べると、改行される。
インライン要素は並べると、改行されない。
しょっちゅう出てくる<div>はブロックレベル要素

曖昧なイメージで、ブロックライン要素はhtml作成に必ず必要な分。
インライン要素は必ずしも必要でないが、見た目を整えるのに寄与している。

セレクタとプロパティと値

cssの書き方

セレクタ {
   プロパティ : 値 ;
}

class

class1.html
<p class="class1">class1</p>
class1.css
.class1{
  color: red;
}

id

id.html
<p id=id1>id1</p>
id1.css
#id1{
  color: red
}

classの方が一般的なので、とりあえずclass使っておけばOK

リセットCSS

ブラウザ毎の変化を抑えるために必要。

float

要素を指定位置表示。

clearfix

floatの副作用を解決。

clearfix.html
<div class="aaa clearfix"></div>
clearfix.css
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

リスト

ul 順序なしリスト
ol 順序ありリスト
li リスト中のブロック
list-style: none; 先頭の記号消し

表

table 一番外
th 見出し
tr 横定義
td ブロック

GUI

form 操作フォーム
input 入力フォーム
textarea 広い入力フォーム
placeholder 仮表示文字列
label 見出し

Flexbox(floatと同じ)

justify-content: *; 横並びのしかた
align-items: *; 縦並びのしかた

ブロック配置位置

position: absolute; 要素の絶体位置指定
position: relative; 要素の絶体位置基準

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T13:07:20+09:00

少ないコンテンツでもフッターはスクリーンの一番下に表示する簡単なやり方CSS Flex

Demo

HTML
<body class="Site">
  <header class="Site-header">ヘッダー</header>
  <main class="Site-content">少ない中身</main>
  <footer class="Site-footer">Footer</footer>
</body>
CSS
.Site {
  display: flex;
  min-height: 100vh;  /*ビューポートの高さに対する割合100*/
  flex-direction: column;
}

.Site-header,
.Site-footer {
  flex: none; 
  background-color: #99cc00;
}

.Site-content {
  flex: 1 0 auto;  /*flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; shrinkしないように*/
  padding: var(--space) var(--space) 0;
  width: 100%;
  background-color: #666666;
}
.Site-content::after {
  content: '\00a0'; /* &nbsp; */
  display: block;
  margin-top: var(--space);
  height: 0px;
  visibility: hidden;
}
@media (--break-lg) {
  .Site-content {
    padding-top: var(--space-lg);
  }
  .Site-content::after {
    margin-top: var(--space-lg);
  }
}

.Site-content--full {
  padding: 0;
}
.Site-content--full::after {
  content: none;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T01:49:03+09:00

IE11でpointer-events: none;が効かない

pointer-events: none;が効かない。Edge + a要素 + display:inline;の組み合わせは要注意。

「pointer-events: none;」がIEで効かない時

その要素にdisplay:blockとかdisplay:flexとかdisplay:inline-blockをかけてあげれば解決する。

とりあえずdisplay:inlineだとだめ。

今回自分でやっていてバグが発生した箇所はaタグに対してだったので、デフォルトがdisplay:inlineだった。

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

日付別

タグ一覧