html　基本パーツ

今回はhtmlを初めて触ったので基本パーツとかを簡単にまとめて行こうかなと思います。
参考資料はudemyの[The Web Developer Bootcamp](https://www.udemy.com/course/the-web-developer-bootcamp/)コースです。
#簡単パーツ
###h タグ
“`html

h1 tag

h2 tag

h3 tag

h4 tag

h5 tag

h6 tag

“`

###p タグ
“`html

p tag

“`
カブトムシを様々な種類にトランスフォームさせたくなったときの簡単なTIPS

###【 完成形 】

See the Pen
MWKXrmO by daisukeibi (@daisukeibi)
on

個人アプリ作成＃１

# 雛形の作成
rails バージョン　new app名　-d MySQL　で作成

Git hub Desk topと連携してコードの保存

## トップページの作成

この後に、投稿一覧を作りたいと思う。

HTML,CSSだけでホームページ作成『開発環境編』「前編」

#はじめに
HTMLとCSSでホームページを作成するためには

– エディタ
– ブラウザ

この2つが必要になってきます。

グラフを見て分かるようにエンジニアの**3人に1人**がVisual Studio Codeを使用
していることになります。

なので、今回はVisual Studio Codeを使用していきます。

#1.VisualStudioCodeをインストール

– サイトにアクセス

今回はmacOSでやっていきます。
下記のリンクからアクセスして「Download for Mac」をクリック
https://code.visualstudio.com/
HTML5の全要素の振り返りをかねて整理する（整理中）

# はじめに
HTML5の学習を兼ねて全要素を確認中。

# HTML5全要素


# グローバル属性

Chrome Extentions “Krafty” 公開

# Chrome Extention “Krafty”を公開しました。

開いているWebページのmeta情報やaltの確認、HTMLのネストの検証、要素のアウトラインの確認などができます。
マークアップエンジニアの方や、ディレクターの方には便利につかっていただけると思います。

名前は、New Orderのアルバムからいただきました。

ストア公開の申請時に、この拡張機能の使用にはホスト権限が必要なので、審査にかなり時間がかかると脅かされましたが、2日ほどで公開されました。
Googleさんありがとうございます。

[Chrome Webstore](https://chrome.google.com/webstore/detail/krafty/obfjnafkhihecjkpfpcgglckalfphbfb)
[GitHub](https://github.com/takeshisakuma/krafty)

## 機能紹介
Kraftyの4つの機能をご紹介します。

### Head Checker
meta情報などを、ソースを開かずに確認できる機能です。
お客さんや一部ディレ

【初心者でもわかる】html・cssで作る、簡単な三角形の作り方3選。

# どうも、7noteです。今回はhtml・cssで吹き出しの三角形を作る3つの方法を解説していきます。

WEBサイトを作成する時、こんなデザインがよく見られます。

吹き出し風のデザインのこんな三角形はよくでてきます。毎回出るのでその度適切な作り方を使い分けて綺麗なコーディングを意識しましょう！

## 方法1: borderで再現
これが一番綺麗な方法かなと思います。

“`index.html

borderで再現

“`

“`style.css
.fukidashi {
width: 400px; /*吹き出しの横幅を指定*/
background: #FCC; /*背景色にピンクを指定*/

canvasで画像比較したい

## canvasで画像比較したい
最近ffmpegを使って音をいじいじする機会がありました。
いろんなパターンで音を編集してみたのですが、音の変化を耳で感じるのに限界を感じ、視覚的に見る方法ないかなぁと思っていました。
そしたらffmpegには音の波形を画像で出す機能があるようで。

サンプリング波形を一枚画像で出力する showwavespic

波形の画像を生成したは良いが、微妙な違いを確認するためには結局目を凝らすしかないという結果に。。
Rubyには[rmagick](https://github.com/rmagick/rmagick)がありますが、javascriptでなんかできないかなぁと思いcanvasを使ってやってみることにしました。

## どうやったか

### 概要
`wave_1.png`と`wave_1.png`を用意し、canvasに順番にレンダリング。
レンダリングした情報を変数に格納。
画像を比較して差分がある箇所だけ色を付ける。

“`index.html

imag

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

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

おはようございます
昨日の作業・やったこと⇩

●ブログ記事1記事作成
●プログラミング学習366日目 2h
・udemyでフロントエンド講座
・メンターの課題

クーラー壊れたから扇風機最大で過ごす【HTML】Google Mapの埋め込み

# はじめに
Google MapからHTMLをコピーして貼り付けることでサイトにGoogle Mapを埋め込むことができる。

## 実装方法

**1. Google Mapで目的地を検索 → 共有をクリック**


**2.地図を埋め込むをクリック → HTMLをコピー**
地図のプレビュー画面が表示される


Mapのサイズを選ぶこともできる
![スクリーンショット 2020-07-09 18.14.2

元記事を表示

手動でABテストするためのコンテンツの出し分けのサンプル（Javascript+Cookie）

##はじめに

**実現したい事**はWebサイトで
特定の画像／文章／デザインなどの部品を2パターン用意し、
ランダムで表示してその結果を後で
GoogleAnalyticsなどで検証するというものです。
※コードの例ではGAのイベントトラッキングを活用します。
オプティマイズや別の専用ツールなどもあるのですが、
ツールの縛りがある、使い辛い、まずは気軽に試したい、
という時に不便なので作りました。（個人サイトの場合など含め）

（利用例）
**画像A / 画像B　どちらを表示したほうがCVRが良いか？**
※GA等の解析ツールにデータを送信し、後で分析をかけます。

補足：
コードは汚いので仕組みそのものや部品とりとしてご活用ください。

##仕様

**概要：**
特定のIDを持つ要素に対してA／Bパターン2種類の中身（HTML）を用意し、

【flex-box】 html css フレキシブル対応　レイアウト　基本

##【ゴール】
flex-box忘れていたので、振り返り

##【コード】

####何はともあれ、「display: flex;」を親要素に指定

####flex-wrap: wrap;
＊折り返し
＊HTMLにboxとcontentクラスを用意


“`css.hoge.css

.box{
background-color: lightgreen;
min-height: 200px;
widows: 100%;
display: flex;
flex-wrap: wrap;
}

.content{
margin: 10px;
height: 100px;
width: 30%;
background-color: green;

“`

###

色々なCSSアニメーションつくってみた 10日目【WEBサイトを作る30日チャレンジ】

# CSSだけでアニメーションを作る（trasition及び@keyframeを使用）

　・hoverした際に動くアニメーションとしました
　・アニメーション以外は前回作ったシャーロックホームズのテンプレを一部利用しています
　・画像はフリーのものを使用しました

# お世話になったサイト様
[@7968様 @keyframeとanimation](https://qiita.com/7968/items/1d999354e00db53bcbd8)
[@7968様 trasition関連](https://qiita.com/7968/items/812d6a21fc4dd9ae9c75)

# 完成物


# コード

“`html



<

HTMLの基本（備忘録）

###HTMLの概要
Hyper text markup languageの略。
Web上の文書を記述するためのマークアップ言語。

マークアップとは？
文章がどのような構造になっているかを明確化する作業のこと。
どこが見出して、何がリンクなのか、構造化すること。

###HTMLの基本
HTMLの冒頭に、この文書はHTMLで書かれていることを宣言するDOCTYPE宣言が必要。
これ→　

コメント　

　言語を表す。 ja=日本語

< > HTMLタグ
開始タグから始まり、内容を挟んで、終了タグまでが1つのまとまり
このまとまりを要素と呼ぶ。タグ内に文字を要素名という。

###head と body
HTML文書の中身を大きく分けるとhead要素とbody要素

head要素内には文書に関する「メタ情報」
body要素には「コンテンツ」

メタ情報には、ページタイトル、外部スタイルシートの場所、外部JavaScriptファイルの場所、文字エンコーディング情報、ページの概要
meta cha

Javascriptで日付の連動更新をする

#命題
JavaScriptを使って、二つ（以上）ある``の一方が更新されたとき、もう片方を同じ値にしたい。
ブラウザはChrome 83を使用。

##想定される使用例
検索期間を2組の``で表し、例えば検索終了日を変更した際に、検索開始日より過去の日付だったら開始日を終了日と同じにする。

“`HTML:HTMLサンプル

検索期間:
～
←こちらを変更すると左側の日付も変わります。

“`

具体的には上記のコードで、DateUntilを2020-7-09に変更した場合、DateSinceも2020-7-09に書き換わるようにする。

実際の実装では逆の処理(DateSinceをDateUn

Google タグマネージャーで子孫要素のクリックイベントもきっちり検出する

[Google タグ マネージャー](https://marketingplatform.google.com/intl/ja/about/tag-manager/) （以下 GTM と表記）にはクリックイベントを検出するためのトリガータイプとして「すべての要素」と「リンクのみ」の二種類が用意されています。「すべての要素」を利用するとリンクだけでなくボタンやフォームなどの要素もターゲットに指定することができますが、ターゲットの子孫要素のイベントは検出してくれません。

この仕様は Google Analytics （以下 GA と表記）などの外部サービスにクリックのイベントデータを送出するといったユースケースで問題となる可能性があります。例えば以下のような HTML において `` をイベントターゲットに指定した場合、子要素の `` がクリックされてもトリガーはそのイベントを検出しません。

“`html

close

元記事を表示

新規登録機能

やっとこさ新規登録機能実装完了今回のログイン時発生したエラーは
Error: Field ‘name’ doesn’t have a default value: INSERT INTO

これどういうことかというとdeviseは元々入っているe-mailとpasswordしか受け取らない模様
調べて結果aplication.controllerに

“`ruby:qiita.rb

before_action :configure_permitted_parameters, if: :devise_controller?

def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
end
“`
を追加し

“`application.controller.rb
class ApplicationController < ActionController::Base protect_from_forgery with: :exc

元記事を表示

【初心者でもわかる】デザインからコーディングする時の考え方（実践例あり）

# どうも、7noteです。今回はデザインからコーディングに写すときのコーダーの頭の中を解説。

ところで「YOASOBI 夜に駆ける」はやってますね。私も1日中ループで「夜に駆ける」を聞いています。
（あ、雑談なので内容を知りたい人は次の見出しまで読み飛ばしてください。）

なんかいろいろな人が歌ってみたとかYoutubeとかで上げているので、自分も何かできないかなと考えたときにふと「夜に駆ける」のCDジャケットをみて、「**これ、背景CSSで再現できるんじゃね？**」と思って・・・作っちゃいました（笑）。

・・・と言うわけで、今回は流行りに便乗して**CDジャケットを参考にして、CSSで再現**してみました！

でも真面目な話、これ**意外と練習になるんですよ。**
まだコーダーの経験が浅い頃、休日のカフェでipadを使って注文カウンター上の掲示板メニューをCSSで再現したりして遊んでいました。

なぜこれが練習になるかと言うと、いままでならさらっとしか見たことないものでも、再現するとなると細かい部分まで見なければ作れません。
**文字の大きさや色使い。余白の取り方など細部のデザ

元記事を表示

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

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

おはようございます
昨日の作業・やったこと⇩

●寝る直前の筋トレ5分
●ブログ記事1記事作成
●プログラミング学習365日目 1.5h
・メンターの課題#駆

元記事を表示

javascript:void(0)はもうやめにしませんか？という提案

aタグを無効にするくらいならもう使わなくていいと思う。（という提案）

## 結論
例えばタブバーであるなら、

“` HTML

• Menu 1
• Menu 2
• Menu 3
• Menu

元記事を表示