初めてのウェブサービスに縦書きエディタを選んだ理由（３）

# 1.はじめに
　GIGAスクール構想で児童・生徒が使うChromebook用に、縦書き原稿用紙の機能をウェブで提供しようと開発した作文ウェブアプリ「[sakubun](https://www.sakubun.tokyo)」。これまで、[初回](https://qiita.com/tategaki3/items/14266860629892376d29)に原稿用紙をどうやって実現したか、[2回目](https://qiita.com/tategaki3/items/1b779a2397c47d6c27b9)には作成した原稿の保存・ダウンロード機能の実装をご紹介してきました。３回目はページネーションをどうやって実装したかをご紹介します。

https://www.sakubun.tokyo/

# 2.ページネーションとは
　ページネーションとは、ページ割りやページ送りのことで（正直、実装の必要性を感じるまでそんな言葉があることも知りませんでしたが……）、Googleで検索すると一番下に出る数字でページが選べるやつです。

　原稿用紙というとやはり縦20字詰め、横20行の計400字詰め

クロスブラウザメモ

クロスブラウザ対応について実装メモ。

１．colタグにwidth要素を付与しても一部想定外のレンダリングになる
safari,Edge(EdgeHTML)では指定した幅通りにレンダリングされない。
とりあえずtd要素に対してwidth styleを個々に指定していくことで対応する。

２．一部チェックボックスが表示されない
safari,Edge(EdgeHTML)ではappearance:noneをappearance:checkboxで
上書きできてない？ベンダーサフィックスの設定がないから？
appearance:auto(!important)だったり-Webkit-appearance:auto(!important)
みたいな対応を行ってみる

batでフォルダ内の画像ファイルをHTML一覧表示

# batでフォルダ内の画像ファイルをHTML一覧表示

データ分析などしていると大量のグラフを一覧で表示して、比較したいときがある。その際、多くの場合はtableuやquicksightなどのBI toolを用いてダッシュボードを作成し、動的なフィルターなどを用いて多種多様なグラフを閲覧可能にする。しかし、BI toolによるダッシュボードの作成は実際問題として、多少時間がかかり、手軽にグラフを一覧表示したい場合は手間である。

今回はそのようなBI toolを用いることなく、またpythonなどのプログラミング言語を必要としない、Windows標準のOS言語とbat処理でフォルダ内のグラフをHTMLで一覧表示するプログラムを紹介する。

## ソースコード
下記のようなフォルダ構成で、特定のフォルダに画像ファイル(*.gif, *.png, *.jpeg, *.jpg, *.bmp)、bat,css,jsファイルを保存する。画像ファイルは名前に規則性を持たせて保存すると、batによるhtml化の際に並べて表示してくれる。

フォルダ構成
“`
folder/
　├ graph1.

【css】writing-mode（縦書き）要素をposition:fixed;で右固定すると端が切れる　Safari/Firefox

タイトルの通り、縦書きのボタンを画面右端に固定したところ、Chromeやedgeでは問題なく見れるのに、SafariとFirefoxでは右端が切れてました。

## 横書きだったり、左固定なら問題なし

縦書き・右固定限定の不具合です。
縦ボタンなど普通設置しない?ものなのでしょうか？？^^;

ネットで調べてはみたんですが、分からなかったので、検証してみました。
まずはこちらのソースをご覧ください。

“`HTML

縦ボタン

“`

“`CSS
/* 縦ボタンのCSS */
.btn {
position: fixed;
top: 50%;
right: 0;
z-index: 10;
}

.btn a {
display: block;
color: #fff;
background-color: #277BC0;
font-size: 20px;
font-weight: bold;
text-decorat

【CSS】ついにChromeでもサポート！ :has() ってなに？

みなさん知ってますか？ `:has()`という擬似クラス。
私は存在は知ってたけど、サポートされてなすぎて泣き寝入りした記憶があります。

そんな`:has()`が、なんと先日のChromeのアプデ105でサポートされるようになりました！（firefoxではまだ使えないんだけどね）

# `:has()` ってなに？

`:hover`や`:not()`の仲間、**擬似クラス**です。

# 何ができるの？
`has = もっている` という意味の通り、 **親要素から子要素の有無を判定できます！**
下記の場合、
`.parent` の子要素に `.child` があると **`.parent`に`background-color: yellow;`を適用** します。なければ`background-color: pink;`になります。

“`html:HTML

.childあり

childなし

“`
“`scss

【CSS】主要ブラウザに対応した疑似クラス :modalを使って、モーダルを作ってみる！

## はじめに
みなさんは、`:modal`という疑似クラスをご存知でしょうか？

実は、先日Chrome 105とEgde 105がリリースされ、コンテナクエリ`@container`と疑似クラス`:has()`と一緒に疑似クラス`:modal`もサポートされました。

なので今回は、`:modal`の具体的な内容の紹介と`:modal`を使った実装方法の解説を行います。

## 疑似クラス `:modal` とは？
疑似クラス `:modal`は以下の状態の要素のスタイルを変更することができます。

:::note
・ **JavaScriptの `showModal()`によって、表示された要素**
・ **JavaScriptの`requestFullscreen()`によって、全画面表示された要素**
:::

これら状態で、疑似クラス `:modal`で指定したスタイルを当てることができます。
具体的に、それぞれの状態を解説していきます!

### JavaScriptの `showModal()`によって、表示された要素
↓こちらを例に解説していきます！
ボタンを押

人事のおじさんプログラミングを学ぶ Day13「フォームの入力内容の取得とイベント」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
フォーム内容の取得とイベントを使ってプログラムが動作するタイミングを制御してみた。

変数を含む文字列が正しく表示されないので調べたら、テンプレートリテラルを利用した記述ではバックコーテーションで囲む必要があると気づく。自分で調べたことは何よりも忘れなそうです。

【閉じタグ忘れ・不要タグの検出】HTMLエラーチェッカー【Chrome拡張機能】

## HTMLエラーチェッカー

https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja

Google Chromeの拡張機能です。
「閉じタグがない」「開始タグがない」エラーを教えてくれます。

タグの閉じ忘れや不要タグの残骸対策に役立ちます。

## 使い方

デフォルトではOFF
アイコンをクリックするとチェックしてくれます。

オプションの「`自動チェックを有効にする`」を「`ON`」にするとページを開くたびに自動でチェックをしてくれます。

## 参考ページ

https://hsmt-web.com/blog/html-error-checker/

【jQuery】tableにアコーディオンを実装＆兄弟要素内の子要素を指定する

こんにちは。E-kan株式会社の岡田です。

先日、２０行以上あるtableタグで組まれているお客様の社内用データベース管理ページの改修を行ったのですが、地味に苦労したので備忘録。

#### やりたいこと
– デフォルトは最初の２行を見出しとして表示させ、残りの行はアコーディオンで折りたたむ
– tableの下に「詳細を表示する」というテキストを置き、クリックするとアコーディオンが開き、「詳細を閉じる」という文言に変える
– アコーディオンを閉じたら見出し行の位置に戻る
– テーブルは複数あるので、個別にアコーディオンが開くようにする

“`html

元記事を表示

【Flask】url_forを使用して画像ファイルを表示する方法

Flaskのurl_forを使用して画像を表示する方法を紹介します。

## ディレクトリ構成

今回例として使用するディレクトリ構成は以下のようになってます。

“`bash
flask$ tree .
.
├── __pycache__
│   └── func.cpython-310.pyc
├── main.py
├── static
│   ├── images
│   │   ├── default.png
│   │   ├── home.png
│   │   └── logo.png
│   ├── js
│   └── style
│   └── style.css
└── templates
├── index.html
└── layout.html

9 directories, 18 files
“`

static/images/default.pngファイルを表示するやり方を記載します。

## static配下を使用するためには

今回、cssファイルやjsファイル、imageファイルはstaticディレクトリ配下に入れてい

元記事を表示

スクロールしたら一文字ずつアニメーション

スクロールして特定の要素が画面に入ったら、
テキストアニメーションする実装をしたので備忘録として。

拙いコードですが、お容赦ください。

CodePen

## コード

### HTML
“`index.html

スクロールしてください

アニメーション01

アニメーション02

“`

### CSS(SCSS)
“`style.scss
// 余白用
.text {
margin-bottom: 1000px;
}

.box {
background-color: #eee;
margin-bottom: 200px;
padding: 100px 0;
}

// アニメーション用

元記事を表示

【初心者のJavaScript応用】初心者でもプロフィールに実装できるJSコード

まずは、今回作成したプロフィールを見てみてください！
https://elma-yo.github.io/

# 付けた機能のイメージ
今回はプロフィールで書いたJavaScriptのコードを紹介します。
使用したJavaScriptの機能は、２つあります。
1. __写真にマウスホバーすると、tittle属性内の補助的な情報を表示します。__
1. __プロフ写真をクリックすると、写真と自己紹介の文章を切り替えます。__

▼　プロフィールを開くとの画面です。
![news_gohou.png](https://scontent-nrt1-1.xx.fbcdn.net/v/t39.30808-6/301807294_10229270394488821_3025631034824131016_n.jpg?stp=cp1_dst-jpg&_nc_cat=104&ccb=1-7&_nc_sid=730e14&_nc_ohc=pNaloDJ5LAoAX9sTFae&tn=br2KSX6jQvft6f-v&_nc_ht=scontent-nrt1-1.xx&oh=00_AT-99S7UIkFG

元記事を表示

プログラマになりたい/なろうかなと思う君へ。君にはプログラマの仕事を体験してもらう

# 三行
* プログラマは「提示された仕様を満たすものを作る」仕事
* 私から仕様を提示するので、実際に作ってみてください(ガイド／ヒント/模範解答付き)
* そのときに「どうやって作ったか」「どこで躓いたか」「どうやって解決したか」をメモしておくのがオススメ(面接で言うと好印象かも)

# 結局プログラマってどんな仕事なの？
どうも「応用勉強しねぇとなあ」と思ってたら何か5年くらい経ってました、デブです。
結構前に「IT系に転職したい」という友人の相談にちょくちょく乗ってまして。「で、どんなことしてんの？」って話になったわけですよ。
流石に「パソコンカタカタしてるよ」とか雑に流せないので以下のように説明したわけです。

1. 「こういうプログラムを作って欲しい」っていうのがまとめられた「仕様書」をもらう
1. 仕様書に書いてあることを満たすプログラムを作る
1. (オプション)作ったものが本当に仕様書通りに動くか試験する

厳密にはちょっと違うんですけど大体こんな感じです。
もっと言えばほとんどの場合はチームで動いているはずなので「プログラムの一部分(モジュール)」を作ることになると

元記事を表示

アロー関数の書き方

アロー関数の書き方
アローとは弓矢と言う意味

アロー関数とは…無名関数を記述しやすくした省略記法
() => {};

“`javascript

1.関数
function a(name){
return ‘hello’ + name;
}

2.関数式
const b = function(name){
return ‘hello’ + name;
}

3.アロー関数の場合①−１
const b = (name) => {
return ‘hello’ + name;
}

4-1.引数が１つの場合は「　（　）　」はいらない。
const b = name => {
return ‘hello’ + name;
}

アロー関数完成！！！！
5-1.定義の本文が１行の場合は、「 { } 」「 return 」 いらない
const b = name => ‘hello’ + name;

5-2.定義の本文が2行の場合は、「 { } 」「 return 」必要
const b = name => {
‘hello’ + na

元記事を表示

metaって何なの？

# meta知ってる？
初心者コーダや学生は知らなかったり、とりあえずスルーするmeta要素。（ちゃんと理解してコーディングされてる方々すみませんmm）ページ上で見えないmeta要素は軽視されがちです。
私も毎回meta要素まで書かれているテンプレートを使用して制作を行なっているので、ちゃんと理解できていません。ってことでまとめていきます〜

# metaって何？
タイトルにも書きましたが、metaってなんなんでしょう。
“`「META」とは「META-information」の略で、文書のメタ情報を指定し、ブラウザや検索ロボットにホームページの情報を知らせるためのタグです。メタ情報は、Googleやgooなどのスパイダーと呼ばれるロボット型検索エンジンがネットワーク上を巡回した際に拾われ、検索ページに反映されます。“`らしいです…
<head>タグ内に記述するので画面上には表示されません。
ページを見る人のための記述ではなく、コンピュータに向けた記述なのですね。

meta要素はmeta情報、メタデータとも呼ばれ、サイトの制作者や文書の説明・キーワードなどの情報や文字

元記事を表示

人事のおじさんプログラミングを学ぶ Day12「オブジェクトとCSSを使ってアイテム情報をテーブルで表示」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
オブジェクトとCSSを使って、アイテムの在庫をテーブルで表示してみた。
学習過程で書いたコードはコメントアウトして残した（コメントアウトの練習のため）。
![2022-09-06 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2783084/947eef57-60ee-8775-4a02-a4cc49b

元記事を表示

htmlの要素へ直接スタイルを付与する方法

# 直接スタイルを当てるstyle属性

-タグへ`style要素`を付与することで直接CSSを当てることができます。
“`php

～

“`

元記事を表示

HTML ボタン作成方法一覧(a,input,button,divタグ)

## 実現方法一覧
:::note warn
※実装例は「link foot」ボタンを押すと画面下に移動し、
「clickEvent」を押すとボタンの見た目「on」「off」が切り替わる仕組みです
また、formのsubmitイベントが発火した場合はイベント名がアラートで表示されます。
また、各ボタンの疑似要素:afterに「＞」を表示するように設定しています。
:::

### aタグ
クリックにより別ページまたはアンカーに移動させたい場合などにaタグをボタンの見た目にする。
他にもサーバにデータを送信しないような汎用的なボタンを作成する際に使用する。

CSSセレクタまとめ

## 親要素から見た一つ目の要素を指定
### :first-child
親要素から見た一つ目の要素を指定
### :first-of-type
親要素から見た特定のタグの一つ目の要素を指定

“`html

tiltle

テキスト1

テキスト2

テキスト3

“`

## 親要素の後ろから一つ目を指定したい
### :last-child
親要素の後ろから一つ目の要素を指定
### :last-of-type
親要素後ろから特定のタグの一つ目の要素を指定

“`html

タイトル１	本文１本文１
タイトル２	本文２本文２