はじめに

railsで、リロードする度に見え方が変わる星空を再現してみます

作成したWebアプリにも採用しています。

実行

最初に次のファイルを用意します。

index.html.haml

.sky
.stars

star_sky.css

.sky{
background-color: #014; //黒っぽければなんでもいい
}

次に、星を表すオブジェクトを用意します。

index.html.haml

.sky
.stars
  .star

star_sky.css

.sky{
background-color: #014; //黒っぽければなんでもいい
}

.star{
  border-radius: 50%;
  position: fixed;
  z-index: 0;
  -ms-filter: blur(6px);
  filter: blur(6px);
}

星が一つだけなのもおかしいので、複数表示させます。
また、リロードする度に、数が変わるようにもしてみます。
使用するのはrandメソッドとtimesメソッドです。

index.html.haml

.sky
.stars
  - number = rand(100..200)
  - number.times do
    .star

これだけだと、同じ場所にひたすら100個以上の.starが作られるだけです。
そのため、timesで.starが一つ生成される度に、位置がランダムで指定されるようにします。
それにはCSSを適用すれば良いですが、CSSはHamlのコードにも直接指定できるので、これと変数展開を利用します。

index.html.haml

.sky
.stars
  - number = rand(100..200) //100から200までの間の数字をランダムで
  - number.times do
    - top   = rand(100)
    - left  = rand(100)
    .star{style: "top: #{top}%; left: #{left}%; height: #{size}px;}

次に星の色と大きさを指定します。
折角なので、全て違う色と大きさにしてみます。

index.html.haml

.sky
.stars
  - number = rand(100..200)
  - color  = ["red","blue","green","yellow","purple","white","pink","orange"]
  - number.times do
    - top   = rand(100)
    - left  = rand(100)
    - size = rand(10..20)
    - cnum = rand(0..7)
    .star{style: "top: #{top}%; left: #{left}%; height: #{size}px; width: #{size}px; background-color: #{color[cnum]}"}

これで完了です。
試しに画面をリロードしてみると、星の配置が変わると思います。

今回はほぼrandメソッドを利用しましたが、
頑張って数式を適用すれば、もっと幾何学的で美しい背景を作ることができそうです。

はじめに

2020年3月7日からプログラミングを習い始めました。
　Tech Scool for Change Makers
　https://gs4good.tokyo/
というところに半年間通って勉強します。

html,JavaScript,Pythonなど学ぶ予定です。
プログラミングは全くの初心者です。
Pythonがprintと書くことだけは知っていました。

ここでは自分の復習のため、あとQiita投稿に慣れるため
TSfCMの授業メモと学びを書いていきたいと思います。

3/7の教科書
https://qiita.com/njn0te/private/4523e08aa93672e4dda5?fbclid=IwAR0gfUWGfZ2WIMlyTY0oKXTa0KFnYCpgKJ05q0exVqI01DNt5orguhRGkG4

OSはWindows10

登場人物など

ツール

スクリプトを書く　→　GAS（グーグル・アップス・スクリプト）
プログラミングを書く場所（エディター）　→　Visual Studio Code

スクリプトの連携先　→　LINE Nortify

マークアップ式メモ帳　→　Stack Edit

言語

JavaScript
html

Node.js = サーバサイドJavaScript

デプロイ方法

GAS
now

そもそも

そもそもデプロイとは

"ソフトウェア開発の工程のうち、開発した機能やサービスを利用できる状態にする作業を指す語として用いられています。"
https://www.weblio.jp/content/%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4
weblio辞書より

JSONとは

ZEIT now

https://dev.classmethod.jp/server-side/serverless/zero-configuration-zeit-now/
"一言でいうと、シンプルで簡単にそして高速なデプロイを実現するPaaSです。
極端な話をすると、nowと打つだけでデプロイが完了するくらいに簡単です。
他のPaaSと同様に、Node.js、Python、Goといった様々な言語が使用できフロントエンド、バックエンドのデプロイが可能です。
またデプロイ時に固有のURLが発行され、HTTPSのアクセスが可能です。"

やったこと①

GASを使ってLINEと連携させる！

体験学習のときの復習。天気APIを取得してLINEで通知

応用編：Slackと連携させる

やったこと②

nowのインストール

nowとは

https://dev.classmethod.jp/server-side/serverless/zero-configuration-zeit-now
一言でいうと、シンプルで簡単にそして高速なデプロイを実現するPaaSです。
極端な話をすると、nowと打つだけでデプロイが完了するくらいに簡単です。

他のPaaSと同様に、Node.js、Python、Goといった様々な言語が使用できフロントエンド、バックエンドのデプロイが可能です。
またデプロイ時に固有のURLが発行され、HTTPSのアクセスが可能です。

インストール方法

1 .Visual Studio Code？のTerminaiにて下記実行

$ npm install -g now
$ yarn global add now
$ now login
$ now

し・か・し、npmが使えなかったため下記参考に

2.Node.jsのインストール

https://qiita.com/taiponrock/items/9001ae194571feb63a5e

3.yarnもインストール

4.ZEITサインアップ

"Production: https://**********.now.sh
と出ていれば成功です。URLをブラウザで開けるか確認してみてください。そして、開けていたら、Twitterで、「初めてのデプロイ #駆け出しエンジニア #TSfCM #初日」などと呟いてみましょう！"
↑ここまではできてつぶやいてもみたけど

次のGithubでコード更新できなかった

やったこと③

Githubへコードを上げる

gitのインストール
　https://gitforwindows.org/

ここでも上げれたように見えて、実態ファイルがなかった

先生にがんばっていただいてVSコードのterminalでいろいろ
そのhistory
1 git init
2 git add .
3 git commit -m "first commit"
4 git remote add origin https://github.com/honasa21/tsfcm_01.git
5 git push -u origin master
6 git init
7 git commit -m "second commit"
8 git add.
9 git add .
10 git push -u origin master
11 git init
12 git add .
13 git commit -m "first"
14 git push -u origin master
15 git remote add origin https://github.com/honasa21/firstGit.git
16 git push -u origin master
17 history
18 now

nowはVSコードからだとエラーになるのでcmdから実行
　C:\Users\”※姓名”\Desktop\DAY1_20200307の階層

知ったこと

HTML書き方

CSS

JavaScript

デプロイの仕方

プログレッシブ・エンハンスメント

重要度
　html > css > JavaScript

なぜ？？
https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%AC%E3%83%83%E3%82%B7%E3%83%96%E3%82%A8%E3%83%B3%E3%83%8F%E3%83%B3%E3%82%B9%E3%83%A1%E3%83%B3%E3%83%88
"プログレッシブエンハンスメントは、核となるコンテンツを最重要視するウェブデザイン戦略である。
この戦略では、エンドユーザーのブラウザーやインターネット接続に合わせて、プレゼンテーション面や機能面で微妙に異なる内容や技術的に困難な内容をコンテンツに漸次追加していく。
この戦略の利点として挙げられるのは、すべてのユーザーが任意のブラウザーまたはインターネット接続を用いてウェブページの基本的なコンテンツと機能性にアクセスできることと、
より高度なブラウザーソフトウェアまたはより広帯域の接続を有するユーザーには
同じページの拡張バージョンを提供できることである。"

よく使うけど、いつもググってるので、まとめました。

3番目のみ

style.scss

li:nth-child(3){
  margin-bottom: 20px;
}

2の倍数のみ

style.scss

:nth-child(2n)

奇数

style.scss

:nth-child(odd)
:nth-child(2n+1)

偶数

style.scss

:nth-child(even)
:nth-child(2n)

最後以外

style.scss

li:not(:last-child) {
    margin-bottom: 20px;
}

最初と最後のみ

style.scss

.wrap > li:first-of-type,
.wrap > li:last-of-type {
   margin-bottom: 20px;
}

最初と最後以外

style.scss

.wrap > li:nth-child(n+2):nth-last-child(n+2)  {
   margin-bottom: 20px;
}

最後の要素以外に擬似要素

style.scss

div > span:not(:last-child):after{
  content:",";
}

pタグの直前後にulがある時のみ適応(隣接関係)

style.scss

p + ul {
  margin-top: 50px;
}

pタグの直後にある要素がulタグじゃなかった場合はstyleが指定されない

親要素の直接の子要素飲みに適応(親子関係)

style.scss

p > ul {
  margin-top: 50px;
}

.main と .textどっちのclassも持ってる要素を指定

style.scss

.main {
 &.text {
   margin-top: 50px;
 }
}

単純にclass名の追加→.main_textを指定

style.scss

.main {
 &_text {
   margin-top: 50px;
 }
}

target="_blank"のついた要素にstyleを指定

style.scss

.button a[target="_blank"]::after {

}

ちなみに、タグに「target=”_blank”」を付与する場合「rel=”noopener”」を付けた方がいいらしい。

classを持ってないpタグを指定

style.scss

 p:not([class]) {
}

divタグ配下の全ての要素にstyleを適応

style.scss

 div * {
 margin: 10px;
}

世が令和になっても歴史は繰り返されます。
[CSS] CSSで作る印影（印鑑、ハンコ、判子）っぽいもの と同じような経緯から CSS ハンコを作成することになりました。

やはり要望は多くはないと思いますが上記記事とは別パターンでの CSS ハンコの作成方法ということで記しておきます。

See the Pen eYNyrEd by ari3der (@ari3der) on CodePen.

特に特殊なことはしていないと思いますがせめてハンコの大きさに応じて font-size がいい感じになるようにだけ調整しました。

hanko.html

<div class="hanko">
  <span>営業1課</span>
  <hr noshade>
  <span>2020/03/01</span>
  <hr noshade>
  <span>たかし</span>
</div>

hanko.scss

$hanko-size: 100px;
.hanko {
  font-size: 16px * ($hanko-size / 100px);
  border:3px * ($hanko-size / 100px) double #f00;
  border-radius: 50%;
  color: #f00;
  width: $hanko-size;
  height: $hanko-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  hr {
    width: 100%;
    margin: 0;
    border-color: #f00;
  }
}

cssだけで行数の指定をするやり方
①2行以上の時は文字を非表示にする
②2行以上の時は二行目の最後に三点リーダーをつける

※jsでもできます。
②のやり方だとIE11非対応です。(多分)

index.html

<p class="line_wrap">テキストの文章を2行を超えたら表示したく無いです。且つ、レスポンシブ対応にしたいです。</p>

①2行以上の時は文字を非表示にする

style.css

.line_wrap {
  overflow: hidden;
  height: 3.6em /* 2em（行）x line-heightの1.8 */
  font-size: 16px;
  line-height: 1.8;
}

表示したい行数 * line-height
をheight（単位em）にしてoverflow:hiddenするだけ。
3天リーダーはありませんが、2行以上の場合は文字が表示されません。

②2行以上の時は二行目の最後に三点リーダーをつける

style.css

.line_wrap {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

2行以上の場合はちゃんと三点リーダーが表示されます。(レスポンシブ対応)

どちらがいいかはお好みで。

参考サイト

https://coliss.com/articles/build-websites/operation/css/css-line-clamp-property.html

時間がない人は一番下の「使った感想」までジャンプ！

これはなに

Svelteでemotion(CSSinJS)を試したので備忘録

CSSinJSってなに

CSSをJSで書きますよ〜という概念。
詳しいメリットは後述しますが、ざっくりいえば下記な点より支持されています。

• スコープのないCSSにスコープを付与できる
• 変数・関数がJSとCSSで同じものが使える

主にスタイルにスコープを持てないReactで使われています。
emotion,styled-compornentなど、ライブラリも豊富です。

書いたコードはインラインやCSSファイルとしては吐き出されず、DOMのトップに直接追加されます。

メリットざっくり

• インラインではなく、実際のCSSを生成する
• SCSSより軽いらしい ライブラリ容量：emotion:8.9kb
• JSの変数・関数がそのままCSSに使える（後述）
• CSSにスコープを付与できる
  • ただし今回の場合、Svelte自体がスコープを持っているため、特別なメリットではない

デメリットざっくり

• SASSと書き方の異なる部分があり、デザイナーがスタイルを書く場合は学習コストあり
• mixinなど、SASS独自の機能は当然使えない
• mixinできた

検証したFWについて

emotionを検証しました。
emotionはFWに依存しないCSSinJSのため、公式のブログでもサンプルコードが掲載されています。
（CSSinJSといえばstyled-components一択感はあるが、React依存）
記事

---

検証

ここからは実際の使い方の説明です。

スタイルの指定

• htmlタグ内ではclassを{}で囲むと適用される
• <script>タグ内にconst hoge =で指定
• importするときはexport const hoge =にしてね
• タグ付きテンプレートリテラルで記述（バッククオーテーションで囲む）

どうやってCSS書くの

CSSinJSだと、文字通りJSでCSSを書くため、
margin-bottomはmarginBottomになったり、
ハイフンではなくキャメルケースで書きます。

それがJSXの中でインライン記法のように書けるCSS propといいます。

   const style = css({
    marginBottom: '16px',
    borderRadius: '4px',
  });

いつものCSSと書き方が異なり書きづらいよ〜という人のために、
タグ付きテンプレートリテラルを使えばいつも通りのCSSの書き方になります。

  const list = css `
    background: ${Color.BaseColor};
    margin-bottom: 16px;
    border-radius: 4px;
  `

ただし、SvelteではCSS propは書けないっぽい　（JSXだし？）

コード　サンプル

変数はそれだけでまとめるとよさそう

Color.js

export default {
 BaseColor: '#FFF',
 KeyColor: '#444',
 SubColor: '#ececec'
}

こうやって呼び出す

sample.svelte

<script>
  import { css } from "emotion";
  import Color from "../../apps/style/Color.js";

  const list = css `
    background: ${Color.BaseColor};
    margin-bottom: 16px;
    border-radius: 4px;
  `
</script>

<li class={list}>
  <span class={icon}>
    <Label {type} />
  </span>
</li>

const list = css ~でスタイルを定義すると、
templateの方でclass={list}で適用されます。

この時classはcss-#ハッシュ値で出力されます。
rollupで消せないかな？ できないらしい＞＜

styled-compornent風に、styled.h1 =のように、
const list = css.liでタグの指定はできない

NGな書き方1

<script>
  import { css } from "emotion";

  export const List = css.li `//タグをこっちで指定
    background: ${Color.BaseColor};
    margin-bottom: 16px;
    border-radius: 4px;
  `
</script>

<List>
  <Icon>
    <Label {type} />
  </Icon>
</List>

タグを指定できるメリットとしては、

• 純粋にコンポーネント名だけでかけるのでスッキリする
• h1、h2、spanとpなどがスタイル側で指定できる

があるけど、
前者はtemplate部分だけでhtml構成が判別できないデメリットもあるし、
後者はスタイル側で指定しなくてもいいと思うので、
かけなくても問題はない

https://qiita.com/totto357/items/4ab2c4cabe2a087da208

Media Queries

Base.js

//メディアクエリ
export const breakpoints = [480, 768, 980, 1200]//ブレイクポイント
export const mq = breakpoints.map(
  bp => `@media (min-width: ${bp}px)`
)

呼び出すとき

  import { mq } from "../../apps/style/Base.js";

  //コンテンツ幅の980pxで切り替える
  ${mq[2]}{
    display: block;
  }
`

keyframe Animation

//keyframesを指定する
import { css,keyframes } from "emotion";

//アニメーション
//keyframesを先に書かないとエラー
const heightAnimation = keyframes `
 from {
   opacity:0;
  }
  to {
   opacity:1;
  }
`;

const searchBlock  = css `
  display: none;
  //ちゃんとハッシュ値でセットされる
  animation: ${heightAnimation} ease-in .3s;

  //レスポンシブ
  ${mq[2]}{
    display: block;
  }
`

mixin

export function square(val , key) {
  return {
    width: val,
    height: key,
  };
}

const regularStyle = css`
  ${square('24px','12px')}
　background: hotpink;
`;

propsを直接スタイルで指定して出し分ける方法

やりたかったこと

• propsでわざわざclassNameを指定しなくてもいいので、スタイルのためにコンポーネントを増やさずに済む
  • jQueryでは、onClickでclass名を付与->そのclass名の分だけコンポーネントを追加で作るイメージだった
  • propsでprimaryという値を渡せば、１つのコンポーネントの中でスタイルの出しわけができる
  • 参考

できたこと

jsの配列をCSSに直接指定

  let attr = {
    none: {
      caption: "",
      fontColor: "red"
    },
    place: {
      caption: "ほにゃほにゃ",
      fontColor: "orange"
    },
    image: {
      caption: "ふがふが",
      fontColor: "blue"
    }
  };

export const title = css `
  color: ${attr[type].fontColor};
  font-size: 2rem;
`;
</script>

<ICon {type} />
<label class={title}>{attr[type].caption}</label>

今までは、JSとSASSで変数を二重管理する部分があったので、管理が一元化できてよい
（slickのブレイクポイントとかね）

できないこと

propsでCSSを直接出し分けること。これが本当にやりたかった＞＜
これができると、状態ごとに毎回classを1つ追加する手間が省けて、コード量が減らせる。

例えば、<a class="btn">というDOMにprimaryという状態を付与する場合、
btnクラスの他にis-primary{foo: bar;}；のclassを新しく付与していた。

CSSに直接propsを渡せる場合、下記のコードのように、
btnクラスの中でprimaryが渡った場合のみ、必要なコードを動的に付与できる。
'@emotion/core'を入れると使えるけど、React依存のようだ。

<script>
  const btn = css `
    //backgroundがpropsで渡ってきた色に変更、初期値はgreen
    background: ${props => props.background || "green"};

　　//primaryのpropsが渡ったら、btnにプロパティを追加
    ${props => props.primary && css`
      padding: 1em;
      margin: 1em;
      color: purple;
    `}
</script>

<p>
 <a class={btn} {primary}>
  test
 </a>
</p>

単純に書き方が違うだけかもしれないので、
良い書き方があればアドバイスほしいです！

使った感想

意外と使えそう

公式で言っている通り、SvelteのCSSと併用する前提になってはいるものの
mixin的使い方も可能なので、十分使えそうです。
デザイナーが使う場合、学習期間は設けるとよさそう。

GOOD

• 親コンポーネントと子コンポーネントで同じclass名を指定してもスタイルはあたらない
• mixinもいける
• JS側と変数を共有できるのは嬉しい
  • slickのブレイクポイント、カラー変数など、２重管理が防げる

BAD

• emotion公式のGlobal Stylesは使えない
  • installの必要な'@emotion/core'がreactでしか動かないのが諸悪の根源
  • Globalなclassを使う場合、CSSの外部ファイルとしてimportする
  • またはSvelteのGrobalとして指定する　Using CSS-in-JS with Svelte
• VSCodeにEmmetがない？
• Svelteがそもそもスコープを持っているので、擬似スコープのうまみはない

デザイナーができそう？できない？

良いか悪いか、SvelteのCSSinJSは特有の複雑さが出てこないので、デザイナーでも慣れればOK
（「できないこと」であげたpropsを直接渡す、はグラフィック寄りのデザイナーはしんどいかも）

検証ポイント早見表

検証項目	結果	一言
親子コンポーネントで継承できるか	△	importするかpropsでclassの付け替え
.svelteファイル、外部ファイルとしても使えるか	○	コンポーネントまたいだスタイルは外部ファイルimport
グローバルで当てられるか	○	jsファイルをimport
レスポンシブ（SP,PC)	○	MediaQuery
keyframe animation	○
mixin	○
スタイルに直接propsが渡せるか	△	直接は渡せないので、変数・配列としてclass名を渡す、とかになりそう

参考

emotionを使ったCSS-in-JS
emotion - フレームワークに依存しない洗練された CSS-in-JS
CSS-in-JSのライブラリとして「emotion」を選択している理由

viewport

ブラウザで表示されている領域です。vhとvmがあります。
vhは高さでvwは幅です。

vh

1vhと指定した場合は、ブラウザで表示される高さは1%です。つまり、ブラウザで表示されている高さが、1000pxなら 10vhだったら100pxとなります。

vw

1vwと指定した場合は、ブラウザで表示される幅は1%です。つまりブラウザで表示されている高さが、1200pxなら 10vwだったら120pxとなります。

%とViewportの違い

%（パーセント）は、親要素に依存します。
viewport（vh、vm)は、ブラウザの表示されている領域に依存します。
要素をページの高さいっぱいに配置する場合は、100vhを使い、要素のページの横幅いっぱいに配置する場合は、100%を使うのが多いです。

calc関数

CSSで四則演算（+,-,*,/）を行うことができます。
【例】

.top {
    width: calc(100vh - 300px);
}

全体の高さが、1000pxだった場合.topのwidthは700pxとなります。使うメリットとしては異なる単位同士での計算が可能になります。
【例】

/* wrapperは親要素とします */
.wrapper {
  background-color: #d9ead3;
  height: 700px;
  width: 100%;
  display: flex;
}

div {
    width: calc(100% / 3);
}
/* 以下のセレクタは.wrapperの子要素です */
.left {
    background-color: #c9daf8;
    height: 200px;
}

.center {
    background-color: #ea9999;
    height: 200px;
}

.right {
    background-color: #fff2cc;
    height: 200px;
} 

上記のように記述するとひとつひとつの子要素に記述しなくても親要素に記述するだけで均等にしてくれます。

テックコミットさんのお年玉企画でTecpitさんの「【Go】技術ブログサイトを自作してみよう！」を試してみましたので、情報をまとめて見ました！

自分の知識

GoはTour of Goを一度なぞった程度

完成物

https://damp-journey-45035.herokuapp.com/

教材の概要

マークダウンに対応した、記事投稿システムです

この教材で学べる知識

• echoでサーバーたてる
• Modulesでモジュール管理
• pongo2
• sqlx
• goose(マイグレーションツール)
• freshでホットリロード
• basic認証のかけ方
• 多対多のリレーション
• herokuデプロイ

※Goの文法自体の説明はありません！

教材の注意書きにもありますが、Goの文法自体の説明はありません！
そこらは抑えている前提で話が進みます

感想

Goの文法はわかったけど、実際どうやって組み立てていくの？って人にはかなりいい感じの教材だと思いました。
またコードの随所に何をやっているのかという説明が記載されているのもとても分かりやすかったです。
難点をあげるとすれば、HTML、CSS、JavaScriptのパートが多かった気がします。。。プロダクトの性質上仕方ないのですが。
とはいえ、Go楽しかった！

教材をありがとうございます
TechCommitさん
Tecpitさん

これです↓
https://toshiki89.github.io/suzuki-toshiki./suzukitoshiki.html

はじめに

現在、大学3年生で未経験からエンジニアを目指して就職活動中です。

昨年の12月、１ヶ月間携帯アプリでProgateを一通り触り、
2月に入ってからMacでVisual Studio Code(VS Code)で
コードを書きはじめ、Githubアカウントを作成し、WEBページを公開しました。

理解できたこと

【html】

①

このコードでSNSのURLを呼び出すこと。

②

githubにアップロードした画像を載せる時は自分のアカウントURL(https://toshiki89.github.io/suzuki-toshiki.)　の後に画像のファイル名　(/657264B1-F3FB-41F0-AD52-C68F1BA43E94_1_201_a.jpeg)
を書くこと。

③

で

と表示でき、クリックするとリンク先を開けること。

【css】

①object-fit: cover;
で画像の中心部をトリミングできること

理解できていないこと

【html】

①
　　
で

上の画像のように・と文字の間に変な隙間があくこと。

【css】

①

携帯電話でページを開くとこのように画像が半分になること。

②

ここで color:skyblue;
としているが、

上の画像のように紫色で表示されること。

これから

PHP ruby 等で機能を追加し、このページを更新していきます！

100日チャレンジの258日目

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

おはようございます
258日目
・過去につくった自作ポートフォリオ改造#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 9, 2020

学習内容

• BeautifulSoupによるスクレイピング
• CSSセレクターの記述法

BeautifulSoupによるスクレイピング

HTMLやXMLから情報を抽出し解析を行うライブラリ。ダウンロード機能はないので、urllibと併用して使う。

以下、BeautifulSoupの基本的な使い方

# ライブラリのインポート
from bs4 import BeautifulSoup

html1 = """
<html><body>
    <h1>スクレイピング</h1>
    <p>Webページの解析</p>
    <p>任意の箇所の抽出</p>
</body></html>
"""

# HTMLの解析
soup = BeautifulSoup(html1, 'html.parser')

# 任意の要素を抽出
h1 = soup.html.body.h1
p1 = soup.html.body.p
p2 = p1.next_sibling.next_sibling

print(h1.string)
print(p1.string)
print(p2.string)

実行結果

スクレイピング
Webページを抽出
任意の箇所の抽出

BeautifulSoupとurllibの併用によるスクレイピング

# ライブラリのインポート
import urllib.request as req
from bs4 import BeautifulSoup

url = "https://api.aoikujira.com/zip/xml/1500042"

res = req.urlopen(url)

# urlopen()で取得したデータを解析
soup = BeautifulSoup(res, 'html.parser')

ken = soup.find("ken").string
shi = soup.find("shi").string
cho = soup.find("cho").string

print(ken, shi, cho)

参考文献

参考にした書籍から公開されているGitHubを添付しておきます。
増補改訂Pythonによるスクレイピング&機械学習 開発テクニック

学習内容

• BeautifulSoupによるスクレイピング

BeautifulSoupによるスクレイピング

HTMLやXMLから情報を抽出し解析を行うライブラリ。ダウンロード機能はないので、urllibと併用して使う。

以下、BeautifulSoupの基本的な使い方

# ライブラリのインポート
from bs4 import BeautifulSoup

html1 = """
<html><body>
    <h1>スクレイピング</h1>
    <p>Webページの解析</p>
    <p>任意の箇所の抽出</p>
</body></html>
"""

# HTMLの解析
soup = BeautifulSoup(html1, 'html.parser')

# 任意の要素を抽出
h1 = soup.html.body.h1
p1 = soup.html.body.p
p2 = p1.next_sibling.next_sibling

print(h1.string)
print(p1.string)
print(p2.string)

実行結果

スクレイピング
Webページを抽出
任意の箇所の抽出

BeautifulSoupとurllibの併用によるスクレイピング

# ライブラリのインポート
import urllib.request as req
from bs4 import BeautifulSoup

url = "https://api.aoikujira.com/zip/xml/1500042"

res = req.urlopen(url)

# urlopen()で取得したデータを解析
soup = BeautifulSoup(res, 'html.parser')

ken = soup.find("ken").string
shi = soup.find("shi").string
cho = soup.find("cho").string

print(ken, shi, cho)

参考文献

参考にした書籍から公開されているGitHubを添付しておきます。
増補改訂Pythonによるスクレイピング&機械学習 開発テクニック

HTMLの大枠

HTMLの大枠にはheader/div/footerなどがあります。
【例】

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Qiita</title>
  </head>
  <body>
    <header>
    </header>

    <div class="contents">
    </div>

    <footer>
    </footer>
  </body>
</html>

＜header＞...＜/header＞

ヘッダーを示す専用の要素です。

＜div＞...＜/div＞

classセレクタを付与して使用します。

＜footer＞...＜/footer＞

フッターを示す専用の要素です.

heightプロパティ

要素の高さを決めるプロパティです。px数や%などで指定することができます。

widthプロパティ

要素の幅を決めるプロパティです。px数や%などで指定することができます。
【例】

.contents {
  height: 400px;
  width: 960px;
}

これで高さと幅を指定できます。
プロパティはいろいろあるのでその時々で調べながらやっていきましょう
参考

img要素

img要素を使うと、Webサイトで画像を表示させることができます。画像がどこにあるのかという場所を指定するsrc属性、画像が表示されなかった場合に代替テキストなどを表示するためのalt属性を指定して使います。
【例】

<img src="image.jp"alt="imagename"class="contents"

form要素

お問い合わせフォームなどを表すブロック要素です。

input要素

フォームの入力欄や実行ボタンなどを作成することができる要素です。input要素にはtype属性があり、それを指定します。

type属性	用途
text	１行のテキスト入力欄を作成します
checkbox	チェックボックスを複数作成することができます
radio	複数の中から１つしか選択できない、ラジオボタンを作ります
submit	送信ボタンを作ります

textarea要素

複数行のテキスト入力欄を作成する要素です。

value属性

送信ボタンを押したときに、どの値が送られるのかを決めることができます。

placeholder属性

入力フォームに仮の文字列を入れることができます。

label要素

フォームのtype属性、例えばラジオボタンとテキストをlabel要素で囲むことによって、文字の部分をクリックしたときもラジオボタンを選択することができます。

select要素

フォームの選択メニューを表す要素です。選択肢全体を囲みます。

option要素

メニューの選択肢を作成するときに使用します。option要素で指定する選択肢は、select要素の間に記述します。
【例】

        <form>
          <input type="text" placeholder="文字の入力"><br>
          <textarea placeholder="複数行の文字"></textarea><br>
          <label>
            <input type="radio" name="RadioGroup" value="0">男性
          </label><br>
          <label>
            <input type="radio" name="RadioGroup" value="1">女性
          </label><br>
          <select>
            <option value="0">20才未満</option>
            <option value="1">20才以上</option>
          </select>
          <div class="contents">
            おはようございます<br>
            <label>
              <input type="checkbox" name="Checkbox" value="0">
                こんにちわ
            </label>
            <label>
              <input type="checkbox" name="Checkbox" value="1">
                おやすみ
            </label><br>
          </div>
          <input type="submit" value="送信">
        </form>

シリーズ

Progate無料版をやってみる【HTML & CSS 初級編】#1

第13章から

前回の続きになります。

ヘッダーの構造

・特記事項はないので即演習へ

・演習

プレビューも見本もなんでこんなにちっちゃいの？ｗ
→初期表示している画面のサイズが悪いかも。全画面にしたり縮めたりしていたらある程度大きくなった。

header-logoとheader-listのクラスを参照した意味は・・・？

ヘッダーのレイアウト

・横並びを実現するにはfloatプロパティ。ぐぐったら「浮く」ってでてきた・・・。

・演習


たしかに横並びに

ヘッダーの余白

・余白を作りたい場合はpadding。要素の外側にスペースが開くイメージ。内側らしいｗ

・演習

余白があるほうが見た目がいいですね。

フッターの構造

・CSSに「.header-list li」と定義することで、「クラス=header-listの下層のli要素に対して」という意味になる。
JavaScriptで要素を取得するときに、よく上記のような要素を限定するセレクタ指定が出てきた

・演習

フッターのレイアウト

・左寄せと右寄せ→float leftとright

・演習
やばい、そろそろ写りきらない

メインのレイアウト

・文字列内の一部にCSSを適用させたい場合は<span>を使用するとのこと。意識したことなかったなぁ。お決まりなんでしょうか。
・ブロック要素とインライン要素。
　ブロック要素　→　div,h1,p
　インライン要素　→　span,a

・演習

コンテンツの構造

・演習
即演習。また、ソースが冗長になってきたため、一部しか結果載せません。

ボーダー

・罫線を引く。borderを使用する。
　「border: 太さ 種類 色 」でいっぺんに定義できる。

paddingとmargin

・paddingはborderの内側。
・marginはborderの外側。
・HTMLのすべての要素にはborderがあり、それの内側がpaddingで外側がmarginとのこと。
→初めて知った・・・。

・演習

だんだん見た目が良くなってきた！
ホームページ等を自作するときに参考にできそう。

お問い合わせフォームのレイアウト

以下のようなフォームを作成する

・演習

淡々と進めます

お問い合わせフォームのレイアウト（2）

・入力するためのタグがでてくる。inputやtextarea等・・・。
・CSSはカンマ区切りで定義することで、それらに同じスタイルを適用できる。例：h1,p { color: red; }

・演習

ここまでだったらまだ全然できる・・・と思う。

あ、なんか初級編おわった。

総括

・業務である程度触っていたので、サクサクとは進められた。
・業務でフワフワと使用していた技術が、少しだけ理解が深まった。
　→「すべてのHTML要素にはborderがあり、borderの内側がpaddingで外側がmarginである」は勉強になった！
・自分でHTMLのレイアウトを作成するときって何から手を付けて、どのタグを使用すればいいのかわからなかったが、本レッスンを参考にしていきたいと思う。

次回はHTML&CSSの中級編をやっていきたいと思います。
20200310追記
有料の為、受講しませんでした。
その代わりJavaScriptのレッスンをやり始めました。
次回

後から読み返してみて・・・

演習結果だけ貼っていると、超わかりにくいですね・・・
もし見てくれる方がいましたら、その時は自身もProgateをやりながらがいいかもしれません。

HTML

ウェブサイトに表示される情報です。

css

HTMLに記載された情報を装飾する機能です。

head要素

ウェブサイトの情報や、参照するCSSファイルを記載する部分です。記述した情報は画面上には表示されません。

body要素

画面上に表示したい情報を記載します。
HTMLはタグで囲みます。例えば

記述する内容となります。終了タグには「/」を必ず入れます。

<!DOCTYPE HTML>

HTML文章であることを宣言する要素です。

＜html＞...＜/html＞

HTML文章の始まりと終わりを示す要素です。

＜span＞〜＜span＞

＜span＞～＜/span＞で囲った部分をインライン要素としてグループ化することができるタグです。

＜meta＞

文章に関する情報を指定する時に使用します。charset="UTF-8"は文字コードを指定するもので、この記述が無いと文字化けしてしまいます。
【例】

<meta charset="UTF-8">  #閉じタグはないです

＜title＞...＜/title＞

ウェブサイトのタイトルを記述する場所です。
【例】

<title>Qiita</title>

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Qiita</title>
  </head>
  <body>
  </body>
</html>

上記みたいな感じです。

head要素からCSSを呼ぶ

head要素内に、HTMLとペアになるCSSのファイルを指定します。
【例】

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Qiita<</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>

上記でstyle.cssを呼び出せるようにしました。
＜link rel="stylesheet"＞でCSSファイルを指定し、hrefには実際のファイル名を記載します。hrefはリンク先の場所を指定します。

body要素の中身の記述

【例】

〜省略〜
 <body>
    <h1>
      おはよう
    </h1>
    <p>
      こんにちわ
    </p>
    <b>
      おやすみ
    </b>
  </body>
〜省略〜

上記で記述した文字が出ます。

＜h1＞...＜/h1＞

文章の見出しを指定します。＜h1＞...＜/h1＞で囲むと文字が太く大きく表示されます。h1〜h6まであり、h1が一番大きくh6になるにつれ文字が小さくなります。

＜p＞...＜/p＞

文章の段落を表します。

＜b＞...＜/b＞

文字を太くします。

ブロックレベル要素

ウェブデザインにおける箱となる要素の事をです。＜h1＞...＜/h1＞や＜p＞...＜/p＞はブロックレベル要素です。

インライン要素

主には文字の修飾です。＜b＞...＜/b＞インライン要素です。

cssの記述

基本の形はセレクタ { プロパティ: 値; }となります。
【例】

style.css

p {
  color: red;
}

上記の記述でp要素のこんにちわの色が赤になりました。もしp要素が他にも記述してあったら全ての要素が適応されます。

class属性

要素に対して名前がつけられます。
【例】

<p class="top">
  おはよう
</p>

classセレクタ

class名をセレクタとして使用することができます。記述するときは.クラス名で指定します。
【例】

.top {
  color: red;
}

これでp要素内のclass="top"の色が赤くなります。

id属性とidセレクタ

【例】id属性

<p id="top">
  おはよう
</p>

さっきと違うのはclassがidになっています。
【例】idセレクタ

#top {
  color: red;
}

さっきと違うのは.が#になっています。
classとidの使いはclassは同じクラス名を複数回使えます。idは複数回使えないので、重要なところに使う感じです。