0から書き出すとそれなりに時間が取られる三角形。主に吹き出しなどに使う機会が多いと思います。そんな時にパッと使える三角形ジェネレーターまとめです。

吹き出しジェネレーター

border付きの吹き出しジェネレーターです。
beforeとafterを重ねて表現しているベーシックな形です。

http://www.cssarrowplease.com/

CSS三角形作成ツール

とてもシンプルで、とりあえず三角形を作ってから調整したい場合はコレです。

http://apps.eky.hk/css-triangle-generator/ja

CSS Triangle Generator

CSS三角形作成ツールと記述方法は変わらず、ちょっとお洒落な雰囲気なので使いやすいです。

https://triangle.designyourcode.io/

どうも7noteです。コピーライトについてのお話。

WEBサイトでよくコピーライトを見かけると思うのですが、2020年現在実は表記は必須ではありません。
ではなぜ表記するのかですが、いくつか調べているとメリットがあるようです。

コピーライトを入れるメリット

①著作者として推定されることができる
②著作権の期限が長くなる
③裁判で故意の主張をする際に有利となる
④ベルヌ条約に加盟していない国でも著作権を主張することができる
⑤転載される場合に著作者として表示してもらうことができる
(引用元: https://nandemo-nobiru.com/om-6265)

詳しくは綺麗にまとめられているページがあったので、こちらをご覧ください。
https://nandemo-nobiru.com/om-6265

2020年現在、正しいコピーライトの書き方

コピーライトを書く際に必ず必要な情報は3つです。

• ©（丸の中にC、丸C、マルシー）の記号 (symbol ©)
• 著作権者の氏名 (name of the copyright proprietor)
• 最初の発行の年 (the year of first publication)

試しにQiitaのコピーライトを見てみましょう。
現在はこのようになっていました。

© 2011-2020 Increments Inc.

これを例に見ると「-2020」は本来であればなくても著作権の表記としては正しいことになります。

© 2011 Increments Inc. (これでも著作権的にはOK)

つまり2020年現在で正しく、一番短い書き方で書くのであれば、このようになります。

2020年のコピーライトの書き方は
© [創作年(公開年)] [著作者（個人・社名）]

Qiitaなら・・・
© 2011 Increments Inc.

また気を付けないといけないのは、WEBサイトなどは作った時から著作権が発生するのではなく、世に公開（公表）されてから著作権が発生するので気を付けましょう。
5年前(2015年)に作ったWEBサイトを今年に公表すれば、著作権の表記は2020(今年)となります。

まとめ

ちゃんとコピーライトについての記事を読んだのですが、著作権の歴史について細かく記載されていたので、
歴史や条約なんかに興味のある人は読んでみても面白いかもしれません。

https://ja.wikipedia.org/wiki/%E8%91%97%E4%BD%9C%E6%A8%A9%E8%A1%A8%E7%A4%BA

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

参考

https://qiita.com/yskszk/items/702ee034b837d11e1539
https://www.d-grip.com/blog/seisaku/4984
https://nandemo-nobiru.com/om-6265

100日チャレンジの387日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
387日目は、

おはようございます
昨日の作業⇩

●キンドル読書 10分
●プログラミング学習387日目 2h
・メンターの課題
・背景画像の位置調整#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ

— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 30, 2020

概要

Pythonで0からWebアプリを作る機会があったので、そのまとめとして！
この記事ではアプリの設計、データベースの設計、構築について書いています。

前回の記事
【Python】0からWebアプリ！ハンズオン(0)～環境構築編～ - Qiita

こんな方に読んでほしい

• プログラミング未経験だけどアプリ作ってみたい方
• 新人Webプログラマの方
• 経験者だけどPythonでWebアプリ書いたことない方

ゴール

HTML, CSS, JavaScript, Python, SQLを使ってCURD機能を持ったWebアプリを作成するのが目標です。

必要なもの

• PC（Windows OS）
• インターネット回線
• わくわくした気持ち

1. アプリのイメージ

今回は題材として簡単なTodoアプリを作りたいと思います。

必要となる機能は

• Todo一覧（Read）
• Todo追加（Create）
• Todo更新（Update）
• Todo削除（Delete）

の4つとします。これらの頭文字をとってCRUDと表現することがあり、業務系アプリのほとんどはこれらの機能がベースとなっています。
それぞれの画面イメージを作成してみました。

Todo一覧

登録されたTodoを一覧形式で表示します。
新規追加ボタンがあり、そこから新規登録フォームが開きます。
各行に編集、削除は各行に配置されたボタンから行えます。

Todo追加

Todoの新規登録フォームです。タイトルを入力し、「追加」ボタンを押すことで一覧に追加されます。

Todo更新

Todoの編集フォームです。タイトルを更新し、「更新」ボタンを押すことでTodoが更新されます。

Todo削除

一覧の削除ボタンを押すと、該当行のデータが削除されます。そのとき、削除してよいかどうかのメッセージが表示され、「削除」ボタンを押すとTodoが削除されます。

2. データベースの設計

データベースの設計はこれだけです(笑)
ポイントとしてはis_deletedという列を設けることで、Todoの論理削除を可能とするところです。
論理削除というのは、データは残っているが「消えた or 消えていない」のフラグを持たせることでユーザーからは削除されたように見える
方法のことです。消すときにはis_deleted= trueとして、一覧ではis_deletedがtrueのデータは表示しないこととします。

反対に、SQLのDELETE文でデータベースから完全にデータを削除することを「物理削除」といいます。

id: TodoのIDです（一意）
title: Todoの題名です
created: Todoを作成した日時です
isDeleted: Todoが削除されたかどうかです

3. データベースの構築

では、実際にデータベースから作っていきましょう！
pgAdmin4はブラウザで動作するツールです。Windowsの場合、メニューバーの検索ボックスに「pgadmin」と入力すると出てくるはずです。

ここから以下の順番で生成していきます。
サーバーグループ -> サーバー -> データベース -> スキーマ -> テーブル

サーバーグループの作成

まずはデータベースのサーバーグループを作成する必要があります。

Object > Create > Server Groupを選択します。

名前は「TodoServers」としました。

サーバーの作成

続いて、サーバーを作成します。
TodoServersを右クリック > Create > Serverを選択します。

Nameは「TodoServer」としました。

Connectionタブにて、
Host name/address: localhost
Password: postgres
を入力し、Saveしてください。

データベースの作成

続いてデータベースを作成します。
TodoServerのDatabasesを右クリックして、Create > Databaseを選択します。

名前を「TodoDatabase」としてSaveしてください。

テーブルの作成

TodoDatabaseのSchemas > public > Tablesを右クリックし、Create > Tableを選択します。

Nameは「todo」とします。

Columnsタブで画像の通り列を設定していき、Saveしてください。（右上の＋ボタンから追加できます）

まとめ

今回はここまで！
アプリの簡単な画面設計、データベース設計、データベース構築を行いました！

次回は･･･

サーバーサイド（Rest API）の構築を行います！

概要

Pythonで0からWebアプリを作る機会があったので、そのまとめとして！
この記事では環境構築について書いています。

こんな方に読んでほしい

• プログラミング未経験だけどアプリ作ってみたい方
• 新人Webプログラマの方
• 経験者だけどPythonでWebアプリ書いたことない方

ゴール

HTML, CSS, JavaScript, Python, SQLを使ってCURD機能を持ったWebアプリを作成するのが目標です。

必要なもの

• PC（Windows OS）
• インターネット回線
• わくわくした気持ち

1. Pythonのインストール

公式サイトからダウンロードできます。
Download Python | Python.org

インストーラを起動したら、「Add Python 3.8 to PATH」にチェックを付けて「Install Now」してください。

コマンドプロンプトを起動し、pythonと入力して画像のようになったらインストール成功です。

2. Visual Studio Codeのインストール

公式サイトからダウンロードできます。
Visual Studio Code - Code Editing. Redefined

インストーラを起動し、基本的には次へ次へ進めてOKです。
「エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する」と「エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する」の2つにチェックを入れると、エクスプローラー上でフォルダ右クリックしてVSCodeで開けたりするので便利です。

3. Visual Studio Codeプラグインのインストール

VSCodeでは便利な拡張機能が多数配布されています。サイドバーから確認できます。

とりあえずぼくが入れている & 今回使いそうな最低限のものをご紹介します。

Japanese Language Pack for Visual Studio Code

デフォルト英語のVSCodeを日本語化してくれます。

Python

Pythonの実行をVSCode上でできます。

Prettier - Code formatter

コードフォーマッターです。（コードのインデントやスペースを自動で整えてくれるやつ）
VSCode標準のフォーマッターもあるんですが、Prettierは幅広く、カスタマイズ容易なので使っています。

4. PostgreSQLのインストール

EDBのサイトからダウンロードできます。
Download PostgreSQL Database for Windows, Linux and MacOS & 32-bit or 64-bit Versions | EDB

インストーラを起動し、基本的には次へ次へ進めてOKです。

pgAdmin4はPostgreSQLを簡単に扱うためのGUIツールです。これがないとCLIからの操作（コマンドライン）になるので、慣れていない方はpgAdmin4にチェックしたままインストールしてください。

まとめ

今回はここまで！
サーバーサイド言語、データベース、コードエディターの環境を整備しました！

次回は･･･

アプリの設計、データベースの構築を行います！
【Python】0からWebアプリ！ハンズオン(1)～設計、DB構築編～ - Qiita

本記事は主にフロントエンド始めたての方向けになると思います。
自分自身フロントを始めて、2か月程度でまだまだ改善するところがあります。
今回デザインからコーディングする際のお話です。

これを書こうと思ったきっかけ

理由は簡単で、HTML,CSSで使うクラス名の書き方に統一性がなく、コードも長かった為、色々な問題が起きたためです。
CSSのプロパティもある程度使いこなせていた為、その頃はとにかく早く作ろうと思い、コードの見やすさはあまり重要視せずにやってたと思います。

起きた問題

・チームで作業する際、他の方が修正やコード追加するのが大変
・自分でも後から見直して、どこを修正していいか分からなくなる、修正に時間がかかる
・とにかく余計な時間がかかる

原因

・HTML,CSSの設計でBEMを使うことになっていたが、正しく使えていなかった
・CSSで共通化を意識せず、一つ一つの要素をゼロから作成していた

※BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。
https://tech-dig.jp/bem-css-html/

改善・意識したこと

・見た目からCSSで共通化できるところを探し、なるべくゼロから作らないようにする。

例としてwebサイトをコーディングする際、↓のようなレイアウトがよくあると思います。
https://www.dentsusciencejam.com/
このコンテンツ内に様々なセクションがあり、ページ検証を行うと分かりますが、セクションごとのタイトル、本文、配置など同じクラスが使われており、多少違うものは、その要素にクラスを追加して上書きするような形になっています。

・クラス名などBEMを正しく使い、Sassの記述も見やすくする
まずは↓のように、使う命名を整理する。
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

結果

・コード量が非常に減った
　とある案件でのコーディングで、TOPページだけでも意識前後で半分以下になったと思います
・HTML、SASS（CSS)が見やすくなった
　何が、どういう要素かが一目で分かる（↓一例ですが、BEMは破綻しないように意識）

あるTOPページの業務内容セクション（例）
<section class="content-section service">
  <div class="content-section__inner">
    <div class="content-section__head">
      <div class="content-section__logo">
      </div>
      <h2 class="content-section__title">
        <div class="content-section__title--eng">SERVICE</div>
        <div class="content-section__title--jp">業務内容</div>
      </h2>
    </div>
    <div class="content-section__body">
      <article class="card">
        <div class="card__image"></div>
        <h2 class="card__title">業務内容（例）</h2>
        <div class="card__body">
          <div class="card__body--top">テスト本文</div>
          <div class="card__body--center">テスト本文</div>
          <div class="card__body--foot category">
            <div class="category__item">カテゴリーA</div>
            <div class="category__item">カテゴリーB</div>
            <div class="category__item">カテゴリーC</div>
            <div class="category__item">カテゴリーD</div>
          </div>
          <div class="card__body--link">
            <a href="#" class="arrow">詳しくみる</a>
          </div>
        </div>
      </article>

Sass(css)もBEMを正しく使えばこのようにまとめられます

//コンテンツ(共通)例
.content-section
  &__inner
    max-width: 1110px
    margin: 0 auto
  &__head
    display: flex
    justify-content: flex-start
  &__logo
    width: 60px
    height: 60px
  &__title
    margin-left: 15px
    &--eng
      color: #3E3838
      font-size: 38px
      font-weight: bold
    &--jp
      font-size: 20px
      font-weight: bold
  &__body
    font-weight: 500
    letter-spacing: 2px
    margin-top: 50px
    color: #FFFFFF

まとめ

デザインどうりに反映していく事に意識がいき、コードの見やすさなど後回しになることがあると思いますが

Webサイトは修正、変更追加、メンテナンス作業など定期的に入ってきますので、チームで作業する際は、

他の方が見てもすぐに分かるように特に意識した方が良いと思います。

自分自身もっと良い書き方、まとめ方を取り入れていきたいと思ってます。

参考サイト

CSSのクラス名を決めるときに使うリストをつくりました
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470
HTML・CSSの設計にBEMを取り入れてみよう！
https://tech-dig.jp/bem-css-html/

Google Material IconsをIE対応して使うには？

方法1： HTMLで直接書く

<i class="material-icons">email</i>

一番簡単な方法ですが、問題が1つあります。
グーグルの検索結果に表示されるようなタイトルやメニュー部分にこの方法でアイコンを設置してしまうと、emailお問い合わせフォームのような形でアイコンのコードが
テキストとして一緒に表示されてしまいます。

方法2： CSSで旧文字コードを使って書く

Google Material IconsをCSSで表示することができます。
公式サイトの「email」などのコードをcontentに入れることで使えますが、IEでは
以前の文字コードじゃないと表示されません。。

.material-icon::before {
   font-family: Material Icons, sans-serif;
   content: "\e0be"; //IE以外は「email」でOK
}

ただ、この方法だとアイコン毎にCSSを書かなければいけないためかなり面倒です。

HTMLだけで擬似要素として表示させる

CSSで表示できれば何も問題ないので、<i class="material-icons">email</i>のようにHTMLで完結した上で、擬似要素として表示する方法をまとめました。

ベースのHTML・CSSを用意

.material-icon::before {
   font-family: Material Icons, sans-serif;
   content: attr(data-icon);
}

<i class="material-icon" data-icon="文字コード"></i>

data-iconに入れたコードがcontent:にはいるようになります。
ベースができたので、アイコンを表示するために以下の手順で文字コードを用意します。

1. 使いたいアイコンを選ぶ

今回は公式サイトから「email」を選びます

2. 文字コードを調べる

「email」で検索して「e0be」の文字コードを取得
文字コード一覧：GitHub

3. 10進数に変換する

data-icon="\e0be"で表示されて欲しいところですが、これだと表示されません。
「\」を「&#」にした上で、e0beを10進数にすることで表示されます。

変換ツール

できた

<i class="material-icon" data-icon="&#57534;"></i>メールでお問い合わせ

これで検索結果のテキスト表示も無く、アイコンの追加はHTMLだけでできるようになりました。文字コードを探して変換する手間はありますが、CSSで毎回設定するよりは楽になります。

コピペだけで作れるCSSスライダーアニメーションを５５個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSスライダーアニメーション５５選

１. 複数のtransform×transitionでつくるCSSスライダーアニメーション３選【未経験でもOK】

filterプロパティの応用、transform:translateの移動エフェクト、skewの傾斜エフェクト、scaleの拡大エフェクト、rotateの回転エフェクトで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

２. transform:translate&skewで絵画のスライドショーを実現！CSSスライダーアニメーション３選

。filterプロパティの応用、transform:translateの移動エフェクトとskewの傾斜エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

３. transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選

filterプロパティの応用、transform:translateの移動エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

４. filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選

filterプロパティの応用、transform:scaleの伸縮エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

５. filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】

filterプロパティの応用、transform:rotateの回転エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

６. コピペだけでCSSアニメーション！ECサイトでそのまま使えるスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

７. コピペだけ！画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン３選

画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

８. 洗練されたマテリアルデザインをコピペで！CSSスライダーアニメーション３選（ナビゲーションボタン編）

Web制作やWebアプリケーションなどで利用できるデザインになっています

↓参考記事は下の記事です↓

９. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選（コントロールボタン編）

コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

↓参考記事は下の記事です↓

１０. 【解説付き】3Dマテリアルデザインをコピペで！CSSスライダーアニメーション３選（rotate編）

実務で使えるエフェクトがついています

↓参考記事は下の記事です↓

１１. 【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

それぞれに違ったfilterアニメーションがついていて面白いです

↓参考記事は下の記事です↓

１２. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選【transform編】

いろいろなtransformエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

↓参考記事は下の記事です↓

１３. コピペだけでスライダーマテリアルデザイン！CSSアニメーション３選【transform:scale編】

コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します

↓参考記事は下の記事です↓

１４. スライダーマテリアルデザインをコピペで！CSSアニメーション３選【コード解説付】

CSSだけで動きのあるスライダーマテリアルデザイン３選が紹介されています

かなりスタイリッシュなデザインだからこそ使える場所が多いと思います

↓参考記事は下の記事です↓

１５. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選

filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１６. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装

そのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

１７. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法

そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

コピペだけで作れるCSSスライダーアニメーションを５５個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSスライダーアニメーション５５選

１. 複数のtransform×transitionでつくるCSSスライダーアニメーション３選【未経験でもOK】

filterプロパティの応用、transform:translateの移動エフェクト、skewの傾斜エフェクト、scaleの拡大エフェクト、rotateの回転エフェクトで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

２. transform:translate&skewで絵画のスライドショーを実現！CSSスライダーアニメーション３選

。filterプロパティの応用、transform:translateの移動エフェクトとskewの傾斜エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

３. transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選

filterプロパティの応用、transform:translateの移動エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

４. filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選

filterプロパティの応用、transform:scaleの伸縮エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

５. filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】

filterプロパティの応用、transform:rotateの回転エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

６. コピペだけでCSSアニメーション！ECサイトでそのまま使えるスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

７. コピペだけ！画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン３選

画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

８. 洗練されたマテリアルデザインをコピペで！CSSスライダーアニメーション３選（ナビゲーションボタン編）

Web制作やWebアプリケーションなどで利用できるデザインになっています

↓参考記事は下の記事です↓

９. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選（コントロールボタン編）

コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

↓参考記事は下の記事です↓

１０. 【解説付き】3Dマテリアルデザインをコピペで！CSSスライダーアニメーション３選（rotate編）

実務で使えるエフェクトがついています

↓参考記事は下の記事です↓

１１. 【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

それぞれに違ったfilterアニメーションがついていて面白いです

↓参考記事は下の記事です↓

１２. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選【transform編】

いろいろなtransformエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

↓参考記事は下の記事です↓

１３. コピペだけでスライダーマテリアルデザイン！CSSアニメーション３選【transform:scale編】

コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します

↓参考記事は下の記事です↓

１４. スライダーマテリアルデザインをコピペで！CSSアニメーション３選【コード解説付】

CSSだけで動きのあるスライダーマテリアルデザイン３選が紹介されています

かなりスタイリッシュなデザインだからこそ使える場所が多いと思います

↓参考記事は下の記事です↓

１５. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選

filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１６. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装

そのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

１７. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法

そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

テーブルのタグについて

テーブルタグがは料金表や事業の内容などを読者に見せたい時に使うと非常に見やすく、制作の時も便利なタグである。

tableタグ

tableタグは、中がtableタグであると定義する時に使う。この中にテーブルを書いていく。

theadタグ

テーブルの上部を記述する時に、使うタグ。

tbodyタグ

テーブルを書く時に使うタグ。

tfootタグ

テーブルの下部に記述する時に使うタグ。いつの情報かを記述したりする。

trタグ

テーブルを書く時にthやtdを囲うタグである。

thタグ

テーブルの見出しなどに使う。

tdタグ

テーブルの内容を記述する時に使う。

details

ユーザーが情報を得たい時に使う。

summay

detaiilsタグの中に使用して、追加の情報などを見てもらう時に使用する。

scope属性

タグではないが、rowとcolがありそれぞれ縦列と横列で結びついているということを示す。