今さら聞けないHTML　2020年04月06日

storybook for htmlを使って簡単にコンポーネントのカタログを作成する

# 対象読者

– React.js,Vue.jsを使っていないプロジェクトでstorybookを導入したいけどやり方がわからない人
– マークアップ言語 + JavaScriptちょっとわかる人
– storybookの勉強はしたいけど、React.js,Vue.jsの勉強まではやりたくない人

# 成果物

## URL

https://miwa-storybook-html.netlify.com/

## GitHub

現在作成中です。

https://github.com/miwashutaro0611/html-storybook

# 対応環境

## 言語

– HTML
– SCSS

`css`で行いたい場合、「既存のscssファイルの読み込み」の部分などの`scss`を`css`に変えたり、「storybook上でscssファイルが読み込まれるように設定」の部分を飛ばすなどで対応することができると思います。(未検証)

## バージョン

– node: v12.16.1
– @storybook/html: “^5.3.18”
– node-sass:

初心者によるプログラミング学習ログ 282日目

#100日チャレンジの282日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
282日目は、

おはようございます
282日目　6h
・xdデザインカンプからのwebサイト模写
・画像をpngではなくsvgに変更#早起きチャレンジコロナウイルスの疾患者人数を可視化するサイトを作成しました

# コロナウイルスの疾患人数を可視化できるサイトを作る
疾患者が増えていると断片的にニュースで聞くものの、私自身人数規模がいまいちピンときていませんでした。
適切な危機感を持つには定量的な情報を把握するのが大事だと思い、疾患者人数をグラフ化したサイトを作りたいと思っていました。

疾患者情報を提供するAPIがあると小耳に挟んだので週末で作ることにしました。

## 仕様要件
– 世界及び日本の疾患者数の状況が一目で分かる
– 国ごとのランキングが視覚的に分かる
– スマホでスクロールせずに見れる

## 制約条件
– 土日だけで完成させる（週を跨いだら多分完成しない。リリースするなら早い方がいい）
– qiitaも土日中に書き終える（アウトプットとして残す）

# 出来上がったもの
https://github.com/growsic/covid-overview
tableの要素取得と計算結果の代入

JavaScriptを使って、tableの値の取得と代入を勉強したのでまとめました。
以下の表を例に、｢値段｣×｢個数｣の値を｢合計金額｣の欄に埋めていきます。

品物	値段	個数	合計金額
りんご	100	3
みかん	120	4
ぶどう	150	2

“`HTML

品物	値段	個数	合計金額
りんご	100	3
みかん	12 元記事を表示 BlocklyでWebページをデザイン BlocklyでWebページをデザインして表示するサイトを作成しました。JavaScript命令のブロックで動きをプログラミングします。 #「ねそプロ」ウェブサイトを作ろう この教材は、３つのWebページで構成しています。 ○　ウェブサイトを作ろう　　←　サイト作成 ○　ウェブサイトに画像登録　←　画像の登録 ○　ウェブサイトを見よう　　←　作成したサイト表示 　↓　教材はこちら http://iwate-manabi-net.sakura.ne.jp/nesopuro/ #ビジュアル　→　テキストプログラミングへ 2020年から小学校ではプログラミング教育が始まります。多くの学校で教材としてScratch等のビジュアルプログラミング使って指導を行うと思われます。小学校で体験したビジュアルプログラミングからテキストプログラミングへ橋渡しをするための教材として開発しました。HTMLタグ命令のブロックを組み合わせてWebページをデザインします。JavaScript命令のブロックでインタラクティブなページを作成できます。作成したプログラムをテキストとして表示します。ブロックで作成したビ 元記事を表示 VSCodeで自作のスニペットを登録する # 概要 VSCodeで、HTML用のスニペットを新規に登録してみる。 # スニペットとは コードパターンを登録しておくことで、それをショートカットキーで呼び出すことができる便利な仕組み。 例えば、HTMLファイルで「`html:5`+[`Tab`]」と入力すると、HTMLファイルのテンプレートがすぐに作成できる。 ## 自作スニペットの登録方法 スニペットは。`.html`や`.java`など、ファイル形式ごとに登録するjsonファイルが用意されている。 以下からは 1. 設定ファイルを開く 2. スニペットを登録する 3. 実際に表示を確認する の流れで自作スニペットの登録方法を述べる。 ### 1. 設定ファイルを開く 「ファイル」→「基本設定」→「ユーザースニペット」をクリック。 するとファイル形式を選択する画面が表示される。 今回は「HTML」にスニペットを登録してみる。 ### 2. スニペットを登録する。 設定ファイルはjson形式で記述できる。 デフォルトでは色々と英語でコメントが書かれているが、とりあえず全部消してOK。 スニペットは以下の感じで記述する。 元記事を表示 初心者によるプログラミング学習ログ 281日目 #100日チャレンジの281日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 281日目は、 おはようございます 281日目　2.0h ・xdデザインカンプからのサイト模写 ・メンターさんからの修正やる#早起きチャレンジ【CSS】最低限の見た目にするためにコンテンツを画面の中心にしたいだけです。 # 1. 記事の目的 **わたしはCSSが書けません。** しかし、htmlやjavascriptで作成した成果物やコンテンツを、最低限の見た目にしたいという思いはあります。 **「最低限の見た目」＝「画面サイズに依存せずに画面の中心に配置する」**と考えた私は、**「なら、成果物を画面の中心にもってくるCSSをいつでも使えるように用意しておこう。」**と決意しQiitaに投稿しました。それだけです。 # 2. コード（コピペ用） bodyタグに対して、以下のようにCSSを設定することで、コンテンツを中心に配置できます。 “`css body { margin:0; display:flex; min-height:100vh; justify-content:center; align-items:center; /* flex-direction: column; */ } “` 一般公開するので、一通り解説をします。 詳細は参考リンクに譲ります。 # 3. CSS の解説 ## 3-1. 解説用html 解説用のhtm 元記事を表示 あつ森の魚・虫リストCSVをVueでテーブル表示し、現在時刻でソートしました。 ## できたもの [こちら](https://kackie.github.io/vue_csvReader/atsumori.html) 途中だけどとりあえず公開しちゃいます。 あとで綺麗にまとめます。 ## あとでつくるリスト – 時間プルダウンに「絞り込まない」追加 – 項目並び替え実装(売値の昇順、降順) – Cookieを使用して南半球などのチェック設定を保持 – Cookieを使用して捕まえたかどうかのチェック項目を追加 – レスポンシブ化 元記事を表示 positionプロパティについて #positionプロパティとは？ 指定した要素の配置方法を決めることができるプロパティです。 ボックスの配置方法を相対位置か絶対位置かを指定する際に使用します。 主に一緒に使われるのは、**top / bottom / left / right** などです。 ##positionの値について 振り返り用。 – **static** デフォルトの左上を基準値とします。この値のときには、top、bottom、left、rightは適用されません。 ※positionを指定していない親ボックスは全てstaticになります。 `覚え方 → 初期値！` – **fixed** 絶対位置への配置となり、ブラウザ表示領域（ウィンドウ）の左上を基準位置とします。 またスクロールしても位置が固定されたままとなります。 `覚え方 → 動かざること山の如し！fixedの場所が〜〜？ \\\ぜった〜い///` – **relative** 相対位置への配置となります。staticを指定した場合と同じ基準位置になりますが、top、bottom、left、rightは適応されます。 `覚え方 → 親ク 元記事を表示 【WordPress】こんなことかよ、、をなくす豆知識 #経緯 この記事を投稿するにあたって、自分自身がWeb制作をはじめるにあたって、最初にぶつかった見えない壁についてを共有していきたいと思います。 はじめたばかりの頃「あれ！？ここってどうなってるんだ？？」ってところがググってみても意外に見つからなかったりするんですよね。 他の人は当たり前のようにできていることなのかな？なんて思いましたが、自分のメモと同じような苦悩を抱えている方の一助になれば幸いでございます。 #注意 ここでは、HTML＆CSSのコーディングとWordPressのはじめ方のような導入部分の解説は行いません。 すでに、ローカルでの環境構築は行われていることを想定しております。 その際にHTML＆CSSでコーディングした時とWordPressにあげた時とで、壊れるところが個人的に戸惑ってしまったので、そのポイントを中心に多くしていきたいと思いいます。 #【目次】今回つまづいたポイント 1.謎の空白 2.表示されない画像 3.お問い合わせフォーム 4.効かないCSS・SCSS #1.謎の空白 直接自前エディターで記述を行う際には全く問題ないのですが、WordPressの 元記事を表示 【手順を解説】Atomエディタで作成したHTMLファイルを実際のWebブラウザで確認する方法 ##「Atomエディタで作ったHTMLをWebブラウザでどうなるか見たいな！手順が知りたいです。」 一番最初に使う時が、一番難しいですよね！ ####このページでわかること – Atomエディタ初の人が、作ったホームページ（HTML)をWebブラウザで確認してみる方法 – CSSがPreviewに反映されなくて困っている – 画像付きでどこをクリックすればいいか知りたい ということがわかります。 このページでは、Atomエディタ初の人が、作ったホームページ（HTML)をWebブラウザで確認してみる方法を写真を交えて解説しています。 今回の記事は、すでにWebブラウザで確認するhtmlファイルがある場合の手順解説記事です。 ##HTMLがPreviewで見れるのに、CSSがPreviewに反映されなくて困っている そんな場合にも、この記事が対処方法として、ブラウザでCSSの反映を確認することができます。 ###■【手順を解説】Atomエディタで作成したHTMLファイルを実際のWebブラウザで確認する方法 Atomエディタタブの一番左側、projectタブから、作成したH 元記事を表示 HTML備忘録1 #HTML ###HTMLファイルの型 \はhtmlのバージョン(HTML5)を宣言している。 \要素はページに関する情報。Webページの設定を記述する。 \要素は実際に表示したい内容を記述する。 注意) **headを記述し終えてから、bodyを記述すること** **relはファイルとの関係性を示す。rel=”stylesheet”ならcssファイルとの関係性。** **hrefにページのurlを記述する** “` “` ###ブロック要素とインライン要素 ブロック要素 : 前後で改行が入り、親要素の幅いっぱいに広がる要素。 インライン要素 : 元記事を表示 Reactぴえんチャレンジ # Reactぴえんチャレンジって何？ [nikoさんの記事](https://qiita.com/ksuzu/items/a9175f3a9aa4ff7c2020)に触発されたものです。 2019年12月からUdemyでReactの学習を開始したのですが、練習に丁度よいチャレンジだと思いやってみました。 # チャレンジ結果 画像をクリックしてください。 [](https://pien-moji-by-pitang1965.netlify.com/) # チャレンジのポイント 1. スライダーを実装するため、初めて[Material UI](https://material-ui.com/)というものを使ってみました。 2. ReactのHooksを学習したので、クラスコンポーネントを使わず、propsでバケツリレーしないパラメータの引き渡し方法 元記事を表示 Python-Markdownのソースを読んでみる：パーサの作り方 # 目的 マークダウンのパーサライブラリがどのように実装されているのか学ぶことにしました。（唐突） Javaのdomパーサの設計（デザインパターン）が素晴らしいとのことですが、まずは慣れているPythonのライブラリを探してみました。 ちなみにJavaのはこれ。 https://www.tutorialspoint.com/java_xml/java_dom_parse_document.htm 今回は以下のライブラリのソースを読んでみます。 Python-Markdown https://github.com/Python-Markdown Markdown->HTMLへの変換ができるみたいです。 当然、中でMarkdownの解析を行なっているわけで、どのような設計になっているのか、拝見しましょう！ 理解が間違っている箇所などありましたら、ご指摘ください…！ # 注意書き `Python-Markdown/markdown/markdown/` 以下にコアな関数たちが集められているようです。 今後は面倒なので、基本的にこのディレクトリ以下のファイルを`sampl 元記事を表示 ブログにYoutubeを貼り付ける方法 # 概要 自身のYoutubeを自分のブログに貼り付けたのでメモ 動画にもしてみました。 `(完全に個人趣味なので見応え0かも…)` [](http://www.youtube.com/watch?v=pChiXpnyl1s) # 結論 こんな感じになりました。 https://hashito.biz/ [](https://hashito.biz/) ## ソースコード “`html @Youtube 元記事を表示 10px以下の文字が含まれたWebデザインが上がってきたので対応した 先日、フォントサイズが10px以下になるサイトのコーディングを(無理やり)行ったので、その時の対処を書いておきます。 着手後まもなく私の手を離れたので、下記の対応に不足があったのかどうかも今となっては謎ですが、とりあえず残しておきます。 対応方法に不足があるかもしれませんので、その際は優しくアドバイスをいただけますと幸いです。 # 10px以下のフォントは表示に難あり “`html:index.html 元記事を表示 初心者によるプログラミング学習ログ 280日目 #100日チャレンジの280日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 280日目は、 おはようございます 280日目　2.5h ・xdデザインカンプからのサイト模写 ・メンターさんからの修正をやる ・ヘッダーの上部とフッターの下部の謎隙間解決に手間取る#早起きチャレンジももかん様への回答欄につけたかったHTMLコード “`html:try1.html element 1 element 2 element 3 get.sortlist1は… {{ sortlist1 }} set.sortlist2は… {{ sortlist2 }} OTHERカテゴリの最新記事 2024.09.19 JavaScript関連のことを調べてみた 2024.09.19 JAVA関連のことを調べてみた 2024.09.19 iOS関連のことを調べてみた 2024.09.19 Rails関連のことを調べてみた 2024.09.19 Lambda関連のことを調べてみた 2024.09.19 Python関連のことを調べてみた