20200925のHTMLに関する記事は6件です。

【作ってみた】js不使用。CSSだけでマウスホバーで動く自動ドア作った。

どうも7noteです。電車に乗っていてふと突然、「そうだ自動ドア作ろう」って思ったので作ってみた。

完成予定イメージ

閉じてるとき↓
close.png

開いたとき↓
open.png

ソース

予想していたよりも短くコンパクトに書けました。

index.html
<div class="doors">
  <div class="door left"></div>
  <div class="door right"></div>
</div>
style.css
.doors {
  width: 200px;  /* ドア2枚分の横幅 */
  height: 300px; /* ドアの高さ */
  overflow: hidden;       /* 空いたとき、ドアを消す為のもの。 */
  border: solid 2px #000; /* ドア全体の枠線 */
  display: flex;          /* 2枚のドアを横並びにする */
}

.door {
  background: linear-gradient(-135deg, #AAD5EE 50%, #FFF 50%, #FFF 60%, #AAD5EE 60%);  /* グラデーションを使ってガラスっぽさを表現 */
  width: 100px;  /* ドア1枚分の横幅 */
  height: 300px; /* ドアの高さ */
  border: solid 1px #EEE; /* ドアの枠線 */
  box-sizing: bordre-box; /* 余白の計算を簡単にするため */
  transition: all .5s;    /* ドアがゆっくり開く */
}

.doors:hover .left{
  transform: translateX(-97%); /* マウスホバー時に、左に動く */
}

.doors:hover .right {
  transform: translateX(97%); >/* マウスホバー時に、右に動く */
}

movie.gif

解説

とっても簡単にそれっぽく見せることができました。
実際にガラスのように透かして見せる場合はbackground#AAD5EEを全てrgba(0,153,255,0.4)くらいに変えてください。
時間帯によって、ガラスの色合いが変わるとかになったら綺麗かも。そうなるとCSSだけじゃ厳しいか・・・

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

複数チェックボックスを全選択した時のみ押せるボタン

<!DOCTYPE html>
<head>
</head>
<body>
<p>確認ボタン</p>

  <p form="check">
    <input type="checkbox" onchange="change()" id="check1">
    <label for="check1">
    確認チェックボックス1
    </label>
  </p>

  <p form="check">
    <input type="checkbox" onchange="change()" id="check2">
    <label for="check2">
    確認チェックボックス2
    </label>
  </p>

  <p form="check">
    <input type="checkbox" onchange="change()" id="check3">
    <label for="check3">
    確認チェックボックス3
    </label>
  </p>

  <button type="submit" id="check-btn" disabled>
  承認 
  </button>


  <script type="text/javascript">
    function change() {
      if  ((document.getElementById("check1").checked)
        && (document.getElementById("check2").checked) 
        && (document.getElementById("check3").checked)) 
      {
        document.getElementById("check-btn").disabled = false;

      } else {
        document.getElementById("check-btn").disabled = true;
      }
    }
  </script>
</body>
</html>

全てのチェックボックスをチェックする事によってボタンを押すことが出来る

スクリーンショット 2020-09-25 18.00.36.png
スクリーンショット 2020-09-25 18.01.07.png
スクリーンショット 2020-09-25 18.00.58.png
スクリーンショット 2020-09-25 18.01.17.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

画面の解像度で画像を切り替える

画面の解像度で画像を切り替えられる srcset
xが倍って意味 2xなら2倍 3xなら3倍、、、、
<img src="xxxxx.png" srcset="xxxxxx.png 2x" alt="スマホ対応画像など">

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTMLで文字化けを直す方法(UTF-8、Shift_JIS)

はじめに

ソースコードなどのテキストファイルを他のエンコードタイプでブラウザ表示させると文字化けしてしまいます。
HTMLで文字エンコーディングを指定し、文字化けを直す方法を説明していきます。

目次

1.文字エンコードって何?
2.エンコードタイプとは、コードと文字の対応表
3.HTMLでエンコードタイプを指定する
4.エンコーディングを変換する

1.文字エンコードって何?

一言でいうと、「文字データを数値へ変換させること」です。
コンピューターはデータを「数値」でしか理解できません。そのため、「文字」を扱う場合には、「数値」に変換して処理を行います。この変換のことを文字エンコードと言います。

2.エンコードタイプとは、数値と文字の対応表

コンピューターに「文字」を理解させるためには、「数字」と「文字」の対応表が必要です。
この対応表にはいくつかの種類があって、OSの種類によって、扱う対応表も異なります。例えば、WindowsはShift_JIS、UNIXやMacはUTF-8など異なった対応表でテキストを扱います。
この対応表のことをエンコードタイプといい、アルファベットはどの種類のエンコードタイプでも同じ数値データが割り当てられています。なので、英語で書かれたテキストファイルはそれを作成したコンピューターと違うコンピューターで表示しても文字化けはしません。
ところが、ひらがなや漢字などはエンコードタイプによって、割り当てられている数値データが異なります。
そうするとWindowsでテキストファイルを作って、Macでそれを表示すると文字化けが発生して読めません。
どのOSも全てのエンコードタイプを扱えるようにはなっていますが、デフォルトで扱うエンコードタイプが異なるため文字化けが発生してしまいます。

3.HTMLでエンコードタイプを指定する

まず表示するページで使われるエンコードタイプをHTMLファイルに指定しなければいけません。もし指定しないと、コンテンツ内の文字が誤って解釈されてしまいます。
そのためには、ソースコードが書かれたHTMLファイル内のmeta要素でcharset属性を使います。
また、文字化けしてしまうことを想定しているため、言語は日本語としています(lang="ja")。

UTF-8で表示させたい場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
・・・
Shift_JISで表示させたい場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
・・・

このcharset属性はHTML5から追加された属性の為、HTML5より前のバージョンのHTMLでは下記の方法で記述します。

HTML5より前の文字コードの指定方法
<meta http-equiv="content-type" content="text/html; charset=文字コード">
HTML5より前のバージョンでShift_JISで表示させたい場合
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

4.エンコーディングを変換する

HTMLファイルを表示するにはエディタを使います。
現在ではテキストのエンコードタイプを自動で判別して表示してくれるものが多いですが、自動で判別してくれないときはエンコードタイプを設定から自分で切り替える必要があります。
今回はVScodeを用いてShift_JISでの表示を行っていきます。

VSCodeのデフォルトのエンコードタイプはUTF-8になっています。そのため、Shift_JISで作成したテキストファイルを表示すると文字化けしてしまいます。
VSCodeにはデフォルトでエンコードタイプを変換する機能が備わっているため、変換に拡張機能はいりません。


VSCode画面下に表示されているエンコードタイプ(デフォルトはUTF-8)をクリック

表示されたメニューの「エンコード付きで再度開く」を選択

「Japanese (Shift JIS)」を選択

文字化けがなくなりShift_JISで表示される


参考

Shift JISやEUCなどからUTF-8へ変換する方法
文字コードと文字化け対策
http-equiv 属性

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

社会行動リズム表アプリを作成する【作成中】

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

未経験からフロントエンドエンジニアとして自社開発企業へ転職するまでにやったこと

はじめに

こんにちは☺
このたび、働きながら独学5ヶ月でフロントエンドエンジニアとして自社開発企業へ転職することができました。
今回は、学習開始から転職活動〜内定までを振り返ってみたいと思います。
フロントエンドエンジニアの転職活動についてまとめたものをあまり見なかったので、誰かの参考になれば嬉しいです。

わたしの経歴について

地方国立大学文系学部卒業後、法律事務所勤務を経て地方公務員として働いています。
学生の頃、趣味でホームページを作成した経験はあるものの、HTML/CSS以外のプログラミング言語についてはまったく知らない状態でした。

準備(2020年4月頃)

まずはじめに以下の環境を整えました。

・PCを購入(MacBook Air)
・VScodeインストール
・iTerm2インストール
・学習用Twitterアカウント開設

また、短期目標として下記を設定しました。
・5月でインプット
・6〜7月でポートフォリオ作成
・8月〜転職活動開始、年内に転職先決定

1ヶ月目(2020年5月):Webデザイン&コーディング

前述のとおりホームページ作成した経験もあって最初はWebデザイナーに興味があり、Webデザインとコーディングの学習から始めました。
書籍やUdemyでインプットし、まずはサイト模写やバナートレースなどのアウトプットを行いました。

また、学習用に開設したTwitterアカウントで日々の積み上げやトレースしたバナーをつぶやいたり、自分と同じように勉強している方を見つけたりしてモチベーションを上げていました。

2ヶ月目(2020年6月):アプリ開発、ポートフォリオ検討

ネット上のチュートリアルを参考に簡単なアプリ開発を始めました。
この頃から、Webデザインよりアプリ開発のほうが楽しいと感じ、目標をWebデザイナーからフロントエンドエンジニアに変更し、学習内容のプランとポートフォリオの内容についてプランを練り直しました。

3ヶ月目(2020年7月):ポートフォリオ作成

未経験から転職活動を行うにあたり、学習の成果や技術レベルを客観的に証明できるポートフォリオは必須です。
(実際に選考でもポートフォリオ必須の企業はいくつかありましたし、しっかりポートフォリオを作成したことで高評価をいただくこともありました。)

フロントエンドエンジニアのポートフォリオについてはあまり情報がありませんでしたが、
①ログイン認証のない、誰でも気軽に利用できるアプリ
②ログイン認証があり、データベースへのCRUD処理ができるアプリ
③ポートフォリオサイト
の3つを作成することに決め、アプリのアイデアから考えました。

アプリのアイデアについて

「なにか困っていることを解決したい」というような自分の”想い”が大切だと思います。
わたしは、”誰もが簡単に発言できる時代だからこそ、ひと手間かけて相手に気持ちを伝えることの大切さ”や”嬉しいできごとを共有して皆がHappyになってほしい”という想いから
①のアプリについては嬉しい出来事をカードにしてTwitterでシェアできるアプリ
②のアプリは嬉しい出来事をユーザーで投稿して共有できるアプリ
を開発しました。
(①については嬉しい出来事だけでなく誕生日などのお祝いや感謝の気持ちも伝えられるカードアプリを目標としていました。現在、追加実装中です・・)

アプリの使用言語について

JavaScriptのフレームワークやライブラリであるVue.jsReactなどを使用するのがよいと思います。
わたしは
・日本語の公式ドキュメントが充実している
・学習コストが低い
などの理由からVue.jsを選びました。
バックエンドについてはBaaS(Backend as a Service)であるFirebaseを利用しました。

コードはすべてGitHubへ

ポートフォリオで作成したアプリのコードはすべてGitHubにpushしました。
選考の段階でGitHubのURLを送ってほしいと依頼されることもあったので、すべてpushしておいたほうがよいと思います。

4ヶ月目(2020年8月)

ポートフォリオが完成したため、さっそく転職活動開始。
わたしの場合は地域を限定していたので、勤務希望地とフロントエンドエンジニアで検索して、実務経験必須の求人にも応募しました。

転職活動中の学習について

転職活動中も、アプリの機能修正や書籍を読んだりしました。
また、面接で聞かれた技術的な質問でわからなかったことは必ずすぐ調べ、まとめるようにしました。

5ヶ月目(2020年9月)

転職活動開始から1ヶ月、面談や面接は5社ほど受け、第一希望の企業より内定をいただきました。

学習に使用した教材やサービスについて

基本的に書籍とUdemyを利用しインプットして、チュートリアル等でコードを書いていくようにしました。
仕事の休み時間などのスキマ時間はQiitaの記事を読んだり、そのときわからないことをググってまとめるようにしています。

Udemy

幅広い講座の中から、目的や好みに合った講座を購入できます。
セール時の購入がオススメです。

書籍

◯1冊ですべて身につくHTML&CSSとWebデザイン入門講座(Mana著)

第一歩はここから。

◯JavaScript本格入門

THE入門書。基礎が大事なので、理解できないところは時間をかけてでも。
ポートフォリオ作成と並行してもOKだと思います。

◯開眼!JavaScript

こちらも上記書籍と同様に。

◯Vue.js入門

Udemy講座終了後、ポートフォリオアプリ開発中こちらで復習しました。

◯Vue.jsのコツとツボがゼッタイにわかる本

こちらも復習用に読みました。

◯Webを支える技術

Webサービス設計の基礎について学ぶことができます。

◯リーダブルコード

独学でコードを書くことに不安があったため読みました。
読みやすいコードはどうあるべきか?さまざまなパターンが紹介されています。

◯安全なWebアプリケーションの作り方

選考中の企業のエンジニアの方からお勧めされた本。
転職活動中に読みました。

公式ドキュメント

コードを書いていてわからなければまず公式ドキュメントを確認していました。

ドットインストール

JavaScript〜ざっとスキマ時間を利用して復習で使用しました。
2分程度の動画の講座なので、ここから入るのも理解しやすいと思います。

MENTA!

自分に合ったメンターさんと契約できるサービスです。
コードレビューや転職サポート(職務経歴書の添削など)をしてもらったり、メンターさんによってはチーム開発にも参加できるので、独学の方は利用をオススメします!

Youtube

しまぶーのIT大学さんのYouTube講座は全体像がわかりやすく、オススメです!

転職活動について

利用した転職エージェント

Wantedly

「まずは話を聞きたい」から企業に連絡をとることができるので、カジュアル面談から入るところが多く気軽に話を聞きやすい。

Green

初回応募時に選考理由等フォーム入力するため敷居が高い印象だが、そのぶん初回応募で通ると面接に進みやすい。

履歴書、職務経歴書について

まず面接の前に提出を求められることが多いため、履歴書と職務経歴書も用意しておきます。
面接に向け、志望動機もより掘り下げて考えるようにしました。
できれば第三者に見てもらって意見をもらい、校正したほうがよいと思います。

面接事前準備について

企業理念や社風に共感できるか、魅力を感じるかを重要視していたため、その点を重点的に調べました(ここは人によると思います)。
企業や業界研究をする中で、自己分析が進み、志望動機がより明確になりました。

まとめ

未経験からエンジニア転職は難しいと言われていますが、わたしのような文系未経験30代でも自社開発企業に転職することができました!

転職活動にあたって、
・フロントエンドエンジニア志望でもしっかりポートフォリオを作成すること
・自己分析を行い、過去の職歴に基づく強みをアピールすること
が重要だと思いました。 
また、完全独学だったので、早めにメンターサービスを利用してもよかったなと思います。

いつ転職を目指すか、どのような学習方法が合っているかは個人によって異なりますので、自分に合ったやり方が一番です。
わたしの場合は転職先決定までの期間を短く設定していますが、長期目標として基礎をしっかり身につけた上でポートフォリオ作成してもよいと思いますし、いきなり正社員でなくともインターンをしながら学習するのもよいと思います。
ただ、やると決めたら徹底的にやること、それだけです!

少しでも参考になれば嬉しいです☺

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む