- 1. 見出し1
- 1.1. 見出し2
- 1.1.1. 見出し3
- 1.1.2. [JavaScript]fetch メソッド
- 1.1.3. SwiftUIはweb開発に近いところを感じた
- 1.1.4. Web制作中によくお世話になるWebサービス
- 1.1.5. flask + plotly + javascript csvグラフ化ツール プログラミング編
- 1.1.6. flask + plotly + javascript csvグラフ化ツール 概要編
- 1.1.7. Javascript の様々な部分について
- 1.1.8. wordpress https (secure backend)
- 1.1.9. HTMLの主なタグと用途(1) 改行・区切り・リスト・説明リスト・Emmet省略記号
- 1.1.10. scriptタグを使いまわしたい
- 1.1.11. bulmaで、レスポンシブルかつ最低限必要なページを作成する
- 1.1.12. のfont-sizeを62.5%と指定するのはどう考えても間違っている
- 1.1.13. HTMLの基本
- 1.1.14. 2020年と2021年の海水面温度を比較 (NASA Worldviewをembed)
- 1.1.15. [初心者向け] Gretelを使わずページごとにパンくずリストの表示内容を変える
- 1.1.16. 画像の上の要素を中央に配置する方法(2選)
- 1.1. 見出し2
【cssメモ】cssで中央揃え
#◇本日のメモ#
cssにて、中央にする方法①文字を中央揃え
“`perl:css
{text-align: center;}
“`②要素を中央揃え
“`perl:css
{margin:0 auto;}
“`③display: flexにて中央揃え
こちらは記述した【子要素】が横並びになる。
なので、横並びにしたいものからみて、その親要素に記述
例えば親要素のdiv内にで3つの子要素があれば、親要素にdisplay: flexを記述して、その3つを横並ぶにする“`perl:css
{
display: flex;
}
“`◇おまけ
display: flexのオプション。下記記述で縦並びに上下左右中央になる“`perl:css
{
display: flex;
flex-direction: column; /* 横要素にしたのを、縦並びに*/
justify-content: center; /* 左右中央に*/
align-items: center;/* 上下中央に*/
}
“`ありがとうございました!
HTMLの主なタグと用途(3) テーブル
本記事は筆者の独学のメモ書きのようなものなので、
読者の皆様は参考にしないで下さい。
あくまで、筆者の復習用です。#目次
[1.はじめに](#1-はじめに)
[2.テーブルの概要](#2-テーブルの概要)
[3.テーブル作成の例](#3-テーブル作成の例)
[4.ヘッダーのあるテーブル](#4-ヘッダーのあるテーブル)
[5.thead・tbody・tfoot](#5-thead・tbody・tfoot)
[6.キャプション](#6-キャプション)
[7.セルの結合](#7-セルの結合)
[8.おわりに](#8-おわりに)##1. はじめに
HTMLの学習内容は広大なので、本記事では「テーブル」を記載する。##2. テーブルの概要
:::note info
・テーブルとは?
→表を作成するタグで、身近なもので例えるとExcelで作成する表。
・タグは<table>で表記。
・横一行の記載法として<table>〜</table>内に<tr>〜</tr>で記載。
・<tr>〜</tr>タグ中に&
【HTML/CSS】右側に余白ができている
#◇本日の困ったこと#
*・「発覚の経緯」と「エラー内容」*
HTML/CSSにて実装後、ローカルブラウザにて確認すると、右側に余白ができてる、、、、#◇解決#
bodyの中身をすべてwrapで囲み、CSSにてwrapにoverflow: hidden;を記述でかいけつ!!“`perl:html
〜元々の記述してあるのを囲むだけ〜
“`
“`perl:css
.wrap {
overflow: hidden;
}
“`#参考にしたもの#
とても助かりました!http://bashalog.c-brains.jp/15/06/26-170500.php
THMLメールをスマホで見たら横幅が指定できなかった話
HTMLメールの基本はテーブルレイアウトだ。と言うことは調べたら出てきます。
でも画像を入れると横並びで幅が指定できないなんて聞いてないよ!?
と言う訳で実際にできなかった事をメモメモします。####↓こんな感じにしたかった↓
![スクリーンショット 2021-08-13 15.43.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565886/087e3c7e-02be-952c-04f3-e292fe103d0a.png)
画像が左にあって最大の横幅は200pxで右側に文章が入る
そんな風にしたかった・・・実際にテスト送信を行ってみたところ・・・
PCのgmailでは大丈夫。
PCのyahooでも大丈夫。
スマホのyahooでも大丈夫。スマホのgmailは・・・
####こんな感じになってしまった↓
![スクリーンショット 2021-08-13 15.43.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.c
HTMLの主なタグと用途(2) 見出し・属性・リンク・著作権表記・情報のグループ化
本記事は筆者の独学のメモ書きのようなものなので、
読者の皆様は参考にしないで下さい。
あくまで、筆者の復習用です。#目次
[1.はじめに](#1-はじめに)
[2.見出し](#2-見出し)
[3.属性](#3-属性)
[4.リンク](#4-リンク)
[5.著作権表記](#5-著作権表記)
[6.情報のグループ化](#6-情報のグループ化)
[7.おわりに](#7-おわりに)##1. はじめに
HTMLの学習内容は広大なので、本記事では「見出し・属性・リンク・著作権表記・情報のグループ化」を記載する。##2. 見出し
・Headingの略で、見出しを意味する。
・<h1>が最上位の見出し(大見出し)で、以下数字が小さくなるにつれて下位の見出し(小見出し)となる。
・<h6>が最下位の見出し【サンプル】
“`index.html
見出し1
見出し2
見出し3
見出し4
見出し5
見出し6
“`
[JavaScript]fetch メソッド
#### コード
“`sample.html