What's New Qiita

20210103のCSSに関する記事は12件です。

  • 投稿日：2021-01-03T22:00:47+09:00

【フロントエンド学習②】インライン要素とブロックレベル要素

HTMLタグの種類について

bodyタグ内で使用するHTMLタグには、
大きく分けて「インライン要素」と「ブロックレベル要素」がある。

インライン要素の特徴

  • 自動で改行されない（ヨコに並ぶ）
  • 横幅・縦幅を指定ができない
  • 中央揃え（右寄せ）の時は、親要素に「text-align: center(right);」を記述する

ブロックレベル要素の特徴

  • 自動で改行される（タテに並ぶ）
  • 横幅・縦幅の指定ができる
  • 中央揃えの時は、自身に「margin: 0 auto;」を記述する

デモ

See the Pen YzGaWYK by 転職活動中の なーちゃん@Webエンジニアに転職2020 (@tanakatarou590) on CodePen.

おまけ（初めて見るタグの判別方法）

index.html
<span>あいうえお</span>
<span>かきくけこ</span>
<span>たちつてと</span>

上記のように記述して、ブラウザで表示してみる(文章はなんでもOK)

  • 改行される→ブロックレベル要素
  • 改行されない→インライン要素

ちなみにspanタグはインライン要素なので、改行されません。

おわり

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T19:54:49+09:00

CSSで「net::ERR_FILE_NOT_FOUND」エラー

HTML.CSS勉強時のエラー履歴として記載します。

[トラブル内容]
HTML/CSSの復習中にHTMLへCSSが一切反映されないエラーが発生しました。
スクリーンショット 2021-01-03 16.51.47.png

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>入会申し込み</title>

  <link rel="stylesheet" href="css/sanitize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="content">
    <h1>入会申し込み</h1>
    <p>入会するには、次の入会フィームに必要事項をご記入ください</p>
    <p>メールアドレス：<input type="email" name="mymail"> </p>
    <p>パスワード：<input type="password" name="password"> </p>
    <button type="submit">送信</button>
  </div>
</body>

</html>
style.css
h1 {
  font-size: 24px;
  margin: 0;
}

p {
  font-size: 14px;
}

.content {
  background-color: #fcc;
  width: 600px;
}

●対応
デベロッパーツールにて、エラー内容の確認
GET index.html:8op/sample.01/step.04/css/
net::ERR_FILE_NOT_FOUND

どうやら、step.04内cssファイルを探しているのが原因のようでした。
変更前
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">

変更後
<link rel="stylesheet" href="../css/sanitize.css">
<link rel="stylesheet" href="../css/style.css">

変更後、HTMLファイルにCSSが反映されました。

途中の対応方法や他の要因解析については下記サイトを参考にしました。
https://www.sejuku.net/blog/100015

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T19:54:49+09:00

HTML.CSSで「net::ERR_FILE_NOT_FOUND」エラー

HTML.CSS勉強時のエラー履歴として記載します。

[トラブル内容]
HTML/CSSの復習中にHTMLへCSSが一切反映されないエラーが発生しました。
スクリーンショット 2021-01-03 16.51.47.png

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>入会申し込み</title>

  <link rel="stylesheet" href="css/sanitize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="content">
    <h1>入会申し込み</h1>
    <p>入会するには、次の入会フィームに必要事項をご記入ください</p>
    <p>メールアドレス：<input type="email" name="mymail"> </p>
    <p>パスワード：<input type="password" name="password"> </p>
    <button type="submit">送信</button>
  </div>
</body>

</html>
style.css
h1 {
  font-size: 24px;
  margin: 0;
}

p {
  font-size: 14px;
}

.content {
  background-color: #fcc;
  width: 600px;
}

●対応
デベロッパーツールにて、エラー内容の確認
GET index.html:8op/sample.01/step.04/css/
net::ERR_FILE_NOT_FOUND

どうやら、step.04内cssファイルを探しているのが原因のようでした。
変更前
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">

変更後
<link rel="stylesheet" href="../css/sanitize.css">
<link rel="stylesheet" href="../css/style.css">

変更後、HTMLファイルにCSSが反映されました。

途中の対応方法や他の要因解析については下記サイトを参考にしました。
https://www.sejuku.net/blog/100015

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T18:52:51+09:00

ポートフォリオサイトでの画像を少し面白く

おひさしぶりです。
最近、WEBエンジニアとして企業にインターンしていて調子がいいAkizukiAkiです。

本日は、自分のポートフォリオサイトを少し面白くするための、特に自分の画像（プロフィール画像）を面白くするためのCSSアニメーションについて紹介・解説していきたいと思います。

しかも、駆け出しの方がコピペで簡単に実装できるアニメーションです。

ちなみに、成功すると以下のような効果ができます。

Videotogif.gif

ソース

まずもう、ソースコードを貼り付けておきます。ですので、せっかちな方は貼り付けて後で解説を見てください。

sample.css
.icon {
    animation: SlideIn 1.6s;
}

@keyframes SlideIn {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

iconのクラスはimgタグにそのままつけて構いません。
↓

<img src="../img/example.com" class="icon">

解説（前提）

まず、

sample.css
.icon {
    animation: SlideIn 1.6s;
}

でhtmlのiconタグにSlideInというアニメーションを1.6秒間行うということを指定しています。

sample.css
@keyframes SlideIn {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

その後、@keyframesで、アニメーションの流れに合ったキーフレームや中間地点のスタイルを定義します。
簡単に言ったら、流れを制御するための規則ということを表しているということですね。

fromというのは開始地点を指します。0%でも問題なく動作します。
toというのは終了地点を指します。100%でも問題なく動作します。
50%というのは、中間地点のことですね。

もう一度このGIFを確認してください。

Videotogif.gif

この三つの動作を説明すると、

from→開始地点は中心より左に位置する。
50%→中心より少し右にずれる。
to→中心に位置する。

ということになります。

解説（transformに着目）

コードのtransformというプロパティに着目してみましょう。

sample.css
@keyframes SlideIn {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

fromの時点で、translateXがマイナスになっていますね。これは、fromの時点で中心=X座標0pxよりも開始地点のX座標が-250pxということを指しています。

50%の時点で、translateXが0pxを超えていますね。これは、50%の時点で中心=X座標0pxよりも開始地点のX座標が100pxプラスということを指しています。

toの時点で、translateXが0pxになっていますね。これは、toの時点で中心=X座標0pxと同じ座標に位置するということを指しています。

解説（opacityに着目）

今まで、transformというプロパティに着目してきました。
次にopacityというプロパティに着目していきたいと思います。

そもそも、opacityというプロパティは透明度を表します。

勘の良い方はわかったかもしれませんが、簡単に言ったら透明度を操作することで単なるスライドインというだけでなく、フェードを加えたスライドインにするということができます。

sample.css
@keyframes SlideIn {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

opacityのプロパティは0.0（真っ白）～1.0（普通）まで指定できます。
ですのでこちらを駆使して綺麗にフェードを含めたスライドインを実装することができます。

以上でこの記事は終わります。
質問等あればお気軽にどうぞ！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T18:52:51+09:00

【初心者向け】ポートフォリオサイトでの画像を少し面白く

おひさしぶりです。
最近、WEBエンジニアとして企業にインターンしていて調子がいいAkizukiAkiです。

本日は、自分のポートフォリオサイトを少し面白くするための、特に自分の画像（プロフィール画像）を面白くするためのCSSアニメーションについて紹介・解説していきたいと思います。

しかも、駆け出しの方がコピペで簡単に実装できるアニメーションです。

ちなみに、成功すると以下のような効果ができます。

Videotogif.gif

ソース

まずもう、ソースコードを貼り付けておきます。ですので、せっかちな方は貼り付けて後で解説を見てください。

sample.css
.icon {
    animation: SlideIn 1.6s;
}

@keyframes SlideIn {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

iconのクラスはimgタグにそのままつけて構いません。
↓

<img src="../img/example.com" class="icon">

解説（前提）

まず、

sample.css
.icon {
    animation: SlideIn 1.6s;
}

でhtmlのiconタグにSlideInというアニメーションを1.6秒間行うということを指定しています。

sample.css
@keyframes SlideIn {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

その後、@keyframesで、アニメーションの流れに合ったキーフレームや中間地点のスタイルを定義します。
簡単に言ったら、流れを制御するための規則ということを表しているということですね。

fromというのは開始地点を指します。0%でも問題なく動作します。
toというのは終了地点を指します。100%でも問題なく動作します。
50%というのは、中間地点のことですね。

もう一度このGIFを確認してください。

Videotogif.gif

この三つの動作を説明すると、

from→開始地点は中心より左に位置する。
50%→中心より少し右にずれる。
to→中心に位置する。

ということになります。

解説（transformに着目）

コードのtransformというプロパティに着目してみましょう。

sample.css
@keyframes SlideIn {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

fromの時点で、translateXがマイナスになっていますね。これは、fromの時点で中心=X座標0pxよりも開始地点のX座標が-250pxということを指しています。

50%の時点で、translateXが0pxを超えていますね。これは、50%の時点で中心=X座標0pxよりも開始地点のX座標が100pxプラスということを指しています。

toの時点で、translateXが0pxになっていますね。これは、toの時点で中心=X座標0pxと同じ座標に位置するということを指しています。

解説（opacityに着目）

今まで、transformというプロパティに着目してきました。
次にopacityというプロパティに着目していきたいと思います。

そもそも、opacityというプロパティは透明度を表します。

勘の良い方はわかったかもしれませんが、簡単に言ったら透明度を操作することで単なるスライドインというだけでなく、フェードを加えたスライドインにするということができます。

sample.css
@keyframes SlideIn {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

opacityのプロパティは0.0（真っ白）～1.0（普通）まで指定できます。
ですのでこちらを駆使して綺麗にフェードを含めたスライドインを実装することができます。

以上でこの記事は終わります。
質問等あればお気軽にどうぞ！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T18:18:24+09:00

【CSS】個人メモ

はじめに

本記事は、CSSの個人的なメモです。
間違い等ございましたらご指摘お願い致します。

セレクタ

セレクタとは

「CSSによるデザイン指定をどこの部分に対して適用するか」を決めるもの

参考になったYoutubeの動画を置いておきます
https://youtu.be/eZlCdp-Iht4

ボックスモデル

  • margin：要素の外側の余白
  • border：要素の枠線
  • padding：要素の内側の余白
  • content box（width：幅・height：高さ）

box-sizing

  • ボックスのサイズを直感的に扱うためのプロパティ
  • box-sizing: border-box;で指定すると、content boxで指定した値がボックス全体の大きさになる。しかし、その分widthやheightの値は小さくなる

「 outline 」と「 border 」の違い

  • outlineは横幅などに計算されない
  • borderだと、レイアウトとして認識されるため、レイアウトに崩れが生じてしまう
  • また、「 outline 」は線と線を重ねてくれるため変な余白すらもない

ショートハンド

  • 例：margin: 100px 0 50px 100px;
  • 指定方向：top right bottom left

レスポンシブデザイン

  • heightは特に意識しなくてもOK（無指定でautoになる）
  • 意識するのはwidth

metaタグの記述

これ以外にもプロパティはあるが、基本的には下記だけでOK

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

メディアクエリーの記述

@media (条件) {
    /**適用したいスタイル**/
}

mediaType（メディアタイプ）とは

※主に以下3つを使用する機会が多いが、allやscreenは省略できるため、開発者は基本的にprintを使用するとき以外はメディアタイプを意識する必要はない

  • all：すべて
  • screen：画面のあるもの
  • print：印刷するもの

論理演算子（メジャーなものだけを紹介）

  • and（意味：かつ）
  • ,（意味：または）

メディア特性（メジャーなものだけを紹介）

  • max-width（大抵の場合は”デスクトップファースト”で使用）
  • min-width（大抵の場合は”モバイルファースト"で使用）

使用例（モバイルファースト）

※ポイントは、上から順に値を大きくする（デスクトップファーストでは上から順に値を小さくする）

style.css
@media (min-width: 600px) {
    /**適用したいスタイル**/
}

@media (min-width: 900px) {
    /**適用したいスタイル**/
}

/**以下は、直感的な記述**/

@media (width > 600) {
    /**適用したいスタイル**/
}

@media (width > 900) {
    /**適用したいスタイル**/
}

モバイルファースト or デスクトップファースト

  • どちらかを軸にしてレスポンシブデザインを設計する
  • 結論、モバイルファーストで考える方が大抵のケースは良いみたい
  • 理由としては、モバイルの方がマシンとしての性能がデスクトップよりも劣っているため、モバイルを軸にしてレスポンシブデザインを設計する方がモバイルユーザーが快適になるため
  • テクニカルな説明：モバイルファーストだと、CSSの初期値がモバイルのため値の上書きがない。しかし、 デスクトップファーストだと、画面をモバイルにしたときに値の上書きが何重にも起こる。そうなった際にマシンとしての性能が低いモバイルではパフォーマンスの低下に直結することになる
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T17:52:27+09:00

生のCSSでレスポンシブ(メディアクエリ)を書く

はじめに

こんにちは。記事を閲覧いただきありがとうございます。

知り合いの方から頼まれていたWeb制作がひと段落したので、その中で個人的に重宝した
レスポンシブの書き方についてまとめたいと思います。

本当ならSASS、SCSSで以下のようにスッキリ書けるらしいのですが、

styles.css
.card-columns {
  @include media-breakpoint-only(md) {
    column-count: 2;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

コンパイルというのが難しく。。。。笑
約2日におよぶ激闘の末、、、、CSSでそのまま書く事にしました。。。。(・Д・)ﾕﾙｾ....

teratailでも質問させて頂きました。
ご回答いただいた方、ありがとうございました。。。！！！

CSSによるメディアクエリ(レスポンシブ)の書き方

以下のように 768pxから991pxまで、という感じで画面幅の範囲を指定し、
範囲ごとにCSSを記載していきます。

styles.css
/* sm */
@media screen and ( max-width:767px) { 
   h1 {
      font-size: 32px;
   }
}
/* md */
@media screen and (min-width:768px) and ( max-width:991px) { 
   h1 {
      font-size: 48px;
   }
}
/* lg */
@media screen and (min-width:992px) and (max-width:1199px)  { 
   h1 {
      font-size: 56px;
   }
}
/* xl */
@media screen and (min-width:1200px)  { 
   h1 {
      font-size: 56px;
   }
}

Bootstrapのcard表示列数

以下のように画面の幅に合わせてcardの列数を変更したい場合は、
column count 3
column count 2
column count 1

それぞれのcardの親要素.card-columnsに対してcolumn-countを指定
あと、文字がcardからはみ出ちゃったりしたので、cardもheight を適宜指定

styles.css
@media screen and ( max-width:767px) { /* sm */
   .card-columns {
      column-count: 1;
   }
}
@media screen and (min-width:768px) and ( max-width:991px) { /* md */
   .card {
      height: 280px;
   }
   .card-columns {
      column-count: 2;
   }
}
@media screen and (min-width:992px) and (max-width:1199px)  { /* lg */
   .card {
      height: 260px;
   }
}
@media screen and (min-width:1200px)  { /* xl */
   .card {
      height: 300px;
   }
}

Bootstrapのcardコンポーネントについてはこちら
公式ドキュメントからコードをそのままコピペできるのでBootstrap好きです。（´∀｀）

文字の改行ポイントを指定

画像の幅が狭くなるにつれて、文字の改行を増やしたい場合
lg
md
sm

まず、テキストの改行タグにクラスを付ける

index.html
<div class='top-msg' id='msg-1st'>
    <h1 class='text-light'>あなたの
        <br class='br-1st'>「実家」は
        <br class='br-2nd'>「空き家」になって
        <br class='br-3rd'>いませんか？
    </h1>
</div>

画面幅ごとに改行タグへdisplay: none;を付与する。

styles.css
@media screen and ( max-width:767px) { /* sm */
   .top-msg h1 {
      font-size: 32px;
   }
}
@media screen and (min-width:768px) and ( max-width:991px) { /* md */
   .br-1st{
      display: none;
   }
   .top-msg h1 {
      font-size: 56px;
   }
}
@media screen and (min-width:992px) and (max-width:1199px)  { /* lg */
   .br-1st, .br-3rd{
      display: none;
   }
   .top-msg h1 {
      font-size: 56px;
   }
}
@media screen and (min-width:1200px)  { /* xl */
   .br-1st, .br-3rd{
      display: none;
   }
}

余談ですが、Bootstrapのナビゲーションバーは画面が小さくなると
自動でハンバーガーメニュー化してくれるのもいいよね！
sm

今回作った作品

ご紹介できるのはデモページのみですが、このようなページをvue.jsで作成し、firebaseにてwebホスティングしました。

田端の空き家相談所(デモページ)
※あくまでデモページなので、田端の空き家相談所は実在しません！！笑

githubはこちら

おわりに

今回、初めて個人でWeb制作を頼まれて作成した事を通じて、
「webページ作ってよ！」と頼まれたら
「あいよ〜?」と言えるくらいにはなったのではないかと思っています。

今後はSEO対策や、もっとオシャレな見た目を求められる気がするので、
そこらへんも出来るように腕を磨いていこうと思います！

頑張るぞー(・∀・)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T17:45:20+09:00

JavaScriptで文字がはみ出している時に自動横スクロールする

目標

コレ↓ を作ります。
コンポ 1.gif

完成形

function StartScroll(target_id){
    const ele = document.getElementById(target_id);
    var style = ele.style;
    style.overflowY = "scroll";//横スクロールする
    style.whiteSpace = "nowrap";//改行しない
    style.setProperty("-ms-overflow-style","none");
    style.setProperty("scrollbar-width","none");
    style.setProperty("-webkit-scrollbar","none");

    /**
     * この値がno以外になったらスクロールを終了する
     */
    let scroll_exit = "no";

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数
                    ele.scrollLeft++;//1スクロールする
                    if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認
                        setTimeout(function(){//1000ms(1秒)後に一番左に戻す
                            ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す
                            setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する
                        },1000);//1000ms(1秒)後に一番左に戻す
                    }else{//最後までスクロールしていない場合
                        lastLeft = ele.scrollLeft;//現在のスクロール位置を更新
                        setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）
                    };
                };
                move_left();//最初の一回を実行
            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

    new Promise(() => {//非同期で
        scroll();//最初のスクロールを開始する
    });

    return function(){
        scroll_exit = "yes";
    };
};

作り方

複数の要素をスクロールできるように関数を作ります。

function scroll(target_id){

}

まず getElementById をします。

function scroll(target_id){
    const ele = document.getElementById(target_id);
}

次にstyleを設定します。

function scroll(target_id){
    const ele = document.getElementById(target_id);
    var style = ele.style;
    style.overflowY = "scroll";//横スクロールする
    style.whiteSpace = "nowrap";//改行しない
    style.setProperty("-ms-overflow-style","none");
    style.setProperty("scrollbar-width","none");
    style.setProperty("-webkit-scrollbar","none");
}

自動でスクロール

ここから自動でスクロールできるようにします。

まず、スクロールを終了できるようにします。

function scroll(target_id){
    const ele = document.getElementById(target_id);
    var style = ele.style;
    style.overflowY = "scroll";//横スクロールする
    style.whiteSpace = "nowrap";//改行しない
    style.setProperty("-ms-overflow-style","none");
    style.setProperty("scrollbar-width","none");
    style.setProperty("-webkit-scrollbar","none");


    /**
     * この値がno以外になったらスクロールを終了する
     */
    let scroll_exit = "no";
}

スクロールする関数を作ります。

function scroll(target_id){
    const ele = document.getElementById(target_id);
    var style = ele.style;
    style.overflowY = "scroll";//横スクロールする
    style.whiteSpace = "nowrap";//改行しない
    style.setProperty("-ms-overflow-style","none");
    style.setProperty("scrollbar-width","none");
    style.setProperty("-webkit-scrollbar","none");


    /**
     * この値がno以外になったらスクロールを終了する
     */
    let scroll_exit = "no";

    function scroll(){

    };
}

scroll_exit が no の時以外実行しないようにします。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認

        };
    };

スクロール可能な横幅が0になっているか確認して、スクロールが必要か確認します。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合

            }else{//スクロールが不要な場合

            };
        };
    };

スクロールが不要な場合２秒後にもう一度スクロールが不要か確認します。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合

            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

スクロールが必要な場合の処理

ここからスクロールが必要な場合の処理です。

初めに、現在どのくらいスクロールしているか取得しておきます。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合

                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録

            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

左にスクロールする関数を作ります。

   function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録

                function move_left(){//実際にスクロールする関数

                };

            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

左に1スクロールします。

   function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数

                    ele.scrollLeft++;//1スクロールする

                };
            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

現在のスクロール位置を取得して、事前に取得しておいた位置と同じか比較する事で最後までスクロールしたか確認します。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数
                    ele.scrollLeft++;//1スクロールする

                    if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認

                    }else{//最後までスクロールしていない場合

                    };

                };
            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

最後までスクロールしていない場合

次のスクロールを開始する前に、現在のスクロール位置を事前に取得しておきます。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数
                    ele.scrollLeft++;//1スクロールする
                    if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認
                    }else{//最後までスクロールしていない場合

                        lastLeft = ele.scrollLeft;//現在のスクロール位置を更新

                    };
                };
            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

20ms待機してからもう一度スクロールします。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数
                    ele.scrollLeft++;//1スクロールする
                    if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認
                    }else{//最後までスクロールしていない場合
                        lastLeft = ele.scrollLeft;//現在のスクロール位置を更新

                        setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）

                    };
                };
            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

最後までスクロールできた時

一番右で1000ms待機してから一番左に移動します。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数
                    ele.scrollLeft++;//1スクロールする
                    if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認



                        setTimeout(function(){//1000ms(1秒)後に一番左に戻す
                            ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す
                        },1000);//1000ms(1秒)後に一番左に戻す



                    }else{//最後までスクロールしていない場合
                        lastLeft = ele.scrollLeft;//現在のスクロール位置を更新
                        setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）
                    };
                };
            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

2000ms(2秒)待機してからスクロールを再び開始します。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数
                    ele.scrollLeft++;//1スクロールする
                    if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認
                        setTimeout(function(){//1000ms(1秒)後に一番左に戻す
                            ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す



                            setTimeout(scroll,2000);//2000ms(2秒)後にスクロールを再開する



                        },1000);//1000ms(1秒)後に一番左に戻す
                    }else{//最後までスクロールしていない場合
                        lastLeft = ele.scrollLeft;//現在のスクロール位置を更新
                        setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）
                    };
                };
            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

関数の1回目を実行する

関数の中から関数を実行していますが、最初の1回は関数の外から実行しないといけないので最初の一回を実行します。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数
                    ele.scrollLeft++;//1スクロールする
                    if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認
                        setTimeout(function(){//1000ms(1秒)後に一番左に戻す
                            ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す
                            setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する
                        },1000);//1000ms(1秒)後に一番左に戻す
                    }else{//最後までスクロールしていない場合
                        lastLeft = ele.scrollLeft;//現在のスクロール位置を更新
                        setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）
                    };
                };



                move_left();//最初の一回を実行



            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

同じようにscroll()も最初の一回を外から実行します。
これは非同期で実行します。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数
                    ele.scrollLeft++;//1スクロールする
                    if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認
                        setTimeout(function(){//1000ms(1秒)後に一番左に戻す
                            ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す
                            setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する
                        },1000);//1000ms(1秒)後に一番左に戻す
                    }else{//最後までスクロールしていない場合
                        lastLeft = ele.scrollLeft;//現在のスクロール位置を更新
                        setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）
                    };
                };
                move_left();//最初の一回を実行
            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };





    new Promise(() => {//非同期で
        scroll();//最初のスクロールを開始する
    });

スクロールを終了する

最後にスクロールを止められるようにします。

    function scroll(){
        if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
            if(!ele.scrollWidth == 0){//スクロールが必要な場合
                let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                function move_left(){//実際にスクロールする関数
                    ele.scrollLeft++;//1スクロールする
                    if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認
                        setTimeout(function(){//1000ms(1秒)後に一番左に戻す
                            ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す
                            setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する
                        },1000);//1000ms(1秒)後に一番左に戻す
                    }else{//最後までスクロールしていない場合
                        lastLeft = ele.scrollLeft;//現在のスクロール位置を更新
                        setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）
                    };
                };
                move_left();//最初の一回を実行
            }else{//スクロールが不要な場合
                setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
            };
        };
    };

    new Promise(() => {//非同期で
        scroll();//最初のスクロールを開始する
    });






    return function(){
        scroll_exit = "yes";//スクロールを止める
    };

実際に使ってみる

今作成した関数を実行する事でスクロールを開始できます。

StartScroll("display");//スクロールを開始する
StartScroll("ココはスクロール対象のid");//スクロールを開始する

スクロールを終了するには、関数実行時に取得した関数を実行する事で、一番左に戻ったタイミングでスクロールが終了します。

        var end = StartScroll("display");//スクロールを開始する



        //終了ボタンが押されたときの処理
        document.getElementById("exit").onclick = function(){
            end();
        };

例

今すぐ試す

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='display'>
        ああああああああああああああああああああああああああああああああ
    </div>

    <button id="exit">
        スクロール終了
    </button>

    <style>
        #display{
            width: 100px;
        }
    </style>
    <script>
        function StartScroll(target_id){
            const ele = document.getElementById(target_id);
            var style = ele.style;
            style.overflowY = "scroll";//横スクロールする
            style.whiteSpace = "nowrap";//改行しない
            style.setProperty("-ms-overflow-style","none");
            style.setProperty("scrollbar-width","none");
            style.setProperty("-webkit-scrollbar","none");

            /**
             * この値がno以外になったらスクロールを終了する
             */
            let scroll_exit = "no";

            function scroll(){
                if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認
                    if(!ele.scrollWidth == 0){//スクロールが必要な場合
                        let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録
                        function move_left(){//実際にスクロールする関数
                            ele.scrollLeft++;//1スクロールする
                            if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認
                                setTimeout(function(){//1000ms(1秒)後に一番左に戻す
                                    ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す
                                    setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する
                                },1000);//1000ms(1秒)後に一番左に戻す
                            }else{//最後までスクロールしていない場合
                                lastLeft = ele.scrollLeft;//現在のスクロール位置を更新
                                setTimeout(move_left,20)//20はスクロール速度（値が小さい方が早くスクロール）
                            };
                        };
                        move_left();//最初の一回を実行
                    }else{//スクロールが不要な場合
                        setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認
                    };
                };
            };

            new Promise(() => {//非同期で
                scroll();//最初のスクロールを開始する
            });

            return function(){
                scroll_exit = "yes";
            };
        };




        var end = StartScroll("display");//スクロールを開始する



        //終了ボタンが押されたときの処理
        document.getElementById("exit").onclick = function(){
            end();
        };
    </script>
</body>
</html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T17:00:37+09:00

【フロントエンド学習①】フロントエンドとバックエンド

これは？

フロントエンドの学習をして、その理解のアウトプットとして作りました。
初学者にもわかりやすい文章を心がけます。
理解に間違いがありましたら、ご指摘いただけると幸いです。

フロントエンドとは

主にHTML、CSS、JavaScriptで構成されている
サーバーとの通信や、ブラウザに表示されるもの

  • HTML・・・規則に則ってコンテンツを記述する
    →文章、画像、動画、など

  • CSS・・・HTMLで記述されたものにデザインを付与する
    →文字や画像の色や大きさ、コンテンツの配置、など

  • JavaScript・・・ページに機能を持たせる場合に使用する
    →ボタンを押した時の動作、サーバーとの通信の定義、など
    →ブラウザ上で動作するほぼ唯一のプログラミング言語！（ここ重要)
    →ライブラリやフレームワークが豊富(jQuery、Bootstrap、React.js、Vue.js、Node.js、など)

バックエンドとは

フロントエンドと比べて、使用できる言語は多い。(PHP、Java、Python、Ruby、など)
大きく「静的メージ」と「動的ページ」に分けられる

  • 静的ページ
    →リクエストに応じてサーバーに用意されているファイルを返却、ブラウザに表示される

  • 動的ページ
    →リクエストに応じてサーバーにあるプログラムがページを生成して返却、ブラウザに表示される

おわり

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T12:23:49+09:00

nth-child()とnth-of type()の違い

結論

順番を数えるときに指定した要素のみを数えるかどうか

それぞれの挙動の違い

例として以下のようなコードを使用します。

<body>
  <h1>国民の祝日</h1>
  <h2>１月</h2>
  <p>元日</p>
  <p>成人の日</p>
  <h2>２月</h2>
  <p>建国記念の日</p>
  <p>天皇誕生日</p>
  <h2>３月</h2>
  <p>春分の日</p>
</body>

ブラウザ表示は以下のようになります。
ブラウザ表示

今回はpタグに対して指定をしていきたいと思います。
nth-child()とnth-of type()共に３番目を指定して色を変えてみます。

p:nth-child(3) {
  color: red;
}

p:nth-of-type(3) {
  color: blue;
}

結果としてブラウザの表示は以下のようになりました。

ブラウザ表示

nth-childは３番目の要素であるpタグに対してプロパティが適用されています。
これは上から数えて３番目がpタグだったためcolor: red;が適用されて色が赤くなっています。
これを

p:nth-child(1) {
  color: red;
}

とすると１番目の要素はh1タグで囲まれているためプロパティは適用されず文字は赤くなりません。

それに対してnth-of-typeはpタグの３番目にプロパティが適用されています。
このことからnth-of-typeは指定した型で順番を数えるという特徴があります。

以上、nth-child()とnth-of type()の違いでした。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T10:48:55+09:00

JavaScript のコードを整形する

以下のサイトを利用した。

Online JavaScript Beautifier (v1.13.0)
https://beautifier.io/

コードを貼って、 Beautifully Code で整形

スクリーンショット 2021-01-03 10.46.11.png

いろいろできる

フォーマットが指定できる

スクリーンショット 2021-01-03 10.53.47.png

こうなる。
スクリーンショット 2021-01-03 10.40.57.png

JavaScript, CSS, HTML に対応しているっぽ

スクリーンショット 2021-01-03 10.43.15.png

以上。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-03T00:07:21+09:00

CSS素人の僕が考える最強の左寄せ右寄せCSS

CSSは簡単にかじった程度の者ですが、ブロック要素を1行に左寄せおよび右寄せに配置したい場合のCSSってどう書くのが一番最強なのか検討してみました。
※ここでの「最強」とは私が考え・感じる「いい感じ」な表現方法になります。
もっと素敵な方法があるかもしれません。皆様他素敵な方法あったら教えてください。

発端

プロジェクトで作成された 1 行に左寄せ右寄せができるようになったスタイルテンプレートが読みにくくて仕方ない気がして気になってしまった。

やりたいこと

次のように、div タグの中に左寄せ右寄せができる領域を表現する div タグがあり（以下例であればalign-leftとalign-right）。そこにボタンなどを追加していけば左寄せの領域は左に、右寄せの領域は右にボタンが配置される。

HTML
<div class="parent-box">
  <div class="child-box align-left">
    <div>左寄せ領域</div>
    <button class="btn">ボタンA</button>
    <button class="btn">ボタンB</button>
  </div>
  <div class="child-box align-right">
    <div>右寄せ領域</div>
    <button class="btn">ボタンC</button>
  </div>
</div>

■ 作りたい画面イメージ
画面A.PNG
この画面のように、左寄せの領域・右寄せの領域をもったテンプレートを作成して各実装者は作成する画面の設計に応じてボタン等を配置すればOK！みたいな画面を作成する。

なお、以降見やすさのため特に言及しないが以下cssを適応しているものとする。
※全体の領域をグレー、右寄せ左寄せの領域をブラックにして見やすくするためのみに利用しております。

CSS
div {
  margin: 5px;
}
.parent-box {
  background: gray;
  width: 100%;
}
.child-box {
  background: black;
  color: white;
}

実装方法

1. float で頑張る

正直私は調査前は恥ずかしながらこの「float」でやる方法しか知りませんでした。
これは、私のような旧時代の人間が使う方法で、いたる所にわかりにくさが隠されている方法になります。実装する場合は例えば以下のようになります。

HTML
<div class="parent-box float">
  <div class="child-box align-left">
    <div>左寄せ領域</div>
    <button class="btn">ボタンA</button>
    <button class="btn">ボタンB</button>
  </div>
  <div class="child-box align-right">
    <div>右寄せ領域</div>
    <button class="btn">ボタンC</button>
  </div>
</div>
<div class="clear"></div>
CSS
.float {
  overflow: hidden;
}
.float .align-left {
  float: left;
}
.float .align-right {
  float: right;
}
.clear {
  clear: both;
}

■画面
画面A.PNG
コードを見ていただけばわかる通り謎のclearが必要だったり、overflowを書かないとうまく動かなかったり、考えただけで吐き気がしますね。当然簡単ではないためこれは最強のcssではありません。詳細を知りたい方はfloatを使ったブロック要素の右寄せ、左寄せとclearの方法を参考にしてください。

2. FlexBoxのFlexアイテムを調整する

これが私が参画しているプロジェクトで使われていた方法です。そもそもflexBox？となっていた私からすると異常にハードルが高く、「右寄せ・左寄せ」という概念からすると全く「直感的にわからない」というのが問題です。そもそも、私と同じくflexBox？となった方は【備忘録】Flexboxを知り、未だにfloatを使っていたことを恥じる男などを参考にしてください。
私のプロジェクトの実際のコードは以下のようなものでした。

HTML
<div class="parent-box flex-box">
  <div class="child-box align-left">
    <div>左寄せ領域</div>
    <button class="btn">ボタンA</button>
    <button class="btn">ボタンB</button>
  </div>
  <div class="child-box align-right">
    <div>右寄せ領域</div>
    <button class="btn">ボタンC</button>
  </div>
</div>
CSS
.flex-box {
  display: flex;
}
.flex-box .align-left {
  flex: 1 0 auto;
}
.flex-box .align-right {
  flex: 0 1 auto;
}

■画面
画面B.PNG
ポイントはflex-boxの子要素である Flex アイテム用のプロパティである。「flex-grow」「flex-shrink」「flex-basis」を以下 1 行で表現し、左寄せ右寄せを実現している所になります。こうすることで、上記画面からもわかるようにalign-leftクラスのdivタグが使えるだけ領域を占領し、残りの領域をalign-rightクラスのdivタグが使うようになります。
※margin や padding と同じく flex は以下のようにスペース区切りで記載することで grow,shrink,flex の順で定義することができます。

flex: 1 0 auto;

flex-grow, flex-shrink, flex-flexそれぞれは以下を表します。

flex プロパティ .align-left .align-right
flex-grow Flex アイテムの横幅の比率 1 0
flex-shrink Flex アイテムが縮小されるときにどういう比率で縮小されるか 0 1
flex-basis Flex アイテムの幅を直接指定 auto auto

このとき、flex-growにおいてalign-leftは1でalign-rightは0なので、可能な限りalign-leftは領域を使おうとします。flex-shrinkでalign-leftは0なので縮小されませんがalign-rightは1のため縮小されます。
そのため、左寄せ右寄せが実現できるようになります。

そうです。なぜ左寄せ右寄せをするだけのために「比率」だの「縮小率」だの考えなければならないのか・・・
結果的に左寄せ右寄せになっているだけであって直感的ではない。それが私の感じた事でした。そのためこの方法も最強の css にはなりません。

3. FlexBox の justify-content: space-between をつかう

これが、僕が考える最強の左寄せ右寄せ CSS です。
恐ろしいことに、スタイルの指定はたったの 2 つのプロパティを指定すれば完了になります。（ほら最強でしょう笑）

<div class="parent-box flex-box-between">
  <div class="child-box">
    <div>左寄せ領域</div>
    <button class="btn">ボタンA</button>
    <button class="btn">ボタンB</button>
  </div>
  <div class="child-box">
    <div>右寄せ領域</div>
    <button class="btn">ボタンC</button>
  </div>
</div>

.flex-box-between {
  display: flex;
  justify-content: space-between;
}

画面A.PNG
これの解説は簡単です。justify-contentのspace-betweenがそういう仕様だからです。
そもそもspace-betweenは1つ目と1番後ろのFlexアイテムは両端、残りは等間隔に配置するという仕様です。
そのため、Flexアイテムが2つの場合は勝手に左寄せ右寄せになります。

欠点

最強かに思える本スタイルにも欠点があります。
それは「html 上で左寄せ右寄せしていることを表現できていない」ということです。
space-between が優秀過ぎて「align-left」「align-right」のクラスが必要ではないため、html を見ただけでは左寄せ右寄せになっている div タグがどれなのか判断つきません。
class にマーカクラスとして「align-left」「align-right」を追加しておくことで一応の回避はできますが少し悩ましい所ではあります。
また、当然ですが「justify-content: space-between」を知らないメンバーが保守をした場合、おそらく子要素のdivタグを最初に確認し、なぜ左寄せ右寄せになっているのかと相当な時間をかけた後、親要素のdivタグに設定しているスタイルを見なければわからず、誰でも簡単にわからない実装になっている可能性があります。この点は他の方法であれば子要素のスタイルを参照すればなんとなくわかるので比較的メンバスキルに依存しない実装にはなるかと思います。

総括

ブロック要素を1行に左寄せおよび右寄せに配置したい場合はjustify-content: space-betweenを使うことでかなり良い感じに記述できるが、メンバーのレベルやコード規約に準じて実装方法は検討する必要がある。

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

日付別

タグ一覧