今さら聞けないHTML　2020年06月09日

2020.06.09
OTHER

今さら聞けないHTML　2020年06月09日

目次

1. Lorem Ipsum
2. Lorem Ipsumとは
- - 2.3.1. PythonのライブラリでHTMLのスクレイピングをしてみる

HTMLをテキストファイルに変換する

“`w3m -dump “`
でOK

元記事を表示

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

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

おはようございます
339日目　2h
・ポートフォリオ作成
・PC版作成と背景配置#早起きチャレンジ 2020/06/08 プログラミング(WEBデザイン)学習9日目メモ
# 本日の学習範囲
### 模写コーディング
【無料練習素材】あなたはできる？模写コーディング腕試し！｜東京フリーランス｜note
https://note.com/tokyofreelance/n/n4baf7dd10306
（学習時間：6時間）
## 学習メモ
遅くなったので明日記載
## その他
↓は先日作成したPC画面用がこちら。
![模写コーディング1作目.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647063/ed200f61-28db-a5fa-96e9-4aecfac37d5a.png)
改めて確認したところ、ヘッダー部分のメニューにリンクが付いてなかったので、追加した。
その後、未作成だったスマホ画面用に挑戦した。
![模写コーディング1作目(レスポンシブ).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647063/a4046199-50fa-9452-3229-f86b106ab75

HTML

CSS

レスポンシブ

VSCode

VisualStudioCode

元記事を表示

html2canvasをつかってコラ画像生成アプリをつくってみた

# つくったもの

**[Oicollamaker](https://igg-g.github.io/Oigyu_App/)**（GitHubは[こちら](https://github.com/igg-g/Oigyu_App)）

できました。[明治おいしい牛乳](https://www.meijioishiigyunyu.com/)のパッケージのコラージュ画像を生成できるアプリです。

**Q.**　こんなアプリだれがつかうんですか？
**A.**　知りません。

# なぜつくったか

JavaScriptでDOMを操作する方法を学び、何かをつくりたくなったからです。

# html2canvas

おいしい牛乳のパッケージ部分はHTMLでできています。
そのため右クリックで保存することができません。

もちろんスクショを

元記事を表示

TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～HTML第3回～

# アジェンダ
* HTMLのタグ
* リスト
* ol
* ul
* li
* 定義リスト
* dl
* dt
* dd
* 実践

# HTMLのタグ
## リスト
同類の項目を列挙するのに。リストを使用する。

### ol
順序の関係するリストを示すタグ。
ordered list のol。

### ul
順序の関係しないリストを示すタグ。
unordered list のul。

### li
リストの項目を示すタグ。
上記のolタグ、ulタグと合わせて使用する。
list のli。

## 定義リスト
定義リストとは、「項目名とその内容」を合わせて一つの項目、となっているリストである。

### dl
定義リストを示すタグ。
definition list のdl。

### dt
定義リストの項目のうち、項目名を示すタグ。
definition term のdt。

### dd
定義リストの項目のうち、内容を示すタグ。
definition descript

元記事を表示

TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～HTML第2-5回～

# アジェンダ
* HTMLのタグ
* code
* pre
* 実践

# HTMLのタグ
## code
文書がコンピュータ用語、ソースコードなどであることを示すタグ。

## pre
HTMLファイルに記述された文書を「そのまま」表示させていることを示すタグ。
「そのまま」というのは、本来タグを使用しなければ変化しない書式などを、記載されているそのままに表示させる、ということである。

# 実践
上記のタグを用いて、以下のindex.htmlを作成した。

“`html:index.html

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiu

元記事を表示

ロゴをおしゃれに表示させてみる 4日目【WEBサイトを作る30日チャレンジ】

# ロゴにhoverした際にアニメーションが動くようにする
　・animate.cssを使用します。CDNを利用します。↓
　　https://animate.style/
　　ちなみにCDNのコードをheadに貼り付けてます。コードはこちら↓

“`html
“`

　・WEBサイトは前回作成したものを使います↓
　　https://qiita.com/pontarou194/items/bfab247bc26ed86c47ee

# 完成したアニメーションロゴがこちら

![ezgif.com-video-to-gif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540462/5d8ff719-c939-4646-98a3-b67f3fbb97cc.gif)

# やり方

元記事を表示

よく使う構造化マークアップ

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[【HTML】構造化データチートシート](https://korenarawakaru.com/html/structured-cheatsheet)

## 構造化マークアップとは
ページコンテンツ情報を正確に検索エンジンに伝える専用のコードのこと
[構造化データリッチリザルト | Google](https://developers.google.com/search/docs/guides/search-gallery?hl=ja)

## 基本的な書き方
headタグ内に記述します。
scriptタグを使ってますが、中身はjsonなので、
この中にJavaScriptを書き込まないようにしましょう。

“`html:HTML

“`

## 構造化マークアップコード

### ホームペ

元記事を表示

HTMLにimg要素で画像を表示する 2020年版

基本形

“`html

“`
基本形は非常にシンプルですね。

—

レスポンシブ画像1: srcset属性

“`html

“`
`srcset`属性を使うとRetinaディスプレイ/高解像度ディスプレイに対応した画像を置くことができる。

**参考**

– [レスポンシブ画像 – MDN](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

—

レスポンシブ画像2: sizes属性

“`html

【HTML】position: fixed;要素に対してz-indexが効かない現象
## 問題点
### 青のz-indexの値を赤より大きくしても、重なりの順番が変わらない

## 原因
要素に`position: fixed;`を指定している場合、z-indexの値にかかわらず、その固定させた要素が前面に表示される
## 解決策

– 固定要素よりも前面に表示させたい要素に、`position: static;`を指定
– 固定要素のz-indexを負の値に変更

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

おはようございます
338日目　10h
・ポートフォリオ作成
・タブレット版、PC版作成#早起きチャレンジ 2020/06/07 プログラミング(WEBデザイン)学習8日目メモ
# 本日の学習範囲
（学習時間：2時間）
### ドットインストール
・詳解CSS レスポンシブウェブデザイン編 #01〜#02
### 基本情報技術者テキスト
・特集部分(このあと読む)
## HTML学習メモ
### viewport
Webページの表示領域
`おしゃれなボタンを作ってみる 3日目【WEBサイトを作る30日チャレンジ】
# レインボーに光るボタンをつくってみた
　・前回使用したWEBサイトを活用します
　　https://qiita.com/pontarou194/items/321305d55049022f06ed
　・背景は黒にしました
　・ボタンにカーソルをあわせると、レインボーに光る仕様にしました

# 完成したWEBサイトはこちら

JavaScript 勉強中メモ
・配列に対するfilterメソッド
return true を返すものだけを抽出した配列を返してくれる。
下記例は配列の中から偶数のみを抽出した配列を作成。

“`javascript
const numbers = [1,4,7,6,7,8,3,0];

const num = numbers.filter(number => (number%2 ===0));
console.log(num); //結果[4,6,8,0]
“`

・配列に対するmapメソッド
配列の各要素に対して、それぞれ処理を行った配列を返してくれる。
下記例はそれぞれの値段の税込価格を返してくれる。
Math.floorの中にいれることで、小数点以下を切り捨ててくれる。

“`javascript

const prices = [350, 500, 600, 900]

const updateprice = prices.map(price => Math.floor(price * 1.1));

console.log(updateprice); //　結果[385,55

HTML

CSS

JavaScript

元記事を表示

TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～HTML第2-4回～

# アジェンダ
* HTMLのタグ
* abbr
* cite
* address
* br
* HTMLの属性
* title
* 実践

# HTMLのタグ
## abbr
その文書が略称であることを示すタグ。
後ほど記載するtitle属性を用いると、原語を合わせて示すことができる。

## cite
その文書が特記すべき(固有名詞など?)ものであることを示すタグ。

## address
その文書が住所であることを示すタグ。

## br
改行を示すタグ。記載した箇所で文書が改行される。
\
は使用しない。

(何の紹介もなく、動画内でしれっと使われていた)

# HTMLの属性
## title
略称の原語を示す属性。値には言語を記載する。

# 実践
上記のタグ・属性を用いて、以下のindex.htmlを作成した。

“`html:index.html

Lorem </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>techacademy</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/MakoMakoMakotsu/items/0ecf02b56d70b100ce63'>元記事を表示</a></div> <h3 id="outline__1_3_7"><a href='https://qiita.com/HoRNeT2641/items/d6b967934962c939944f'>CSSだけでハンバーガーメニュー</a></h3> <blockquote><p>本記事ではCSSだけでハンバーガーメニューを実装します。</p> <p>##前提条件<br /> ・javascriptは書かない<br /> ・id属性は使用しない。<br /> ・SCSSで書く</p> <p>とりあえず完成品</p> <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="hornet2641xx" data-slug-hash="oNbXdyR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="oNbXdyR"> <span>See the Pen <a href="https://codepen.io/hornet2641xx/pen/oNbXdyR"><br /> oNbXdyR</a> b</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>scss</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/HoRNeT2641/items/d6b967934962c939944f'>元記事を表示</a></div> <h3 id="outline__1_3_8"><a href='https://qiita.com/kenken9999/items/c349b7c45b1b18a445e3'>超簡単！！Webページを5分でインターネット上に公開する方法</a></h3> <blockquote><p>#はじめに<br /> 今回は、超簡単に自分で作成したWebページをインターネット上に公開する方法を議事録として記録します！<br /> もう知ってるよって方も多いかと思いますが、その辺はご了承下さい:bow_tone1:</p> <p>*※GitHubを使用して公開するので、GitHubに登録する必要があります。*</p> <p>#Webページを公開する流れ<br /> 公開するための手順を説明していきますが、大前提として公開するWebページは完成しているものとします（笑）</p> <p>##GitHubに登録/ログイン<br /> まずは[GitHub](https://github.co.jp/)にアクセスしましょう！<br /> 既にアカウントを持っている場合はそのままログインし、アカウントを持っていない場合はSignUpして下さい。<br /> <img decoding="async" width="1440" alt="スクリーンショット 2020-06-07 15.59.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617337/cd2a9a7e-d55e-f842-d890-7a143d213423.png?test=1&y=n"</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>GitHub</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kenken9999/items/c349b7c45b1b18a445e3'>元記事を表示</a></div> <h3 id="outline__1_3_9"><a href='https://qiita.com/HoRNeT2641/items/fa17de6bf16a236ea6a8'>個人的に勉強になったHTMLマークアップ</a></h3> <blockquote><p>HTML、CSSを書いていて実務に入った時に、フロントエンドエンジニアにレビューで指摘されたことなどとかをまとめていく（ほぼ自分用）</p> <p>##前提条件<br /> ・HTML、CSSの技術書勉強はやった人向け<br /> ・script(vanilla javasccript)は書かない<br /> ・なるべくSCSSでかこう</p> <p>現役のフロントエンジニアからの指摘が怖い…</p> <p>##IDは使わない<br /> よく詰まった時に見る記事とか`HTML`,`CSS`の技術書を見ている時に<br /> idが多用されていることがある。</p> <p>“`html</p> <div id="hogehoge__1"> <div id="hogehoge__2"> <p id="hogehoge__3">pタグの中身</p> </p></div> </div> <p>“`</p> <p>結局実務に入らないと分からなかったし、これはチームのコーディング規則（こーゆーふうに書こうよ！）的なところに依存するかもですけど、僕の師匠はidは指定しないを徹底していて、それに合わせて僕もコーディングしています。</p> <p>`id`でできることは`class`でできるし、`id`で指定してしまうと</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/HoRNeT2641/items/fa17de6bf16a236ea6a8'>元記事を表示</a></div> <h3 id="outline__1_3_10"><a href='https://qiita.com/MakoMakoMakotsu/items/f45ac30cd96a2892f948'>TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～HTML第2-3回～</a></h3> <blockquote><p># アジェンダ<br /> * HTMLのタグ<br /> * blockquote<br /> * q<br /> * HTMLの属性<br /> * cite<br /> * 実践</p> <p># HTMLのタグ<br /> ## blockquote<br /> 引用された文書であることを示すタグ。<br /> 文書全体が引用である際に用いる。</p> <p>## q<br /> 引用された文章であることを示すタグ。<br /> 文書中の一部が引用である際に用いる。</p> <p># HTMLの属性<br /> HTMLの属性とは、タグの補足情報を示すものである。<br /> タグの\<>内に記載する。</p> <p>## cite<br /> 引用元を示す属性。値にはURLを記載する。<br /> cite属性を付加させても、Webページの表示は変化しない。</p> <p># 実践<br /> 上記のタグ・属性を用いて、以下のindex.htmlを作成した。</p> <p>“`html:index.html<br /> <!DOCTYPE html></p> <p><html lang="ja"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>引用の使い方

Lorem Ipsumとは

Wikipe

HTML

初心者

techacademy

元記事を表示

PythonのライブラリでHTMLのスクレイピングをしてみる

# Beautiful Soup
## Beautiful Soupとは
覚えやすいシンプルなAPIが特徴のスクレイピングライブラリです。

[公式](https://www.crummy.com/software/BeautifulSoup/bs4/doc/)

“`python
from urllib.parse import urljoin
from bs4 import BeautifulSoup

#HTMLファイルを読み込む
with open(‘htmlファイル’) as f:
soup = BeautifulSoup(f, ‘html.parser’)

# 取得したい要素のリストをselectで取得する
for a in soup.select(要素）
#取得したい要素を引き出す

“`

# pyquery
## pyqueryとは
pyqueryはjQueryと同じような使い方でHTMLからスクレイピングできるライブラリ。内部的にlxmlを使用しており、高速に処理できる。

[公式](https://pythonhosted.org/pyquery/)

Python

HTML

スクレイピング

初心者

Python3

元記事を表示

関連する記事

Ruby関連のことを調べてみた 2024.06.28

目次 1. Rubyのメソッド（随時更新）2. [Ruby]とりあえずsuperって書いてない？super・super()・super(*)・supe[…]
JAVA関連のことを調べてみた2023年08月25日 2023.08.25

目次 0.1. スッキリわかるJava入門第３版を読んでみて- part15 – Javaを支えるクラスたち0.2. Spring Se[…]
Lambda関連のことを調べてみた2022年06月06日 2022.06.06

目次 1. ローカルにてLambda関数を組む二つ方法まとめ(VSCode,Pycharmなど)2. 【boto3】API Gateway経由で一定時[…]

OTHERカテゴリの最新記事