f@ctor

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

今さら聞けないHTML　2020年06月17日
目次

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

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

HTML(レイアウト復習)

#初心者におすすめChrome拡張機能

?️ 拡張機能（UI Build Assistant）
https://chrome.google.com/webstore/de…

##この動画でコーディングの勉強をしました

元記事を表示

HTMLのformで値を渡す

# HTMLのformで値を渡す

PHPでHTMLのformタグを使って値を渡す方法。
入力側で入れた数値をもとに三角形の面積を出す簡単なプログラムを作り、
それをもとに備忘録とします。
可読性を上げるためヘッダーとフッターは分割して部分テンプレート化し、
require文で呼び出してます。

まず入力側。

“`php:container_input.php

底辺


高さ



“`

入力した底辺と高さの値を、Webサーバを介して出力側のcontainer_output.phpに
リクエス

元記事を表示

Appleに似たページを作る【完成編】 ~1日10行コーディング~

## 13日目

前回はある程度枠組み的には寄せることができたので、マージンの調整や色の調整などして完成させたいと思います！

### 【技術テーマ】
ホームページ制作

### 言語
* HTML
* CSS

### 目標成果物

* AppleのMac紹介ページに近いもの

### コードと資料

前回のものをベースに要素の追加などをして完成を目指します。

1. 各要素の定義修正

前回の要素に追加してランキング、動画へのボタンを追加します。

“`index.html

僕のすすめる料理動画3選

第一位

【至高シリーズ】

ペペロンチーノ

元記事を表示

【javascript】ページのスクロールで画像を入れ替えたい。

ポートフォリオサイトの制作中に使った画像の入れ替えについて
ざっくりまとめたのでご紹介。
( 今回はhamlではなくhtmlそのまま使用しています)
# やりたい事
以下のように、スクロール用によって画像をじんわり入れ替えたい。
[![Image from Gyazo](https://i.gyazo.com/ac0dc2743f39474c48e42ebb483700aa.gif)](https://gyazo.com/ac0dc2743f39474c48e42ebb483700aa)

# 1. 使う画像を準備する
今回は二枚の画像を入れ替えます。
クラスとかwidthはなんでも構いません。

“`html:sample.html
~ 省略 ~

⬅️写真二枚いれる箱

~ 省略

元記事を表示

htmlでおみくじアプリ作成

dotinsallでおみくじアプリ作成を勉強したので学んだことをまとめておこう。

●ランダムな数を生成するMath.random()を使って条件分岐が基本。
結果の表示方法は①switch文、②result = []としてresult[n]のように配列でまとめる。
③if文で確率ごとに条件分け、がある。

特に配列で取得するやり方は今後かなり使えそう。実際のアプリで配列を初めて使って感動した。

●ボタンを押した感を出すには下部の影とmargin-topの操作で可能

●cursor: pointer　にすると手のようになってくれる

●opacity　は透明性で０だと完全に透明

以下、コード例

htmlコード

“`html




おみくじ

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

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

HTML入門

メモとして

#HTML
コードは入れ子構造となっている。そのため、タグの間に入れるタグなどに制限があるようだ。

開始タグ内には属性を持たせることが可能。属性はそのタグ特有の情報を表す

HTML文書は開始行に必ず、このファイルがHTML文書ということを表す****という文言のタグを記述する。
また、その文言はバージョンによって異なる。HTMLの最新バージョンであるHTML5は上の文言である

– HTMLタグはこのタグに囲まれた部分はHTMLコードであることを表すタグ。基本的に表示されない
– HEADタグはそのウェブページの情報を書く部分で
– フォントの読み込み設定
– 検索エンジンやブラウザがそのページを理解するための情報
– CSSファイルの読み込み設定
– 例の一つでTitleタグはウェブページのタイトル情報が記載する場所である、検索エンジンに表示される内容らしい
– Bodyタグは実際にウェブページに表示される内容を指す
– Pタグ(段落)やh1~h6(見出し)タグなどがある
– 画像を表示するimgタグ(jpg,png,gif

Web初心者がAWSを使ってサーバーレスwebアプリケーションを作成

## はじめに

現在修士1年でバイオインフォマティックス系の研究をしています．

卒論で開発した機械学習を用いた手法を論文化するためにwebアプリケーション化する必要があり，AWSを用いてサーバーレスwebアプリケーションを作成しました．

一ヶ月前まではhtmlすらほぼ触ったことがなく，javascriptやcssましてやAWSは使用したこともない完全なweb初心者でしたが，webアプリケーションを比較的簡単に実装コスト少なめで作成することができたのでその流れを紹介します．

web初心者だけどwebアプリを作成してみたい!といった方の参考になれば幸いです．(実装の詳細などは長くなるので全体的な流れだけ紹介します．)

### どんなアプリケーションを開発した？

今回開発したアプリケーションは以下のようなものです．

1. webページでユーザーからメールアドレスと予測対象のファイルを受け取る
2. 受け取ったファイルを前処理して予測
3. 予測結果をwebページでユーザーに表示

このうちAWSを用いたのは1と3の部分で，2の前処理と予測は処理が重いので研究室のサーバーを使

元記事を表示

HTML Works – テンプレートエンジンを利用できる静的HTML作成環境(ツール)を作ってみた

# 開発の背景
マニュアルページを作成しようとした際に、サイドメニュー部など同じ要素を毎ページ記述するのが無駄だなと。(最近はフレーム分割などせずに単一ページにメニュー部をもつデザインが多い)
プログラム込みのWebページ開発であれば、フレームワーク(例えばPythonのDjangoなど)にテンプレートエンジンが大抵用意されていますので、共通部の部品化など効率的な開発が可能です。
このテンプレートエンジンを利用した開発を純粋なHTMLの作成でもできないかなと思ったのが発端です。
ひとまず既存のツールを探してみたところ、[HUGO](https://gohugo.io/)というツールがヒットしたのですが、コンテンツ部分はMarkdownで記述するタイプらしくちょっと自分のニーズとは違いました。
というわけで自作しよう！と(笑)

# テンプレートエンジンを利用できる静的HTML作成環境(ツール)
そしてひとまず必要最低限の機能を実装し、まだまだ趣味の範囲ではありますが動くものになったので、下記GitHubで公開してみました。
[HTML Works](https://github.com

元記事を表示

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

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

元記事を表示

今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)2/3

# 今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)

## 前回の記事

[今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)1/3](https://qiita.com/kurikurisan/items/cb0e069c13deac3e4894#line-notify設定)

## 困っていること

ごみの日がどうしても覚えられない、、
私の家には、庭があって、ごみを一時的にためておくことができるために、ごみをいつでも捨てれるのは素晴らしいのですが、
ごみの日を覚えられないため、基本的に朝の用事があるときに、周りを見て、今日何のごみの日かを確認している。
-> これが非常に面倒くさい、、

ということで、通知してくれるシステムを作ろう！

## 機能

* 毎朝8時30分にごみの日をLINEに通知する([前回の記事](https://qiita.com/kurikurisan/items/cb0e069c13deac3e4894#line-notify設定))
* なんのごみがストックされているかが

元記事を表示

2020/06/13〜14 プログラミング(フロントエンド)学習14〜15日目 メモ

# 2日間の学習範囲
### たにぐち まことのともすたチャンネル(YouTube)
https://www.youtube.com/user/tomostajp
Bootstrap 4入門 #03〜#09
（学習時間：5時間）
## Bootstrap学習メモ
### tableタグ(HTML)
`

`
表を作成する
### trタグ(HTML)
`

`
表の一行を定義する
table rowの略
table要素内に記述する
### thタグ(HTML)
`

`
見出しとなるセルを作成する
table headerの略
tr要素内に記述する
### tdタグ(HTML)
`

`
データとなるセルを作成する
table dataの略
tr要素内に記述する
### table要素にBootstrapのスタイルを適用する方法
`

`
### theadタグ(HTML)
`

`
表のヘッダ行を定義する
table要素内に記述する
### tbodyタ

Qiitaで見つけた便利なJavaScript保管庫

これまで私はHTMLのページを作る上で、何度もQiitaの記事にお世話になってきました。それはこの記事を見ているあなたも（おそらく）同じでしょう。

この記事は、そんなQiita巡りの最中に私が出会った、「なくてはならない機能」「あったら便利な機能」を自分なりに書き直したものの保管庫です。まだ数は少ないですが、これから時間をかけて、もっともっと拡充していこうと思います。

jQueryが肌に合わない残念人間なので、元記事ではjQueryで書かれていたコードであっても、全てピュアJavaScriptに書き直されています。ご了承ください。

#ユーザーエージェント判別
**参考:**
[使用してるブラウザを判定したい](https://qiita.com/sakuraya/items/33f93e19438d0694a91d)（@sakuraya さん）
[UserAgentからOS/ブラウザなどの調べかたのまとめ](https://qiita.com/nightyknite/items/b2590a69f2e0135756dc)（@nightyknite さん）

“`javascr

Appleに似たページを作る【レイアウト作成】 ~1日10行コーディング~

## 11日目

前回はほんとに雑魚雑魚HTMLかいただけだったので、スタイルを少し当てていきたいと思います！！

### 【技術テーマ】
ホームページ制作

### 言語
* HTML
* CSS

### 目標成果物

前回のHTMLにdivとかで構成を作って簡単なレイアウトだけ寄せる

### コードと資料

今回も前回に引き続きだいぶ基礎的な部分の記述になります。

1. 各要素をDIV等で囲う

前回のHTMLはほんとに並べただけなので、ひとまず文章部分とyoutubeの埋め込み部分を分離します。

“`index.html

僕のすすめる料理動画3選

【至高シリーズ】

ペペロンチーノ

料理研究家が辿り着

Visual Studio Codeでhtml + bootstrap4の書き方

# Visual Studio Codeでhtml + bootstrap4の書き方
今回の記事でVSCodeを利用してhtmlテンプレート、bootstrap4デザインの組み合わせを快速編集できる方法について説明します。
手順は以下の通りです。

## １、拡張機能インストール
まずはVSCodeを開き、以下の二つの拡張機能をインストールする

– 1、HTML Preview
– 2、Bootstrap 4

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/74bf034c-d5bb-3b0b-ed2e-d23bbaa0d700.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/74d332df-05f7-f1bc-23c9-ab15197b335f.png)

## ２、HTMLファイル作成
ファイル -> 新規ファイルで新規ファイルを作成する
ショー

背景が動画のサイトを作る

参考サイト
https://www.granfairs.com/blog/staff/centering-by-css
https://redstapler.co/responsive-css-video-background/

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

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