初のウェブ関連の記事です。大学の時にHTML,CSSを使ってポートフォリオとあるプロジェクトに参加したことがあったのである程度の使い方はわかるんですが所詮はコピペしかしたことない素人だったので今回HTMLとCSSの練習をドットインストールを使ってやってみました。
動画だとなんとも使いづらいとこがあったので簡単にCodePenで知らなかったFormの作り方とかをまとめたのでウェブ制作初心者の人はコピペとかに使って見てください。基本的にソースコードはドットインストールの動画を参考に書いてるので同じになります。
ドットインストール
一応ドットインストールのサイトを貼っておきます。
ちなみに早速このリンク先もHTML表記で編集してリンク先が出てくるようにしたんですが（たまたまなった笑）
See the Pen OmZxqy by Shuhei (@ShuCoding) on CodePen.
なので早速CodePenにソースを載せてます（笑）
Codeをはてなに貼る
CodePenの登録の仕方は簡単なので省略します。
では、はてなブログにCodePenで書いた物を載る方法です。
コードを書いてセーブすると、ページの右したに”embed”が出てくるのでクリック。
するとこんな感じの画面が出てくるので下のURLをコピーしてから
はてなのHTMLの欄にペースト。
簡単タグまとめ
ではここから簡単にHTML簡単コピーリストです。
ベースHTML以外はドットインストールHTML入門の後半あたりのコードになります。
ベースHTML
See the Pen OmZxqy by Shuhei (@ShuCoding) on CodePen.
ボタンとコメント
See the Pen mmLqPe by Shuhei (@ShuCoding) on CodePen.
いろんな種類のフォーム
See the Pen mmLqPe by Shuhei (@ShuCoding) on CodePen.
選択肢表示
See the Pen MmGOyV by Shuhei (@ShuCoding) on CodePen.
タグと同じ文字を表示される文字にしたい
See the Pen xdjPVM by Shuhei (@ShuCoding) on CodePen.
今回は以上です。CSSはこれから復習なのでささっとやってしまおうと思います。
こんな感じで今回はど素人ネタでしたが英語圏では有名だけど日本ではまだ…みたいなツールとかも見つけたらアップできたらいいなと思ってます。
Seeee Yaaaaa!!!!
