f@ctor

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

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

javascriptでradioボタンにハマった話

#結論
radioボタンのプロパティは最初にtypeを設定しよう。

#経緯
javascriptではcreateElementを使ってコンテンツを作る事はよくあると思う。
例えばこんなの

“`js:radio.js
//フォームを生成
var eForm1 = document.createElement(‘form’);

//ラジオボタンを生成
var eRadio1 = document.createElement(‘input’);
eRadio1.value = ‘男’;
eRadio1.type = ‘radio’;
eRadio1.name = ‘gender’;
eRadio1.checked = true;

var eRadio2 = document.createElement(‘input’);
eRadio2.value = ‘女’;
eRadio2.type = ‘radio’;
eRadio2.name = ‘gender’;

var eRadio3 = document.createElement(‘input’);

元記事を表示

【Rails】テーブルを分けて複数の画像をアップロードする

複数枚の写真を一度に保存する機能の実装において、
【itemテーブル】と【item_imageテーブル】の二つに
分けて複数枚の写真を保存する機能を実装した際の手順をまとめたのでご紹介します。

# 完成形
○ 商品写真は最大で10枚まで投稿可能。
○ 一つのファイルフィールドに一つの写真でアップロードしていく。
○ 5枚投稿時点で下段に切り替わる。
[![Image from Gyazo](https://i.gyazo.com/c159d314e084b76e1b53bb78b2d441ae.gif)](https://gyazo.com/c159d314e084b76e1b53bb78b2d441ae)

# 1. HTMLの用意

“`haml:sample.haml

~ 省略 ~

.image-container
.image-container_box
.form-title
%span.box-form-explanaion
商品画像
%span.indispensable
必須
%p.i

元記事を表示

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

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

Google maps APIでドラゴンボールの場所を検索してみよう！

# はじめに
– ピンを快適にする方法
– Geocodingとは
– 実装

## ピンを快適にする方法
前回はピンを快適にする方法を記事で紹介しました！前回からの続きとなりますので是非参考にしてください！！
https://qiita.com/Ryunosuke-watanabe/items/958ed12471effc8fd778

## Goecodingとは
ジオコーディングとは住所や地名から緯度経度の情報を出すことです！
この機能を使えば、具体的な緯度経度がわからなくても、場所の名前だけでピンを刺したり中心を設定することができます。

## 実装

JavaScript,HTML,css全てでで実装します！まずGeocodingをするにはAPIでGeocodingを追加する必要があります。
プラットフォームの方で簡単に追加できるので是非やってみてください。

まずhtmlとcssで検索窓を追加します。

~~~maps.html



map

元記事を表示

【おい牛】CSSで円弧状の区切り線をつくる【模写】

# はじめに

HTMLとCSSの基礎を学びおえたので、ためしに**明治おいしい牛乳**のパッケージを模写してみました。

>
>出典：[明治おいしい牛乳 おいしい暮らし～Natural Taste～ | 株式会社 明治](https://www.meijioishiigyunyu.com/)

おいしい牛乳、略して*おい牛*です[*要出典*]。

>

さて、この**円弧状の区切り線**をつくるのがむずかしかったので、つくりかたをまとめておこうと思います。

元記事を表示

HTML&CSS基本

タグの違いが分からなくて苦手意識しかなかったが特徴がわかった備忘録

HTMLは一番基本のウェブに表示されるもの

<html>
　<head>
　　<meta charset=”UTF-8″>
　　<title/title>
　</head>
　<body>
　　　　←ここに表示するものを書いていく
　</body>
</html>
永遠に書きかけかもしれない。
この記事を初めて書いた時<>がそのまま書くと消えてしまってどうしたらいいか分からなくてそのまま保存にしてた。

自分で調べて実装して行かないと覚えないんだな。

CSSはHTMLで書いた文字だけのものを着飾らせるもの。
ノートで言うと文字を黒だけでなく、赤にしたり枠で囲ったりすることで
見た目を作る。それぞれ画面に対してサイズ指定する事でデザインになる

どうしても曖昧だったのがBody要素(内容を書いていく部分)のタグの違い。

hタグ。見出し要素でh１などとして使うと勝手に大文字の太字

元記事を表示

Goole maps API でドラゴンボールの情報を快適にみよう！！

# はじめに
– ピンに情報を埋め込む方法
– 他のピンをクリックした時
– cssで装飾
– 最後に

## ピンに情報を埋め込む方法
ピンに情報を埋め込む方法は私の一個前の記事で紹介しています！
ぜひ参考にしてください！
https://qiita.com/Ryunosuke-watanabe/items/48c8ec80f87283cc0006

今回は前回立てたピンをクリックしたあとに、他のピンをクリックしたときの挙動を施します。
複数のピンが乱立していると見えにくいので、2個目のピンをクリックしたときに他のピンは消えるようにしましょう。

## 他のピンをクリックした時
htmlとcssは前回と同じです。

~~~maps.html



map