6月末までにオリジナルアプリケーション開発します。

# アプリ開発を公開しようと思った経緯
皆さんこんにちは。harukiと申します。早速ですが、当方の簡易な経歴とアプリ開発の過程を公開するに至った経緯を記述しようと思います。

#### 私の経歴
・20年卒の元地方銀行員。約2年で退職。⇨テックキャンプに入校⇨カリキュラムが大方終了し今日からオリジナルアプリ作成
となっております。

#### アプリの開発過程を公開する目的
・過程をアウトプットすることで、自分の学びになると思ったため
・今後、初めてアプリ開発する人何かの参考になるかもしれないため
・開発過程を公開することで、モチベーションを高めるため
・期日を決めるため

上記のような目的で、テックキャンプ受講生のアプリ開発過程を公開しようと思ったわけです。一言でまとめると、自分にプレッシャーをかけるためにアプリ開発過程を公開します。

# 使用する言語
・ruby 2.6.5
・HTMLやCSS、Javascript

# 開発するアプリ内容
ここからが本題です。
初めて開発するアプリは「議論するための場所を提供するプラットフォーム」にしようかと思います。
付ける機能大まかに

PHPで数値のカンマ区切りプログラムを作成しました。

Webアプリケーションで数値のカンマプログラムを作成しました。
ソースコードを公開します。

注) 今回はJavaのFormatter、PHPのnumber_format関数は使用禁止という条件です。

条件を入れ忘れましたので追記いたします。

canma.php(入力側)

“`PHP

以下のたった256文字のコードで街並みの映像が流れるというハイレベルなHTML[^1]です。
```html:A City in a Bottle

```

コードゴルフを普段行っているわけではない私からすると、このコードは訳分かんなすぎて面白かったので、一般プログラマなりにできる範囲で読んでみることにしま

よくある「ホバーしたらドロップダウンメニューを表示するナビゲーション」を駆逐したい

## 正確には
「**ホバーした時だけ**ドロップダウンメニューを表示するナビゲーション」がどうかなぁ、と思っている次第です。
あと駆逐は言いすぎましたごめんなさい。「タイトルは弱く見えるくらい強い言葉を使え」って誰かが言ってたので（出典不明）

## どんなやつ？
こんなやつ。

See the Pen
Untitled

HTMLとCSSの学習ログ

# 学習教材
udemyで[「ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」](https://www.udemy.com/course/web-application-development/)を学習。
ウェブ開発全般の基本的な知識が習得できるコースで合計24.5時間もある。
今回はその中でもHTMLとCSSについて学習した。
[](https://www.udemy.com/course/web-application-development/)

# 学習範囲

## HTMLの基本
文章の基本構造や構文を演習を通じて学習した。

## HTMLのステップアップ
テーブルやお問い合わせフォームの作成を演習を通じて学習した。

## CSSの基本
マージ

HTMLの基礎 Part1

## HTMLの基本
### 要素
HTMLを構成するために必要な成分で、いくつもの要素が積み重なってHTMLは構成される。
その要素は、タグ「< >, 」で囲って使用する。

```
HTML

# HTMLの基礎になる部分を記述するところ。
# ブラウザ上には表示されない。


# ブラウザ上に表示することを記述する。

```

### head部分の記述例
* HTMLのタイトル
* 装飾するためのCSSのファイル指定
* 外部ファイルの読み込み
* SNSのシェアされた時の表示の仕方

### bodyの記述例
```

見出し

1つ目の段落

2つ目の段落

3つ目の段落この部分は太字

```

#### h1~h6要素
文章の見出しになる部分であり、1から6になるにつれて文字の大きさと太

Re:ゼロから始めるSNS作り生活（二週間目＋α）

# どんな記事？
プログラミング初心者が、イチからSNSサイトを構築する過程を記録したもの。
誰かに「勉強の状況はどう？」と訊かれたときに提示できるよう、Qiitaの記事として投稿しています。
# 前置きや前提
### 完成品のイメージ
- コンセプトは「勉強記録をポストしたり、問題を出しあったりできるSNS」
- 自分の勉強記録をポストし、閲覧できる
- 友人の勉強記録に対し、コメントやミニクイズを投稿できる
- 自分と似た目標を持つユーザーを検索し、フォローできる
- フォローしている人の勉強記録を一覧表示する「タイムライン」もある
- 当然レスポンシブデザイン（本記事では未実装）
### 制作の目的
- プログラミング技術の向上
- あわよくば友人にこのSNSを使ってもらいたい
### これまでの経験や知識
- WordPressで構築されたサイトの調整経験
（2年弱従事していたため、HTML・CSS・PHPとも基礎はわかっていたつもり）
（通信をはじめバックグラウンドの知識はゼロ）
- 大昔にイチからサイトを構築した経験
（HTMLしか使用していない化石のようなサイトのみ）
-

animationstartイベントを使ってCSSからHTML要素のsvgを切り替えられるようにした話

## はじめに

ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています @misuken です。

今回はHTMLのanimationstartイベントを使って、CSSからHTML要素のsvgを切り替えられるようにした話を紹介します。

## 動機

- 状態に応じて動的にsvgを切り替える処理が地味に面倒
- `:hover`でsvgを変えたい場合などCSSで書けたら楽なのにと思う場面が結構ある
- svgだけ違うコンポーネントを幾つも作るのが面倒
- svg違いのコンポーネントに名前が必要になる場合も面倒

## svgの表示方法と問題点

svgの表示方法は、``タグ、``タグ、CSSの`background-image`など、色々な方法がありますが、CSSで細かく制御したい場合は`

特に`:hover`でsvgを切り替えたい場合や、複数の状態が絡んでsvgを切り替えたい場合、React側でHooksを書いて状態を管理する必要が出てくるなど、だいぶ面倒くさいことになりま

flatpickrの日本語化

私の環境では以下のソースで動いている。
```sample.html

本日の勉強✏️

ドットインストール詳解CSS 基礎文法編

#12〜#20

HTML、CSSは以前もProgateで勉強しているため、結構吸収していると思います。

やはり目に見えてデザインが変わるのは使ってて楽しいですね。

若かりし高校生の時、一部の人で、無料サーバを借りてHTMLで携帯サイトを作るのが流行ってました。

友達とプロフィールや日記、アルバムを
作って、ランキングに載せたり…

今思うとあの時からプログラミングには惹かれていたと思います。

仕事の休憩中にはProgateのアプリで、
復習しています。
このアプリは本当によくできていて、ありがたすぎます。

便利と感じたHTMLタグ一覧

個人的に便利だと感じたHTMLタグを紹介します！（これからも見つけ次第更新していこうと思います！）

## details, summary (IEのみ非対応)
HTMLのみでアコーディオンが実装できる！
```html

Summary

これはテキストです。

summaryタグはなくてもOK!

```
↓プレビュー（Summary・詳細部分をクリックしてみてください！）

Summary

これはテキストです。

summaryタグはなくてもOK!

CSS(summary::marker)を用いれば「▶

私は中国のフロントエンドエンジニアです

### 私は中国のフロントエンドエンジニアです。語学学校で日本語を勉強しており、将来は日本で働く予定です，フロントエンド関連の担当者のコミュニケーションを歓迎しますHTML

Web制作におけるVSCodeのおすすめ拡張機能

# 初めに
環境設定......なにそれおいしいの？
そんな自分が出会ったやらなければいけない事orz、やった方が良い事について、備忘録として記載していきます。
（文章力が無いので読みづらい場合はすいません...）

本稿では、HTML,CSSを用いる場合のVSCodeのおすすめ拡張機能（ついでに設定とか）を記載します。

# 拡張機能一覧
#### [1. Live Server（Webページ確認）](#1-live-server)
#### [2. Live Preview（Webページ確認）](#2-live-preview)
#### [3. Auto Rename Tag（HTMLのタグを同時に変更）](#3-auto-rename-tag)

## 拡張機能説明
#### [1. Live Server](#拡張機能一覧)
Live Serverとは、作成した（又は作成途中の）Webページを簡単に確認する方法です。
Live Serverをインストールすると、VSCode右下に、Go Liveと書かれた下のボタンが出現します。
![Live_Server.PNG](http

Laravel 国籍を登録してそれ用のページを作る

Laravel.6においてレシピアプリを開発中です。

国別のユーザーごとのレシピを表示する機能を実装し、苦戦したので自分用にメモします。

前提として、usersにnational_idというカラムを持ちユーザー登録時にプルダウンで国籍が登録されるようにしています。

### ルーティングを定義
```web.php
Route::get('/recipes/{country_key}','RecipeController@country')->name('recipes.country');
```

### Viewにプルダウンを表示
```recipes/index.php

@csrf

@foreach(config('country') as $key => $value )

元記事を表示

Github PagesでMathJaxを使おうとして失敗したときのメモ

DjangoとかJekyllとかHTMLの仕様とかよくわかってない初心者です。

# 成功した時のメモ

素直に[この記事](https://qiita.com/memakura/items/e4d2de379f98ad7be498)に従った。

1. Github PagesのSourceディレクトリに`_config.yml`を作成して`theme`を設定（リポジトリの設定からPagesを有効化してテーマを選ぶと自動で作成・設定される）。
1. Github PagesのSourceディレクトリに`_includes/mathjax-v3.html`を作成（中身は上記記事をコピペ）。
1. Github PagesのSourceディレクトリに`_layouts/default.html`を作成（1.で選んだ[テーマのリポジトリ](https://github.com/pages-themes)の`_layouts/default.html`をコピペしてくる）。
1. `_layouts/default.html`内の``の手前で`mathjax-v3.html`をイン

元記事を表示

メディアを、スマホの時にタイトル→画像→テキストの順に並べたい

## やりたいこと

これを

スマホの時はこうしたい

コードはこんな感じ。
```html

元記事を表示