What's New Qiita

20200806のHTMLに関する記事は7件です。

  • 投稿日：2020-08-06T23:16:19+09:00

git commitしたらmarkdownがHTML化する

git commitしたらmarkdownがHTML化する

Blogger用にHTMLソースがほしいのだ

2つブログが持っている。qiitaとbloggerだ。

qiitaはmarkdownをそのまま使える。だが、bloggerでmarkdownは使えない。

bloggerで使えるのは、HTMLだ。

もちろん編集しやすいのは、当然markdownだ。なので、できれば、markdownだけ作りHTMLを生成したい。

結論：git commitしたらHTML化できるようにする

そこで「git commitしたら勝手にmdファイルがhtmlになったら楽だろう」と考えた。

いろいろな方法があるだろうが、とりあえず以下のスキームを作った。

Image from Gyazo

１．markedを導入

markdownをHTML化する方法はいくらかある。自分が使用したのは、marked.jsだ。

コマンドラインで使いやすいことで採用した。marked.jsをクライアント上で使用できるようにするには、Node.jsを導入している環境で、以下のコマンドを入れる。

npm install -g marked

あとは、以下のコマンドで使えるようになる。

$ marked -o hello.html
hello world
^D
$ cat hello.html
<p>hello world</p>

詳しくは、marked.jsを参照してほしい。

2.Gitフックを利用するためpre-commit作成

GitにはGitコマンドを実行した契機でスクリプトを起動するためのgit hookという仕組みがある。

参考：Git フックの基本的な使い方 - Qiita

ここでは、pre-commitを編集する。

まず「.git/hooks」フォルダ内の「pre-commit」ファイルを編集する。

以下のようなスクリプトを作成した。ちなみにshellで作成している。

#!/bin/sh
# pre-commit
# Convert to HTML File From MD File.
# Date: 2019-05-05
# Author: Neko619<yasagureneko.trpg@gmail.com>

# MEMO:最初は必ず.gitと同じディレクトリになる
# pwd

# チェックする
# 出力先存在チェック
if [ ! -d html ]; then
  echo "create html directory!"
  exit 1;
fi

# 一文字目がMかAならばhtml化する対象とする
# 二文字目は入れているけど意味はない…
# mdフォルダ配下のmdファイルである場合を対象に
# for文でmarkedにかけてhtml化する
for var in `git status -s | awk '
  BEGIN{chr1="";chr2="";filename=""}
  /^[AM].+md\/.+\.md$/{
    chr1 = substr($0, 1, 1);
    chr2 = substr($0, 2, 1);
    filename = substr($0, 4);
    print filename;
  }
'`
do
  # 入力ファイル名
  inputfile=$var
  # 出力ファイル名
  # html配下にし、拡張子をhtmlにする
  outputfile=`echo $var | sed -e "s/\.md$/.html/"`
  outputfile=`basename $outputfile`
  outputfile=`echo html/$outputfile`
  # markedでhtmlを出力する
  marked.cmd -i $inputfile -o $outputfile
  # htmlとして整形する
  # markedは、innerHTMLで入れることを想定しているので、
  # HTMLタグなどは生成できないことから、自前で入れる。
  sed -i '1i<!DOCTYPE html>\n<html><haed>\n<title>'$var'</title>\n</head>\n<body>' $outputfile
  echo "</body>" >> $outputfile
  echo "</html>" >> $outputfile
  # 結果を出力する
  echo "marked $inputfile to $outputfile"
done

exit 0

HTMLとしては粗末なものだが、Bloggerにはソースをコピペするだけなので、最低限で十分である。

これで準備ができた。

3.markdownで作成してgit commitしHTMLを生成する

まずはとりあえず、markdownでファイルを作成する。

このとき、フォルダ構成を以下の構成として、mdフォルダ内にmdファイルを作成する。そして、mdフォルダ内にmdファイルを作成する。

ここでは、sample.mdとする。

+ .git
+ html
+ md
  + sample.md

では、例えば以下のようなmdファイルを作成したとする。

# サンプル

## サンプルだよ

- Markdownを作るとー？
- HTMLができちゃうー？

その後、git commitする。一応以下の基本的なコマンドとなる。
が、自分はVSCodeで作成しているので、VSCode上からcommitしてしまっているし、それで問題ない。

git add .
git commit -m "サンプル"

すると、htmlフォルダ上にhtmlファイルが生成される。ファイル名は、拡張子を.mdから.htmlに変わったものになる。

<!DOCTYPE html>
<html><haed>
<title>md/sample.md</title>
</head>
<body>
<h1 id="サンプル">サンプル</h1>
<h2 id="サンプルだよ">サンプルだよ</h2>
<ul>
<li>Markdownを作るとー？</li>
<li>HTMLができちゃうー？</li>
</ul>
</body>
</html>

これでbodyの内部をbloggerにコピペすれば良い。

厳密には、h1の場所はタイトル欄にもっていったり…と若干手間をかけているが、いちから作成するよりかは遥かに楽になった。

補足

ちなみに、さらにgit commitしても、ちゃんとhtmlファイルを上書きしてくれる。

なお、流石に面倒なのでHTMLフォルダ内は.gitignoreに指定してgitの管理から外している。過去のHTMLを作ろうと思えば、markdownファイルをgitで戻してそこから作れるからね。

ブログ更新もっとしよ

そういう仕組を作ったのに、ブログ更新してないのがよろしくない！

書け！　書くんだ！　ねこ！

bloggerでは、適当な事も書いてます。自由に書きたいのです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-06T22:46:27+09:00

HTML_4 表 テーブル

テーブル

<table border="5" bordercolor="色"　bgcolor="yellow"　width="100px" height="200px"　cellpadding="10"> 
// 枠線の太さ、色の指定　背景色 表のサイズ　セルの余白
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>高橋</td>
      <td>2３</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>２２</td>
    </tr>
 </table>

セルを結合

//横方向に結合する
<td colspan="2">apple</td>
//縦方向に結合する
<td rowspan="2">りんご</td>

文字のレイアウト

<tr align="left"> //左寄せ
<tr align="center">　//中央
<tr align="right">　//右寄せ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-06T22:23:35+09:00

【初心者でもわかる】親子関係が予め決まっている要素一覧

どうも7noteです。今回は多くの要素の中で既に親子関係が決まっているタグを紹介していきます。

HTMLではたくさんのタグがありますが、既に親子関係の組み合わせが決まっているものがいくつかあります。
たとえば、ulの直下（直属の子要素）には必ずliを書かなければなりません。
このようにHTMLでは既に親子関係が決まっているタグの関係性があります。
その中でも頻出する要素を全て上げましたので、まだHTMLを初めて1ヵ月～2ヵ月の方はこの記事で親子関係を全パターン覚えていっていただければと思います。

親子関係の一覧

<!-- 順序のないリスト -->
<ul>
    <li></li>
</ul>

<!-- 順序があるリスト -->
<ol>
    <li></li>
</ol>

<!-- 定義リスト -->
<dl>
    <dt></dt>
    <dd></dd>
</dl>

<!-- テーブル -->
<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

<!-- 選択ボックス -->
<select name="" id="">
    <option value=""></option>
</select>

※例外や滅多に出てこないタグなどは省いています。

解説

ulを例に見てみましょう

ulの直下の子要素には必ずliがきます。
ulの直下にdivやpを書くのはNGです。ulの中のliの中にdivやpを書くのはOKです。

<!-- li以外のタグはNG -->
<ul>
    <div></div>
    <p></p>
</ul>

<!-- OKの書き方 -->
<ul>
    <li></li>
    <li>
        <p></p> <!-- liの中に書くのはOK! -->
    </li>
    <li>
        <div></div>
    </li>
</ul>

まとめ

HTMLを勉強中の方は完璧に覚えておきたいくらい重要です！
どのタグには何の要素を書いていいのか全一覧をまとめているWEBページがありましたので、参考に載せておきます。
https://webliker.info/46840/#toc_10

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-06T22:02:13+09:00

Mac のテキストエディットでHTMLコードを書いてみて つまずいた

超ハイパースペシャル初心者の“ぴおにあ”でーす:v:

この度、プログラムのプの字も分からない私は、ブロックチェーンでサスティナブルな仕組みを作りたい！ という、その一心だけで無謀にもプログラムを学び始めることにいたしました〜〜〜:clap:ｲｴｰｲ

そんな決意をした早々、Twitterのフィードに流れてきた超初心者用の全3回講座、しかも“いまだけ無料”に超惹かれ、そっこーで申し込み　興味津々受講してみましたよ✨

講師は　黒澤（わろさわ）先生　https://qiita.com/kurosawa_kuro

お題は、
【基礎学習 HTML編 〜HTML + CSS + JavaScript + FirebaseによるTodoアプリ〜】

内容は、
先生のお手本サンプルコードをテキストエディットにコピペして、拡張子を「.html」にして保存し、Chromeのタブにドラッグ&ドロップ！！！

という、非常に優しい（はずの）レクチャーでした。

わろ先生の兄弟弟子たちは以下参照
https://qiita.com/kurosawa_kuro/private/aab2426b0c434c453df1
　

ちな、私の環境は MacOS Mojave 10.14.6　です。

　
さて、テキストエディットを立ち上げて、わろ先生が用意してくれた超初心者向けの数行のサンプルコードをコピペして、
「ファイル」　ー　「保存…　」　と進みます。

拡張子を .html にして、デスクトップに保存（保存はどこでも大丈夫らしい）
そして、その書類をChromeのタブにポイッ！！！　どやっ！？
　
　　

そーなんです、ここでトラブル発生。。。
Chromeの新しく作成されたタブには、コードがそのまま表示されておりました。

スクリーンショット 2020-08-06 21.29.43.png

ほぇ？

　
　
　正しくは⇩⇩⇩こーなるはず。
スクリーンショット 2020-08-06 22.08.13.png

　
　
　
一見表面上は間違いはない。
テキストエディットの環境設定などをいくつか変更しても解決しません。
　
グーグル先生にお伺いを立て、いくつか調べるうちに判明したことは
　
「一部Macのテキストエディットは、デフォルトが“リッチテキスト”フォーマットになっており、そのままだと拡張子をhtmlにすることで自動的に裏でコードに変換してしまう（故に見たままをブラウザで表現される/できる）。　そうしないためには、テキストのフォーマットを“標準テキスト”に変更する必要がある。」
　
とゆー、有難くも時代の変革を感じさせる情報でした。

（もうプログラミングは自動変換されるほど当たり前に使用されているのね、、、）　なーんて少し驚き、黄昏つつ、
おっしゃ！　ますます取り残されないように学ばねば:fist:　と気合が入ったのでした。
　
　　
さて、それでは標準テキストに変換すれば良い！　とドキュメントを一から作成し、最初の保存ページをみたところ、

スクリーンショット 2020-08-02 3.22.13.png

　
私は最初に、ここでフォーマットを「Webページ（.html）」を選択したのでした。
ここが、ある意味トラップ??　　保存は一旦キャンセルして、
　
　
超初心者さんは、保存の前に以下のように「フォーマット」　ー　「標準テキストにする」　で変更をお勧めします。

Mac-texteditor_ss2.png
　

Mac-texteditor_ss3.png
　
　標準テキストに変更したら、安心して先ほどの　「ファイル」　ー　「保存…」　へ
　
Mac-texteditor_ss4.png
　
　そうすると、あら不思議、保存の画面が違います。
　
　
Mac-texteditor_ss5.png
　
　
　分かってしまえば、簡単なこと。
慣れたら、一回保存してから慌てずにリッチテキストフォーマットを標準テキストに変更もできるでしょう。
　
でも、超ハイパースペシャル初心者な私は、こんなことでも三時間ほど悩んでしまったのでした。
　
　（テキストエディットでなく、Cot Editor とか他のアプリ使えばいいじゃん、という意見は脇に置いて）
　
そんな私にわろ先生は、この経験をQiitaにまとめることを勧めてくださったのです⭐️
このまま　わろ先生の素晴らしさを書き始めそうなので、それはまたの機会にして、、、。
　
今後Macのテキストエディットで躓く方がいないよう、また私の未熟な記録としてここに記載しておきます。
（いつか、こんな日もあったな〜、、、と懐かしむ日が来ますように、笑）
　
　
　

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-06T16:27:23+09:00

【初心者向け】HTML+CSSチートシート

はじめに

初心者・新卒の方々にHTML・CSSを教える機会が増え、
自分が初心者のときに
こんなものがあったら有難かったなと思ったので簡単にまとめてみました。

登場する書き方は私がお世話になっている書き方なので
より美しい書き方があればご教示いただけますと幸いです。

よくあるレイアウト

ロゴのみ右寄せになっているヘッダーナビゲーション

よくみるこのような形のレイアウト。
image.png
どうやって実装するのでしょうか？
以下のように実装することができます。

index.html
    <nav>
      <ul>
        <li class="logo">ロゴ</li>
        <li><a href="#">リスト1</a></li>
        <li><a href="#">リスト2</a></li>
        <li><a href="#">リスト3</a></li>
        <li><a href="#">リスト4</a></li>
      </ul>
    </nav>
style.html
nav ul {
 height: 60px;
 padding: 0 40px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 background: #b0c4de;
}
nav ul li {
 margin-right: 20px;
 list-style-type: none;
}
nav ul li:last-of-type {
 margin-right: 0;
}
nav ul li.logo {
 margin-right: auto;
}
nav ul li a {
 color: #333;
 text-decoration: none;
}

全体にdisplay: flexとjustify-content: flex-end;をつけ、
右寄せにしたい項目にmargin-right: autoを付与します。
左寄せにしたい場合はmargin-left: autoを付与します。

トップ固定のヘッダーナビゲーション

image.png
スクロールしてもトップの同じ位置に固定され続ける
上記のようなナビゲーションはこのように実装します。

index.html
    <nav>
      <ul>
        <li class="logo">ロゴ</li>
        <li><a href="#">リスト1</a></li>
        <li><a href="#">リスト2</a></li>
        <li><a href="#">リスト3</a></li>
        <li><a href="#">リスト4</a></li>
      </ul>
    </nav>
style.html
body {
 position: relative;
}
nav {
 width: 100%;
 position: fixed;
 top: 0;
}

position: fixedで固定指定をするだけです。

要素を親要素の上下中央に配置する

このように親要素の上下中央に子要素を配置したい場合です。
（これがまたよく使います..！）
image.png

index.html
      <div class="parent">
        <p>親要素</p>
        <div class="child">
          <p>子要素</p>
        </div>
      </div>
style.html
.parent {
 position: relative;
 width: 500px;
 height: 500px;
 margin: 30px auto 0;
 border: solid 2px #000;
}
.child {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 border: solid 2px #ff0000;
 transform: translate(-50%, -50%);
}

transform: translate(-50%, -50%);は魔法のように覚えておくと良いです。

aタグ(リンク)をボタンのように見せたい

image.png

aタグをボタンのように見せたい場合、
以下のように文字を縦中央に配置することができず
悩むことがあるかもしれません。

image.png

paddingで調整したり、前述したようにpositionで調整することもできますが
以下のようにするとシンプルです。

index.html
<a href="#" class="button">ボタン</a>
style.html
.button {
 display: block;
 width: 200px;
 height: 40px;
 background: #4682b4;
 color: #fff;
 text-decoration: none;
 text-align: center;
 border: none;
 border-radius: 4px;
 line-height: 40px; /* 要素の高さと同じだけline-heightを取ってあげる */
}

同じサイズの要素を横並びにしたい

これが一番よくあるレイアウトなのですが、
要素の中ですべて同じサイズにしたいということがあると思います。
image.png

そのような場合は以下のようにすると良いでしょう。

index.html
    <div class="wrap">
      <div class="card">1</div>
      <div class="card">2</div>
      <div class="card">3</div>
      <div class="card">4</div>
      <div class="card">5</div>
    </div>
style.css
.wrap {
 display: flex;
 width: 900px;
 margin: 20px auto;
 background: #eee;
}
.card {
 flex: auto;
 height: 200px;
 border: dotted 1px #888;
 text-align: center;
 line-height: 200px;
}

flex: auto;を付けるとすべて.cardが同じ幅になります。
他のプロパティについてはぜひこちらをご参照ください。

さいごに

今回ご紹介したものはとても初歩的な技術です。
調べれば出てくるようなものばかりですが、
始めの一歩として参考にしていただければと思います:sunny:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-06T10:56:40+09:00

typing_gameを作成しました。

what

シンプルなタイピングゲームを作成。

why

HTML,CSS,JavaScriptの学習、理解を深めるため

issue

・半角英数小文字のみ対応なので、全角日本語入力への対応。
・ミスタイプした際ライフポイントゲージが減り、０になるとゲームオーバーの機能。

index.html
<!DOCTYPE html>
<html lang=ja>
  <head>
    <meta charset="utf-8">
    <title>Typing Game</title>
    <link rel ="stylesheet" href="css/styles.css">
  </head>
  <body>
    <p class="bg">
      <img src="bg.png" alt="背景"title="背景">
    </p>

    <div class="title">
      <p id="title">Typing Game</p>
    </div>

    <div class="target">
      <p id="target">click to start</p>
    </div>

    <p class="info">
      Letter count:<span id="score">0</span>
      Time left:<span id="timer">0.00</span>

      Miss type:<span id="miss">0</span>
    </p>

    <script src ="js/main.js"></script>
  </body>
</html>
styles.css
body{
  font-family: 'Courier New',monospace;
  text-align: center;
  background-color: #b3b3b3;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

p.bg img{
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -ms-filter: blur(6px);
  filter: blur(6px);
}

.title{
  font-size: 50px;
  margin-top: 50px;
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 36pt;               /* 文字のサイズ */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
        2px  2px 9px #003366,
      -2px  2px 9px #003366,
        2px -2px 9px #003366,
      -2px -2px 9px #003366,
        2px  0px 9px #003366,
        0px  2px 9px #003366,
      -2px  0px 9px #003366,
        0px -2px 9px #003366;        /* 文字の影 */
}

.target{
  font-size: 48px;
  letter-spacing: 3px;
  background-color: rgb(161, 134, 255);
  width: 700px;
  padding: 40px;
  border-radius: 20px;

}

.info{
  display: flex;
  flex-direction: column;
}
main.js
'use strict';
{
  const words = [
    'strawberry trapper',
    'guilty night,guilty kiss',
    'jumping heart',
    'hand in hand',
    'dreamer',
    'mirai ticket',
    'self control',
    'daydream worrior',
    'lonely tuning',
    'guilty eyes fever',
    'happy party train',
    'sky journey',
    'galaxy hide and seek',
    'innocent bird',
    'shadow gate to love',
    'landing action yeah',
    'my list to you',
    'miracle wave',
    'awaken the power',
    'crash mind',
    'drop out',
    'one more sunshine story',
    'water blue new world',
    'in this unstable world',
    'pianoforte monologue',
    'beginners sailing',
    'red gem wink',
    'white first love',
    'new winding road',
    'guilty farewell party',
    'thank you friends',
    'marine border parasol',
    'next sparkling',
    'hop stop nonstop',
    'believe again',
    'brightest melody',
    'jump up high',
    'deep resonance',
    'dance with minotaurus',
    'kokoro magic a to z',
    'wake up challenger',
    'new romantic sailors',
    'love pulsar',
    'changeless',
    'never giving up',
  ];

  let word;
  let loc;
  let score;
  let miss;
  const timeLimit = 30 * 1000;
  let startTime;
  let isPlaying = false;
  var type = new Audio('gun.mp3');
  var gameover = new Audio('correct.mp3');
  var misstyp = new Audio('ready.mp3');


  const target = document.getElementById('target');
  const scoreLabel = document.getElementById('score');
  const missLabel = document.getElementById('miss');
  const timerLabel = document.getElementById('timer');

  function updateTarget(){
    let placeholder = '';
    for (let i = 0; i< loc; i++){
      placeholder += '_';
    }
    target.textContent = placeholder + word.substring(loc);
  }

  function updateTimer(){
    const timeLeft = startTime + timeLimit - Date.now();
    timerLabel.textContent = (timeLeft / 1000).toFixed(2);

    const timeoutId = setTimeout(() =>{
      updateTimer();
    },10);

    if(timeLeft < 0){
      isPlaying = false;
      clearTimeout(timeoutId);
      timerLabel.textContent = '0.00';
      gameover.play(); 
      gameover.volume = 1.0;
      setTimeout(() =>{
        showResult();
      },100)
      target.textContent = 'click to replay';
    }
  }

  function showResult(){
    const accuracy = score + miss === 0 ? 0 :score/ (score + miss) * 100;
    alert(`${score} lettters.${miss}misses. ${accuracy.toFixed(2)}% accuracy!`);

  }

  window.addEventListener('click',() => {
    if(isPlaying === true){
      return;
    }
    isPlaying = true;

    loc = 0;
    score = 0;
    miss = 0;
    scoreLabel.textContent = score;
    missLabel.textContent = miss;
    word = words[Math.floor(Math.random() * words.length)];

    target.textContent = word;
    startTime = Date.now();
    updateTimer();
  });

  window.addEventListener('keydown', e => {
    if(isPlaying !== true){
      return;
    }

    if(e.key === word[loc]){
      type.play(); 
      type.currentTime = 0;
      type.volume = 1.0;

      console.log('score');
      loc ++;
      if(loc === word.length){
        word = words[Math.floor(Math.random() * words.length)];
        loc = 0 ;
      }
      updateTarget();
      score++;
      scoreLabel.textContent = score;
    }else{
      misstyp.play(); 
      misstyp.currentTime = 0;
      misstyp.volume = 1.0;
      console.log('miss');
      miss++;
      missLabel.textContent = score;
    }
  });
}

GitHubはこちらです。
https://github.com/izn303/TypingGame

ぜひ遊んでみてください！
http://izn5656.stars.ne.jp/typing_game/

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

横並びから縦一列になるレスポンシブなレイアウトを3パターンのCSS Flexboxで実装・比較してみる

こちらに移行しました。

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

日付別

タグ一覧