Web制作の基本(HTML)

#概要

Web制作を始めるにあたっての基本です。
HTMLの基本的な書き方についても紹介します。

#テキストエディター
まずWeb制作を始めるにあたって、HTMLを書いていくためにテキストエディターというアプリケーションが必要となります。
これは制作する上で役に立つ補完機能がたくさん付いているのでダウンロードしてから始めましょう。
Atom、Visual Studio Codeなど、たくさんのテキストエディターがありますが、自分にあった物を見つけるのがいいと思います。

#そもそもHTMLとは

HTMLとはWebページを作る上で基本となる言語です。(マークアップ言語と言います。)
インターネット上にあるたくさんのWebサイトがHTMLを使って作られています。

#HTMLを記述してファイルを保存する

テキストエディターにコードを記述し、ファイル保存します。

“`

タイトル1

分かりそうで分からない、レンダリングについて

#自己紹介
むちゃんです。
関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の2回生です:boy_tone2: (2020.10.7現在)

イベントなど回っているので是非大阪辺りの方は会いましょう！!

#なんでエディタにコードを書くと表示されるの?
**皆さんはこんな疑問は持ったことはないでしょうか?**
**知っているようで知らない方が多いいと思ったので今回はこれを題材にして説明していきたいと思います:writing_hand:**

ひとまずこの表をご覧ください。

#1…レンダリングとは?

>
WebブラウザはWebサーバーからの情報を受け取ってhtml、css、JavaScript、
画像はjpeg、png、gif、svgの情報を解析してコンテンツを画面に表示します。
この

アプリケーションのオリジナルロゴを簡単に作る方法(スマホで簡単)

#個人アプリのロゴを簡単に作成しよう！(Rubyの記述あり)
##必要なもの
* 「Pics art」

* 「背景透明化」
（それぞれapp storeで無料で取得できます）

#好きなように書く！
Pics art
![IMG_1429.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/60399ebc-

【デイトラ】初級ノートDAY5

## ◆悩んだとこ、後から気づいたとこをシェアしていきます。

デイトラをはじめました。
現在中級に入ったところですが、つまずくようになってきたので
初めて復習をしています。

復習にあたって、VSCodeでmarkdownを使ってノートをとるようにしました。
せっかくなので、同じ悩みの方に向けて投稿していきます。

単元を学習した後に読むのが良いと思います。

**わたしも同様に初学者です。内容の正確性を保証することはできません。**
**訂正やより良い情報があればご教授お願いします。**

### ✔この記事で解決できること

– 講義内容と課題の中でわからないことが解決できるかもしれない。
– 調べる時間を短縮できるかもしれない。
– 学習の仕方を効率化できるかもしれない。

## ◆DAY5 ゼロから作る ①

### ✔ VSCode の emmet を設定する

今後の作業効率化のためと忘れてもつまずかないように
emmetの設定をしてみました。

emmetの設定が書かれているjsonファイルを編集する必要があります。

1. VSCodeのウィンドウ左上Code
2.

エンジニアなら知らないと恥をかく！CSSでヘッダーを作る方法

#概要

– ヘッダーを作るには**FlexBox**を使う
– リストマーク(・)を無効化するには`list-style: none;`
– リンクの下線を無効化するには`text-decoration: none;`

#ヘッダーの構成

こんなヘッダーを作っていきます。
まず、考えるべきことはレイアウトです。どんなHTMLで構成されているのでしょうか？

“`ヘッダー.html

ヘッダータイトル

(WordPress) MW WP Formで送信成功ページ、失敗ページからページ遷移に起きる不具合

##環境
page-contact.php
↓送信すると以下にページ遷移
page-success.php

##不具合
コンタクトフォーム(page-contact.php)から送信成功ページ(page-success.php)にページ遷移し、
もう一度コンタクトフォームに遷移しようとすると、送信成功ページ表示される

##原因
page-contact.phpからpage-success.phpにとばしていたが
page-success.phpにMWWPFormのショートコードを記述がなかったため、
ページ遷移は出来るが、MWWPFormの処理が行えてなかった。

##解決策
page-contact.phpで使用したショートコードをpage-success.phpでも表示させる
このままではpage-success.phpにもフォームが設置されてしまうので、
page-success.phpのCSSの該当箇所にdisplay:none；をかけて非表示にする。

[jQuery]入力フォームのバリデーション

##概要
チャットなどでメッセージを送る時に、フォームが空の状態で相手にチャットが送れないようにバリデーションを実装しました。
slackみたいに、初期状態ではボタンが押せない状態でメッセージが入力されるとボタンが押せるようになります。
送信後は、フォームが空になるのでボタンが再び押せなくなります。

####チャット送信フォーム

“`index.html

送信

“`

###jQueryの処理

“`chat.js

//バリデーション
let sending = false;

$(‘#message-input’).keyup(function () {
const chatMessage = $(this).

ブラウザーで表計算を作りたい？

#ブラウザーでも表計算みたいに入力したい
…とかいう要望が出ることがありますね。
やってみましょう。
テキストボックスをたくさん並べて…、じゃないですよ。

“`html:worksheet.html