What's New Qiita

20190927のHTMLに関する記事は4件です。

  • 投稿日：2019-09-27T15:13:43+09:00

【Progate】HTML&CSS初級編やってみた

タイトルがYouTuberすぎる．

Progateくん のHTML&CSS初級編をやったのでチートシート兼アウトプットしておく．
ほんとに列挙するだけ．

1.HTML編

見出し

<h1>例</h1>

段落

<p>例</p>

リンク

<a href = "URL"> 例 </a>

画像

<img src = "URL">

リスト

<li>
    <ul> 点 </ul>
    <ol> 番号 </ol>
</li>

divタグ

<div>例</div>

単体では意味がないがブロック要素としてグループ化することができる
<span>も同じだがこっちはインラインでグループ化するので，前後に改行を含まない

<head>

<head>
    <meta charset = "文字コード">
    <title>ページタイトル</title>
    <link rel = "ファイル名" href = "ファイル名.css">
</head>

フォーム

<input>テキストフィールド</input>
<textarea>テキストエリア</textarea>
<input type = "submit" value = "ボタン">

クラスの利用

div
<div class = "クラス名">

2.CSS編

セレクタ

h1{

}

この例ならh1を使った時の振る舞いを制御する

クラス

.クラス名{

}

色

color            : カラーコード;
background-color : カラーコード;

文字

font-size   : __px;
font-family : フォント名;

サイズ

width  : __px;
height : __px;

リストスタイル

list-style : none;

この例をリストで使ったらリストの黒点を消せる

枠

border : __px 種類 カラーコード;

-top(bottom, left, right)で方向を指定できる

余白

padding : __px;
margin  : __px;

上下左右に余白を設置
-top(bottom, left, right)で方向を指定できる
paddingは枠線の内側
margin は枠線の外側の余白である

入れ子のセレクタ

.クラス名 h1{

}

この例なら指定したクラスのh1を使った時の制御を指定する

横向き

float : left;

左から横向き
rightなら右から横向き

〆

初級編ではこのくらい．

環境も作らなくていいし，空き時間にサクッとできるしで手軽にやった感が出せるのはいいね．
まだ無料の中で基本をやってるだけなので教材として評価するには早いけど，言語のとっかかりとしては優秀な気がするので，短期間なら有料でやってみてもいいかも．技術書より安いしな！！

とりあえず無料でできる他の初級編もやってみよ・・・

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-27T13:13:53+09:00

数字当てゲーム

<!DOCTYPE html>





Document


<h1>Number Guessing Game</h1>

<p>We have selected a random number between 1 to 100. See if you can guess it within 10 times turns or fewer. we'll tell you if your guess was too high or low.</p>

<div class="form">
    <label for="guessField">Enter a guess:</label><input type="text" id="guessField" class="guessField">

    <input type="submit" value="Submit guess" class="guessSubmit">
</div>

<div class="resultParas">
    <p class="guesses"></p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
</div>

<script src="js/main.js"></script>


.....+html

'use strict';
{
var randomNumber = Math.floor(Math.random() * 100) + 1;

var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');

var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');

// 予想する回数
var guessCount = 1;

// ゲームリセットする
var resetButton;

function checkGuess() {
    var userGuess = Number(guessField.value);

    if(guessCount === 1){
        guesses.textContent = '前回の予想：';
    }

    guesses.textContent += userGuess + ' ,';

    if(userGuess === randomNumber){
        lastResult.textContent = 'おめでとう！正解です！';
        lastResult.style.backgroundColor = 'green';
        lowOrHi.textContent = '';
        setGameOver();  // ゲーム終了させ、リセットする感じの関数かな
    }else if(guessCount === 10){
        lastResult.textContent = 'ゲームオーバー！';
        setGameOver();
    }else{
        lastResult.textContent = '間違いです！';
        lastResult.style.backgroundColor = 'red';
        if(userGuess < randomNumber){
            lowOrHi.textContent = '今の予想は小さすぎます！';
        }else if(userGuess > randomNumber){
            lowOrHi.textContent = '今の予想は大きすぎです！';
        }
    }

    guessCount++;
    guessField.value = "";
    guessField.focus(); // .focus()はどんな関数なのかメソッドなのかまだわからん    
}

guessSubmit.addEventListener('click',checkGuess);



function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton.document.createElement('button');
    resetButton.textContent = '新しいゲームを始める';
    document.body.appendChild(resetButton);
    resetButton.addEventListener('click', resetGame);
}

function resetGame(){
    guessCount = 1;

    var resetParas = document.querySelectorAll('.resultParas p');
    for(let i = 0; i < resetParas.length; i++){
        resetParas[i].textContent = '';
    }

    resetButton.parentNode.removeChild(resetButton);

    guessField.disabled = false;
    guessSubmit.disabled = false;
    guessField.value = '';
    guessField.focus();

    lastResult.style.backgroundColor = 'white';

    randomNumber = Math.floor(Math.random() * 100) + 1;  //次の問題で別の数字を用意するために再代入を忘れずに
}

}

......+javascript

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-27T10:59:35+09:00

HTML5構文チートシート

経緯

HTML構文を記載するときのざっくりメモが欲しいのでチートシートを起こしました。
※未完です。下書き管理が面倒なので公開してますが...

基本となるhtml

DOCTYPE宣言

html5で記述されたhtml文書としてブラウザが処理するためにDOCTYPE宣言が必要です。
DOCTYPE宣言を怠るとCSSが意図しない動きをします。

<!DOCTYPE html>

HTML

属性 説明 HTML5 new
lang 言語を指定する。日本語はja、英語はen。 ◯
manifest manifestファイルのURLを指定 ◯

マニフェストファイル(キャッシュマニフェスト)

ユーザがオフライン状態でもウェブアプリケーションを利用できるように、キャッシュとして必要なファイルをローカル環境に保存するよう指定するために用いるもの。

head

HTML文書のヘッダ情報。文書タイトル(<title>)、メタデータ要素指定(<meta>)、外部ファイルの読み込み指定(<link>)、javascript記述(<script>)、スタイル指定(<style>)、ベースURL指定(<base>)などが含まれる。

とりあえずテンプレート

<!DOCTYPE html> 
<html>
 <head>
 　<meta charset="UTF-8">
 　<title>HTML5サンプル</title>
 </head>
 <body>
 　<p>HTML5で作成しました！</p>
 </body>
</html>

フォーム

セレクトボックス <select>

属性 説明 HTML5 new
autofocus 自動フォーカスを指定する ◯
disabled 操作を無効にする
form どのフォームと関連付けるか、formのID名で指定 ◯
multiple セレクトボックスに表示される要素を複数選択できるようにする
name セレクトボックスの名前を指定
size 表示する項目数を指定(1以上の整数)

■ 使用例

<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-27T08:52:51+09:00

The setbacks experienced by 80% of programming learners

I wanted an environment where I could ask questions. The setbacks experienced by 80% of programming learners

On September 2, 2019, Sakai, who runs the online programming school “Sakai Engineer School”, announced the results of a questionnaire survey on the frustration of programming learning. According to the report, about 90% have experienced setbacks.

image
Did you feel frustrated while learning programming? (Source: 侍)
In this questionnaire survey, 298 people answered, 240 of them had programming learning experience. The learning methods were “self-taught” (58.3%), “school” (19.2%), “corporate training” (11.7%), and “programming school” (7.1%) in descending order.

∙ When asked if you had experienced programming experience and experienced frustrations or deadlocks while learning programming, the percentage of respondents who answered “Yes” was 87.5%.

How to avoid "stumbling frustration"2020東京五輪コイン売りたい

“Why don't you learn programming, Mr. Ayaka?”

I am now in my first year at university, and a story about me was introduced to me as a literary girl. The content is “a female college student learns programming”.

In 2018, when I was a second year student in high school, I started using a computer that I had never touched before. It grew quickly and eventually the aspiration changed from the Faculty of Education to the Faculty of Business Administration! A woman who has experience.

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

日付別

タグ一覧