f@ctor

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

今さら聞けないHTML　2020年09月05日
目次

【備忘録】Chrome拡張機能「Scraper」利用したスクレイピング（ページ内の特定の情報を一括で取得および躓いたポイントまとめ）

記事一覧ページなどで、タイトルやリンク先情報の一覧を一括で取得したい時、
Chromeの拡張ツール「Scraper」を利用してスクレイピング（scraping）して取得する方法の忘備録。

#ScraperをChromeの拡張機能に追加する

![Scraper_Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212038/1f4d9aa8-694b-f168-b047-7d7a3bf75f6e.png)

Chrome ウェブストアにて、「拡張機能を追加」ボタンをクリックして拡張機能に追加する。

Scraper（Chrome ウェブストア）
https://chrome.google.com/webstore/detail/scraper/mbigbapnjcgaffohmbkdlecaccepngjd?hl=ja

#取得例：「つぶやきデスク」導入事例の個別の事例情報を取得したい時

導入事例の企業様名、説明文(description)、ページリンク先を
一括取得して一覧表にする場合の

元記事を表示

【初心者でもわかる】CSSだけでアイコン画像の色を変える方法

# どうも7noteです。cssだけで1枚のアイコン画像を好きな色に変える方法（IEにも対応!!）

IEはどうでもいいから簡単な方法が知りたい方はこちら↓
[IEさえ、、IEさえいなければ・・・こんなに便利な機能が・・・](https://qiita.com/7note/items/9f50834208f361fae3c8)

画像の書き出し方をちょっと工夫することで、1枚のアイコン画像の色をCSSだけで自由に変更できる方法があります。

## 簡単2ステップ

**ステップ1**

画像を書き出す時に、アイコンの形をそのまま画像として書き出さずに・・・

### 『アイコンの形をくり抜いた画像を書き出します!!』

こういう画像ではなくて、
![noamal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/455109ec-8c68-7e94-c052-80f5a9d3e1fd.png)

真ん中が透明になります。（分かりやすいよう少し色を変えてます）

![inversion.png]

元記事を表示

Tsハロトレ15日目　~画像作成のロードマップ~

#HTMLとCSS概要
###HTML　内→外
１．文書構造（マークアップ）
※h1～h4、p、リスト（3種類）、表、画像
２．HTML5.2新要素でセクショニング設定
※header,footer,main,section,article,aside,time他
３．div要素でレイアウトブロックを設定（class名）
４．文法チェック（HTML Validator）

###CSS　外→内
１．リセットCSS（ブロックレベル要素の値を初期化する）
２．クラス名を利用してレイアウトブロックの外側から設定する
３．文字の装飾

ネット上から文章をお借りしてコーディングしていくと勉強

###タグについて
h1はテーマの最優先見出し
pはテーマの要約

“`html

テーマの最優先見出し

テーマの要約

“`

###ボックスモデル
![ボックスモデル2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52695

元記事を表示

BootStrap って，

の文字数 x レイアウト問題の解決にも使える。グリッドシステムがすべてではなかった BootStrap 実装アプローチ

# 社内 SE の陰鬱

フロントエンド，バックエンドの開発分業体制が確立しており，それぞれのスペシャリストが阿吽の呼吸でコラボ。

そこには何一つ，無駄な作業がなく，きわめて合理的な開発プロセスのもと，見栄えはおしゃれ，サーバ側の処理は機敏かつ正確に動くという，理想のシステムが完成していく……

そういう開発現場もあると思いますが，おじさんは，もっと泥臭い環境でシステム開発をしています。

## 「７５点のクオリティ」が好まれる開発現場にて

社内だけで使われる情報システムを開発する，いわゆる，社内 SE の世界にいる人間です。

言葉を選ばず表現すれば，「見てくれは多少アレでも，不具合がなく，長持ちして，将来の業務変化へも追従しやすいシステムを，スピーディに構築」という，**業務実用面でのパフォーマンスが，何より重視される環境**。

買い物で言えば業務スーパー的な。

「あとちょっと，こだわりたかったのに……」

CSS の調整で，もうひと頑張りしたいと思っていたら，次から次へと新しい案件が発生して，**「７５点のクオリティ」を量産リリース**する日々です。

## グリッドシス

サービス終了するブログサイトをwgetコマンドでNetlifyに移行させた話

こんにちは、フリーランスのweb制作者として活動しているしょーごです。

最近は2000年代に無料ブログサービスとして隆盛を誇っていたサービスが相次いでサービス終了を打ち出しています。

![スクリーンショット 2020-09-03 15.12.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/39d9c3e3-7ffc-9941-bbaf-3d5733a8015c.jpeg)

そして、今回移行を担当したサービスも然り。

![スクリーンショット 2020-09-03 14.47.44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/d325b2a6-5b80-822a-2b17-26932a93a2f0.jpeg)

## 案件経緯

先輩「しょーご！高校時代のホムペがサービス終了するみたいなんだ、残せたりしないかな？」

わい「押忍！やってみます！」
![pose_makasenasai

Rails fields_for体系

## How to use
####Overview
formの中で異なるモデルに値を入力したい時に有効的よん。
####Example
Hotelモデルがあります。さらに、Hotelモデルと多対多の関係にあるFeeモデルがあります。これらは、ホテルとホテル予約料金プラン(複数)の関係性ですねー。

ホテル登録フォームがあります。その中には、ホテル予約料金プランを入力するフォームがありますっ。しかし！ここで問題が発生。通常のform_forを使ったフォームではモデルが1つしか設定できません?

そこで！fields_for登場。form_forに親モデルであるHotelモデルを指定。そして、form_forの中にfields_forを作りFeeモデルを指定。あとは、通常と同様にオプションを指定すれば、フォームにデータを入力できる！

(途中)

簡易progate(html)

#はじめに
HTML/CSSを書くときは、`一度コードを書いて後ブラウザで実行する`という作業が必要です。
一連の流れについて、ウインドウを切り替えるのが煩わしい、という人もいるでしょう。
これを解消してみたいと思いました。

Progateをはじめとしたプログラム学習サイトでは、
コードを入力してボタンを押すと、プログラムが実行されます。
これを再現してみれば、一連の煩わしさが解消されると考えました。

本記事では、Ruby on railsを使用して、
HTMLのコードを書いてスイッチを押すと、その同じ画面にそのコードを元にしたビューが現れるプログラムのコードを紹介します。
非常にシンプルで、１００％当初の目標を実現できているわけではありませんが、
このコードを改良すれば目標達成できるものと思っています。

#実行

HTMLは次のように書きます。（Ruby on railsを使用しているので、hamlで書いています。）

“`haml
.header 左にhtmlコードを入力してボタンを押せば、右にその結果が表示されるぞ
.body
.body__left
.bod

em, rem によるフォントサイズ指定を体感してみる

自己紹介

今年の8月末からプログラミングを勉強し始めた初心者です。
たまたま黒澤さん(@kurosawa_kuro)のウェビナー「会津ワロ法則」を受講したことがきっかけとなり、少しずつプログラミングにハマっています。
現在は、HTML/CSSについて学習しているところです。
まるで黒澤さんの弟子にでもなったような気分で、Udemyによる動画学習を楽しんでいます（笑）

この記事の目的

黒澤さんが提唱されている「Qiitaへのアウトプット」を実践するのが、この記事の目的です。
Udemyを受け身で受講するだけでなく、「学んだことを記事として発信する」というプロセスを経ることで、より着実にプログラミングを体得しようという試みです。

今回のテーマ：フォントサイズの単位「em、rem」

今回の記事のテーマは、HTML/CSSにおけるフォントサイズの相対指定です。
というのも、直感的に理解しやすいpxの絶対指定に比べると、em・remを用いた相対指定は、どうしても

【初心者でもわかる】「display:inline-block」の使い分け方はこうだ！！

どうも7noteです。インラインブロック要素の使い方の記事です。

最初から、インラインブロックとして設定されている要素は存在しない、そんな少し変わったインラインブロック要素ですが、使い時や使い方がイマイチまだ分からないという方向けの記事です。

## inline-block要素とは？

インライン要素でもなくブロック要素でもないですが、ちょうどこの二つの間くらいの役割を果たすのがインラインブロック要素です。
インラインブロック要素にする時は、`display: inline-block;`と指定します。

いくつか特徴ごとに、よく使われる場面を紹介します。

## inline-block要素が使われる場面3選

### 1.要素を横並びにさせたい時

“`index.html

  • ボタン1
  • ボタン2
  • ボタン3

“`

“`style.css
li {
display: inline-block;
}
“`

“`
結果↓
ボタン1 ボタン2 ボタン3
“`

通常`

  • `はブロック要

    • Web画面初心者の教育用メモ１

    #はじめに
    会社でWeb画面作成の教育係になった。。ということで教育用メモ
    （社内用の画面のためSEO対策などは不要）

    #Web画面を作るにあたっての基礎知識
    Web画面は基本的なものとして３つの要素から作られる
    　・HTML　　　　…　表示するコンテンツの構造を定義するもの
    　・CSS　　　　　…　表示するコンテンツのデザインの定義
    　・JavaScript　　 …　コンテンツの動きを定義

    #HTMLでできること（私がよく使うもの）
    ・文字の表示
    ・改行
    ・画像の表示
    ・表の作成
    ・コンテンツをグループ化してまとめる
    ・ボタンの表示
    ・クリックにて違う画面に遷移
    ・データを入力
    　セレクトボックス、テキストボックス、ラジオボタン、チェックボックス等
    ・違う画面に遷移するときにデータを渡す
    等

    #CSSでできること（私がよく使うもの）
    ・背景の色を変更
    ・文字の色・サイズを変更
    ・要素のサイズを変更
    ・枠線を変更
    ・位置を変更
    ・表示非表示を変更
    等

    #JavaScriptでできること（私がよく使うもの）
    ・ユーザが入力したデータを参照
    ・テキストデータ書き換え
    ・HTMLの要

    URLのエンコード・デコードするツールを作ってみた

    # URLのエンコード・デコードするツールを作ってみた

    —
    __《目次》__
    [ツールの動作環境](#ツールの動作環境)
    [ツールの概要](#ツールの概要)
    [ソース](#ソース)
    [ソース解説](#ソース解説)

    —

    # ツールの動作環境

    * __OSはWindows10__
    * バージョン：1903(OSビルド18362.1016)

    * __使用ブラウザは以下の3種類で実施__
    * Microsoft Edge
    * バージョン：44.18362.449.0
    * Microsoft Inter

    JavaScriptファイル参照の