100日後くらいに個人開発するぞ！day025

## 今日もHTML＆CSS中級編を復習してみた！


## 今日の備忘録

### ボタンを角丸にする方法
– 要素の角を丸めるにはbroder-radiusプロパティを用いる
– 例：角を半径10pxの円にしたい
– `.button{border-radius:10px;}`

### テキストを中央に寄せる方法
– text-alignプロパティを用いるとテキスト・インライン要素・インラインブロック要素の配置を指定できる
– left：左寄せ
– 例：`text-align:left`
– center：中央揃え
– 例：`text-align:center`
– right：右寄せ
– 例：`text-align:right`
– `m

HTML webコンテンツのタグ構成

### 大枠

– header
– 企業ロゴ、各種リンク、お知らせ
– main
– メインコンテンツ
– footer
– ページの制作者や運営者に関する情報、関連ページへのリンク、copyright
– smallタグ
– 著作権表記に使用、欄外注釈など

### まとまりを表す要素

– nav
– webサイト内の主要なナビゲーションを表す。リンクメニュー。
– article
– articleのまとまりひとつで意味がわかるもの。その名の通り記事のまとまりなどに使用する。
– aside
– webページの主要コンテンツとは関係のない一節。広告など。
– section
– 上記3つに該当せず、section要素だけでは全体の意味が掴めないもの。
– div
– レイアウトが目的のまとまり
– ブロック要素
– span
– こちらもレイアウトが目的のまとまり
– インライン要素
– main
– 各ページのメインコンテンツ
– 各ページに1つ

ブラウザの開発者ツールのコンソールで JavaScript を実行してページ内の情報の一部を一括取得： connpass のページを例に

タイトルの通りで、何らかの Webサイトを開いた状態で、ブラウザの開発者ツールのコンソールに JavaScript のプログラムを書いて実行し、その Webサイトの情報をプログラムの処理で得るようなことをやる話です。

自分が上記の処理をやろうとしたのは、とある閉じたネットワーク内のサイトで情報の一括取得をプログラムでやると良さそうな状況があったためでした。（そのサイトを扱う PCの 環境的な事情で、ブラウザの自動操作系の外部プログラムとか、ブラウザ拡張機能は使えない状況でもあったり…）。
その閉じたネットワーク内でやった話の一部を、将来の自分のメモも兼ねて記事にしておきたかったのですが、そのサイトを扱う話は直接記事にはできないので、イベント主催・参加関連でお世話になっている connpass のサイト（※　以下の URLで見られる、自分自身のダッシュボードのページ）を題材にして、話を進めていくことにしました。

●ダッシュボード – connpass
　https://connpass.com/dashboard/

## 今回やること
ひとまず、 connpass のダッシュボ

[MATLAB] Text AnalyticsでDocumentationの必要な部分へのリンクを作成する

# はじめに
MATLABを使う際にとても便利なのが[ドキュメンテーション](https://jp.mathworks.com/help/matlab/)です. ここには, MathWorks製品である,

* MATLAB
* Simulink
* Toolbox

に含まれる関数の説明と使用例が詳細に記されており, これさえあればMATLABマスターになれます. そして, このドキュメンテーションを便利に使うのはMATLABを学ぶ人だけではありません. MATLABを教える立場にある人も, この[ドキュメンテーション](https://jp.mathworks.com/help/matlab/)を見ることで,

* 自分の考えは間違っていないかの確認
* 説明に使えそうなデモを見つけたり, そのアイデアをもらう

などができて, 大変便利です. また, この[ドキュメンテーション](https://jp.mathworks.com/help/matlab/)はインターネットで公開されているため, オンライン講習会などでも, 資料PDFにリンクを張るだけで相手に効果的な説明を行うこ

【CSS】これから期待できるCSSまとめ2022

## 概要
今までCSSのプロパティは、
「**特定のバージョンしか使えない**」とか、「**特定のブラウザだと使えない**」とかで
新しいプロパティが公開されても、使えないことが多々ありました。

そのため、主要なブラウザの関係者が集まり、
Web開発者の開発体験を向上する[**Compat 2021**](https://web.dev/compat2021/)の取り組みが行われ、
ブラウザの互換性を解消する動きが活発になっていきました。

例えば、`CSS flexbox` や `Grid Layout`などもこの取り組みによって、
多くのブラウザで対応できるようになってきました。

※ [Compat 2021についてこちらの記事ご覧ください。](https://web.dev/compat2021/)

この記事では、Compat 2021に引き続き、[Interop 2022](https://web.dev/interop-2022/)で解消されるCSSプロパティの10個についてまとめました。

こんなものがもうすぐ使えるようになるんだな…みたいに思っていただけると嬉

Codestepで学ぶHTML、CSSの模写コーディング （アコーディオンデザイン)

# 模写サイト

https://code-step.com/extra2-menu/

– [模写コーディングしたサイト](http://abc18717397.html.xdomain.jp/accordion.html)

### 参考サイト

https://www.mitsue.co.jp/knowledge/blog/frontend/201912/14_0000.html

https://fromkato.com/webdev/css/properties/visibility

https://qiita.com/FJHoshi/items/0ed4b628acdab696be62

– 変更点
– jQuery 禁止

# DOCTYPEの作成
“`html:

100日後くらいに個人開発するぞ！day024

## 今日からHTML＆CSS中級編を復習してみた！


## 今日のアウトプット


## 今日の備忘録

### ヘッダータグとフッタータグ
– ヘッダーとフッターのタグは非常によく使われるためHTMLには`

`タグと`

「Webを支える技術」まとめ（第４部）

[「Webを支える技術」まとめ（第１部〜第３部）](https://qiita.com/waluigi/items/4a9432c26495db0f8526)の続きになります。

# 第十章 HTML（Hyper Text Markup Language）
### HTMLのメディアタイプ
* text/html：SGMLベース
　SGMLはマークアップ言語の１つで過去のHTMLはこの言語をベースに作られていた。
* application/xhtml+xml：XMLベース

文字エンコーディングはUTF-8を使うのが無難と言える。

### XMLの基礎知識
XML文書は木構造として表現できる。
* html
* head
* title
* body
* h1
* p

XMLの木構造はそれぞれの要素（headやp）を入れ子にして表現する。このとき
* htmlはheadやbodyの親要素
* headやbodyはhtmlの子要素

### 属性
要素は属性を持つことができ、開始タグの中に属性名=”属性値”という形式で記述される。属性は以下の特徴を持

Codestepで学ぶHTML、CSSの模写コーディング （上級編：メディアサイト／グリッドレイアウト)

# 模写サイト

https://code-step.com/media-menu/

Codestepのデモサイト

https://code-step.com/demo/html/media/

[模写したデモサイト](http://abc18717397.php.xdomain.jp/codeStepAdvanced/sample.html)

参考サイト

https://www.webdesignleaves.com/pr/plugins/swiper_js.html

https://www.webdesignleaves.com/pr/jquery/npm_basic.html

しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方

http://www.htmq.com/css3/box-shadow.shtml

### 変更点
– jQuery　を使わない
– スライダーをslick から　swiperへ変更
– レスポンシブデザインはスマホファースト

HTML Canvasのインターフェイスのまとめ #1

HTMLのCanvasを触れ始めたので備忘録として記事に残しておきます。

# 前置き

フロントエンドとかを専門（生業）としているわけではないので、知識や理解が浅い点などはご容赦ください。

# 本記事で触れること

CanvasのfillやlineToなどの各描画のインターフェイスについて触れていきます。画像処理やアニメーション、テキスト関係などは今回は触れません。また、記事にしていて描画関係だけでもかなり長くなったので全ては触れずに記事を分割したりしようと思います（本記事は1つ目の記事に該当します）。

# HTML Canvasって何？（+Canvasの特徴）

– HTMLとJavaScriptを使って描画処理や画像変換などを行える機能です。
– SVGとかでは描画領域が巨大になっても負荷になりにくい（一方で非常に細かい描画で負荷になりやすい）一方でCanvasは描画の範囲が負荷になり、細かい描画とかでは負荷になりにくい特徴を持ちます。つまり描画サイズはそこまで大きくないものの要素が膨大な場合のグラフ描画とかに（SVGよりも）向いています。
– その他ピクセル単位で描画データ

100日後くらいに個人開発するぞ！day023

## 今日は検証ツール(デベロッパーモード)を使ってみた！

## 今日の学び
### Webページ上のHTMLを確認する方法
* 検証ツールを出す方法
* 右クリック＞「検証」を選択
* 「command」+「shift」+「c」
* HTMLを確認する方法
* 検証ツールの左上に表示されてるカーソルアイコンをクリック
* ページに表示されてるHTMLを見たい部分をカーソルで選択

### Webページ上のHTMLを編集する方法
1. 検証ツールで変更したい部分を選択して右クリック
1. 表示されたメニューの中から「Edit as HTML」を選択し編集
1. 編集後に「command」を押しながら「Enter」を押して書き換え

### Webページ上のCSSを確認する方法
* CSSを確認する方法

100日後くらいに個人開発するぞ！day022

## 今日もHTML＆CSS初級編を復習してみた！



## 今日のアウトプット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/082b2

タグの使い方を改めて整理してみた

画像はWEBサイトの中で多く使われておりユーザにとっても重要な視覚情報の1つとなっています。
それゆえ適切な画像の設定がなされていないとページの表示速度が遅くなったり、画像読み込み時にレイアウトがずれるレイアウトシフトが起こるなどユーザにとってストレスの大きいものになってしまいます。

一方で`` なんて基本的なタグでしょ！と思いつつ、様々な環境やデバイスに対応してちゃんと書こうとすると「ん？」となることが多いので備忘として改めて``の使い方を整理していきます。

# ``タグの基本形
`src` を指定することで任意の画像を表示することができます。

“`html

“`

画像が表示できない場合の画像の代替として`alt`を指定します。
これは、スクリーンリーダーを介してページにアクセスするユーザにとって役立ちます。
上記のコードを`alt`指定すると、次のようになります。

“`html

“`

GoogleMapAPIを使って、Webページに地図を表示する

# Google Map APIを使って、Webページにマップを表示させる方法

GoogleMapAPIを利用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。
Maps SDK for AndroidやMaps SDK for IOSといったように端末に応じたAPIがありますが、本記事では、Webアプリ用のMaps JavaScript APIを対象とします。

## 1. GoogleMapAPIKeyの取得
Google Maps APIはGoogle Maps API Keyが必須になります。
Keyの取得方法は他の方が纏めた記事があったので、そちらの方をご参照ください。

## 2. GoogleMapAPIの読み込み
Mapを表示させるために、JavaScriptファイルをHTMLで読み込みます。
方法は2つあり、後者の方を多用していました。

### 2-1. HTMLに直接記述する
「YOUR_API_KEY」に1で取得したKeyをコピペし、ブラウザで表示させるとマップが表示されます。
“`index.html

「Webを支える技術」まとめ（第１部〜第３部）

Webを支える技術のメモ

# 第一章　Webとはなにか

### Webの用途
– Webサイト
* 今みなさんが見ているこの記事や検索サイト、ショッピングサイトなど
– UI（ユーザーインターフェース）
* プリンタやテレビなどの各種デバイスの設定画面
* HTMLによるヘルプの記述
– プログラム用API
* XMLやJSONなど、プログラムで解釈・処理しやすいもの

### Webを支える技術
##### Webを支える最も基本的な技術
* URI（Web上に存在する情報を特定するための識別子）
* HTML（これらの情報を表現するためのXMLをもとにした文書フォーマット）
* HTTP（これらの情報を取得したり発注したりするためのプロトコル）

これらの技術に支えられたWebは情報システムとして**ハイパーメディアシステム**と**分散システム**の２つの側面がある。

##### ハイパーメディア
ハイパーメディア以前のメディア（書籍や映画）は情報を線形的に順に取得（読んだり視聴したり）する。ハイパーメディアはテキストや画像などの様々な情報をハイパーリンクま

100日後くらいに個人開発するぞ！day021

## 今日もHTML＆CSS初級編を復習してみた！


２度目のHTML＆CSS初級編が修了！

## 今日の備忘録

### 入力欄を作る要素
– input要素：入力された１行のテキストを受け取る要素
– textarea要素：入力された複数行のテキスト

seleniumでリンク（aタグ）をクリックできないときの対処

## やりたいこと
seleniumを利用してのウェブスクレイピング。
リンクをクリックしてリンク先へ遷移したいだけなんです。

## できなかったこと
ターゲットとする要素を、文字列指定で特定し、クリック。
しかし、何も起こらず、静かに時を刻むだけ・・・

“`python:
from selenium import webdriver

browser = webdriver.Chrome((r’C:\Users\[ユーザ名]\chromedriver.exe’)
browser.get([目的のURL])

element_target = browser.find_element_by_link_text([ターゲットとする文字列])
element_target.click()
“`
念のため[find_elements_by_link_text]で検索し要素数を確認しても1つだったため、別のお門違いのリンクをクリックしているわけでもなさそう。

「aタグからjavascriptを実行させる」ようになっている場合は、クリックが動作しない場合があるようですが、今回はそのよう

100日後くらいに個人開発するぞ！day020

## 今日もHTML＆CSS初級編を復習してみた！



## 今日の備忘録

### ブロック要素とインライン要素
– ブロック要素：前後で改行が入り、親要素の幅いっぱいに広がる要素
– 例：`

`要素、`

`要素、`

`要素
– インライン要素：改行されない要素
– 例：``要素、``要素

### ボーダー（枠線）をつける方法
– ボーダーを着けたい場合はborderプロパティを用いて太さ・種類・色を指定します
– 定型分：`{bo

4K対応ホームページの制作メモ Part3

こちらの記事の続きとなります。

https://qiita.com/nanakochi123456/items/2a200c2f46e5608740bb

https://qiita.com/nanakochi123456/items/1475e8c4ce7a9d43ad1d

## 書いたばかりなのにいきなり？

それは、かなりひさしぶりのホームページがあるからです。

いらないようで、いらない機能、いわゆる無駄な機能も実装されました。

## 4K対応のCSSとJavaScriptのファイル

– JavaScriptの実態は、ほぼ jQueryです。
– CSS や JavaScript類はすべて結合されています。
– あくまで、現時点でのファイルサイズです。

サーバーがbrotliに対応しているが、配信に使用されていない br ファイルも作成しています。

-総ソースファイル 97ファイル、956,624bytes
-基本CSS 113,878→min化 71,301→7z+gzip 13,044→br 11,712
-基本JS 116,544→min化 40,995