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

test

テストです。(編集中)

HelloWorld.java
System.out.println("Presentation is Learning");
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

コンタクトフォームに入力したときに自動でつく背景色を消す方法

先日メンターをしていたときにこんな質問がきました。

「予測変換で入力したときにだけ背景色がつきます。
これをつけないようにしたいのですが、どうすればよいでしょうか?」

やばい!わからないということで必死こいて調べて無事解決できました。

とりあえず、こちらをスタイルシートに書いてあげれば解決します。
すみません、意味は全くわかりませんし分かろうとしていません。笑

style.css
0
@keyframes onAutoFillStart { from {} to {}}

input:-webkit-autofill {
animation-name: onAutoFillStart;
transition: background-color 50000s ease-in-out 0s;
}

これは知らないとはまると思うので、武器として知っておくとよさそうですね。

■この記事は以下の情報を参考にして執筆しました。
https://teratail.com/questions/171007

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

席替え用のWebアプリ作ってみたよ

こんにちは。すずともです。

席替えするとき

  1. 番号書いてあるくじ作って
  2. みんなに引いてもらって
  3. 自分の引いた席に移動してもらって
  4. 自分の番号と名前をLINEグループに投げて
  5. 代表がExcelで座席表を作り
  6. 印刷して教卓に貼る

っていう感じで、多くの工程がありますね。(クラスによっても違うと思うけど…)

僕のクラスは自治性が強いので全部学生でやってますが、クラスによっては先生がしてくれるところもありますし。

まぁ、何でもいいとして、結構めんどくさいなぁと。
これ、Webアプリ作れば楽になるんじゃね?と思って、Webアプリ作ってみました。

成果物

とりあえず最初に成果物置いておきます。
Github pagesにて公開しました。
よかったら使ってくださいな。

https://kamekyame.github.io/seat_change/

Github Souece

使い方

使い方はいたってシンプル。

  1. 生徒・座席情報の入ったJSONファイルをアップロード
  2. 席替えボタンを押す!
  3. 印刷!(またはファイルダウンロード)

試しに使ってみたい人は、
Githubの方に、sample.jsonというファイルがあるので、それを自分のPCにダウンロードして、ファイルアップロードにぶち込んでください!

こんな感じになると思います
image.png

席替えボタンを押すとこんな感じにシャッフルされます!
image.png

いろいろな機能

席替え自体は、上記の手順でできるわけですが、僕のクラスはこんな単純な席替えではありません笑

というのも、

  • 6列6行の座席配置ですが、人数が35人なので1マス空席
  • 席替え前に目の悪い人や前行きたい人が前方の席を占領

っていう条件・風習がありまして、席替え前に席を固定する必要があります。そういうクラス向けに

  • 席の交換機能
  • 席の固定機能

も実装してあります。

1.席の交換機能

名前部分をクリックすると、このように、名前一覧が出てきます。
ここで好きな名前を指定すると、席の交換ができます。
image.png

2.席の固定機能

席の名前以外の部分(黄色いところ)をクリックすると座席の固定が出来ます。
image.png

生徒1を固定するとこのようにグレーになります。
この状態でいくら席替えしても生徒1の場所は変わりません。

印刷

席替えをしたら、先生のために印刷をしないと...

ということで、印刷用のCSSを用いて、印刷したときにもきれいになるようにしました。
方法は簡単で、「Ctrl + P」で印刷するだけ。

image.png

このように、ヘッダー・フッターが消えた状態で印刷ができます。

先生用⇔生徒用の切り替え

実は、今見てる座席表は、生徒側から見た視点。
先生側から見ると、教卓が手前に来る形になります。

そこで、右上の「先生用⇔生徒用」ボタン。
このボタンを押すと座席内の文字が180度回転します。

この状態で印刷すると、あっという間に教卓に貼る先生用の座席表の完成です!

image.png

ファイル形式

アップロード・ダウンロードに使われるJSONファイルの中身については、GithubのREADMEに書いてあるので、Githubを見てください!

最後に

友達との軽い話から作ってみた「席替えWebアプリ」
Vue.jsを使って書いてみたのですが、スマートにかけてよかったです!
また、印刷用のCSSの存在も知れたので、個人的にはスキルアップにつながったかなぁと。

よかったら席替えの時に使ってください!(Qiitaの記事読んでる人に学生がどのくらいいるかは置いといて...)

Githubに公開してるので、issue、PR、フォークなどご自由にどうぞ!(一応MITライセンスです)

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

addEventListenerメソッドについて

はじめに:プログラミングを学習する上で、メモとして投稿しておりますので、間違いなどがあればご指摘いただけると幸いです。

addEventListenerメソッドとは

 1つのイベントや1つの要素に対して、複数のイベントハンドラを設定できるメソッドです。

 HTMLの中に、onclick等を記述してイベントハンドラを設定することもできるが、1つの要素やイベントに対して、1つのイベントハンドラしか設定できないので、イベントハンドラを複数設定したいときに利用する。
 また、本来レイアウトを定義すべきHTMLにJavaScriptのコードを記述することはモダンな書き方ではないのでaddEventListenerメソッドの利用を推奨しているらしいです、、、。

構文

要素オブジェクト.addEventListener(イベントの種類、function(){
イベントハンドラ
}, false);

addEventListener.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>addEventListener</title>
  </head>
  <body>
    <ul id="lists">
    </ul>
    <input id="result" type="text">
    <input id="button" type="button" value="" >

    <script src="js/addEventListener.js"></script>
  </body>
</html>

addEventListener.js
    var e =document.getElementById('button');
    e.addEventListener('click', function(){
      //イベントハンドラ指定
    }, false);

終わりに

初投稿なりにコードを挿入してみたりと、少し工夫してみました。まだまだ学習することがたくさんある為、日々の積み重ねを大切にし、アウトプット重視で頑張りたいと思います、、。

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

ブロック要素とインライン要素を攻略

目的

学習中、理解に時間を要した要素について言語化をすることで理解を深めたい。
今回はブロックレベル要素とインライン要素の違いについて。
HTMLにおいて、<body>〜</body>の中で定義される要素の多くは、ブロックレベル要素インライン要素に大別される。

ブロックレベル要素とインライン要素の考え方

ブロックレベル要素

見出し・段落・表など、ウェブサイト上で「かたまり(ブロック)1」として扱われる要素。
ブラウザでも一つのかたまりとして扱われ、一般的なブラウザでは前後に改行が入る。
このブロックを積木のように積み上げることで、ウェブサイトを構築していく。

よく使うタグ例
<h1></h1> 見出しタグ
<p></p> 段落タグ
<div></div> グループ化のための汎用タグ

インライン要素

ブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。
<strong>要素のように、段落のなかの一部を強調するような装飾の役割もある。

よく使うタグ例
<a></a> リンクを作るタグ
<b></b> 文字を強調するタグ

使いかた

基本的にはブロックレベル要素を用いて、積木を積む要領でウェブサイトの骨格を作っていく。
そのブロックの中に、インライン要素などを用いて肉付け、装飾をしていく。


  1. テキストでは「箱」と表現されている 

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

ほぼ未経験Webエンジニアが入社半年でしたことまとめ(2020/11)

言語

・PHP
・HTML
・JavaScript
(・MySQL)

やったこと

・Web開発用の開発環境構築(XAMPP設定など)(なんだかんだ3,4回した気がする)
・変数や配列など基礎的な内容を理解
・Ajax勉強
・オブジェクト指向の勉強
・セキュリティ少し学んだ
・DBについて少し学んだ
・より良いコードが書けるようにリーダブルコードを読んだ
・リーダブルコードを英語で読みたいと思い、原書を購入(まだ読んでない…)
・mapboxのチュートリアル的なページを確認
・HTMLとJavaScriptにmapboxAPIを組み合わせて、マップ情報を活用したHTMLファイル作成(指定場所の面積計算など)
・エンジニア数十人が書いたエッセイ集みたいな本を買って読んだ
・メルカリ創業の本を読んだ(サクセスストーリー感があって非常に面白かった)
・kotlinとswiftをすこし内容みてみた
・UdemyでswiftとJavaScriptのコース(英語)を受講(現在進行中)

感想

・幅広く興味を持っていい経験ができた気がする
・mapboxに触れられたのはよかった
・Udemyの英語コースは、英語の勉強にもなってとてもよい
・ちょっと時間の使い方があまりうまくなかった
・もう少しやりたいことに時間を使えばよかった
・面白いものをもっと探求したかった、開発できていればよかった
・もっと本を読みたい

今後やりたいこと

・kotlinまたswiftに本格的に手を出す
・何か1つスマホアプリをリリースする
・フレームワークに手を出す
・JavaScriptでアニメーションっぽいものを駆使して何か面白いものをつくる
・mapboxを駆使して一風変わったワクワクするものをつくりたい
・mapboxでARのAPIが活用出来たら面白そうなので、ARで何かできないか模索する

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