今さら聞けないHTML　2021年02月28日

JavaScriptでPDFのファイルサイズを取得して表示させる方法

実務で使う機会があったので、忘れないように投稿。

“`ruby:html

PDFダウンロード0.0MB

“`

“`ruby:js
jQuery(function () {

jQuery.each(jQuery(“.js-pdfSize”), function () {
b(jQuery(this))
});

function b(d) {
var h = “-“;
var g = d.data(“filepath”);
if (!g) {
d.find(“.file_size”).html(h);
return
}
var e = g.split(“.”);
if (e[e.length – 1].toLowerCase() !== “pdf”) {
d.find(“.file_size”).html(h);

gridの使い方　グリッドcssを理解しよう(グリッドエリア)

# はじめに
最近知ったGridのエリアを使ったレイアウトがとても簡単で今まで使っていたflexboxよりも使いやすかったので、使い方をまとめてみました。

# グリッド線
はじめにgrid線について、
gridでは

– Y軸が「row」
– X軸が「column」

のように表します。

# 作成
それでは実際に作ってみます。今回は聖杯レイアウトという形を作っていきます。
形は下のようになります。

“`html
—————————————————————
| footer |
—————————————————————
| left | center | right |
——————————–

【初心者向け】疑似要素アイデア集。beforeとafterの組み合わせでできるいろいろなアイコンたち

# どうも7noteです。疑似要素を巧みに操り、様々なアイコン等を作るアイデア集です。

疑似要素を使えば画像やsvgを使わなくても綺麗なアイコンが作れる！

いろいろな場面で使える疑似要素のbeforeとafterの組み合わせ方をいくつか紹介します。

—

## 共通部分

“`index.html

ボタン
“`

“`style.css
a {
/* aタグの装飾を無効化 */
color: #000;
text-decoration: none;

/* 装飾 + position指定 */
border: 1px solid #000;
padding: 5px 50px 5px 10px;
po

LPお悩み→解決によくある矢印みたいな五角形をcssで作ってみる

LPデザインでよくあるこんなの


画像を作って貼ってもいいんだけど、cssで超簡単にできたのでメモ。

# 使用するのは clip-path
clip-pathとは
クリッピングが自在にできるプロパティです

詳しい説明は下部の参考になる記事やMDNの公式をご覧いただいて…

とりあえずコードだけ。

“`css:code
clip-path: polygon(0 0,100% 0, 100% 70%, 50% 100%,0 70%);
“`

##ポイント
作りたい多角形の左上から順に頂点の座標を指定していく。
座標の指定の仕方は(x軸 y軸, x y, x y…)と、x yの順番で指定する。

たとえば、普通の長方形だと…

“`css:code
clip-path: polygon(0 0,100% 0, 100%

【HTML/CSS】セレクタの種類

セレクタの種類をまとめてみました。以下のコードを例に整理していきます。

“`html:index.html

子(親要素直下のp)

子孫(親要素直下のdiv内のp)

子孫(親要素直下のdiv内div内のp)

“`
↓ブラウザ上での表示
完全未経験の学生がvue.jsでポートフォリオ作成した

[Portfolio](https://key40121.github.io/portfolio/#/)

トップページ

まず最初に，この記事では技術的な部分にはあまり触れないです．単純に初学者が作成に至るまでに参考にしたリファレンスや方法をまとめるだけです．したがって当たり前ですが，ほとんどの方にとっては何の価値もない記事となっています．

[フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話](https://qiita.com/p1ass/items/a01578b782f17f573510)

この記事に触発されて，自分もvue.jsでポートフォリオを作成しました．
他の動機として，普段の研究やバイトではpythonばかり使ってるので，web系の言語も習得したいなと思って始めました．ただ最初はDjangoを使

html10行、js no need、css (と画像少し) だけでこんなことができるコレクション

## 動機

[Webフロントエンド開発で役立つサービスまとめ#Codepen](https://qiita.com/Tsuyoshi84/items/ce2b664cdf5776970fbe#codepen)
および [CSS Art Resources](https://dev.to/_tdenise/css-art-resources-206m)を読んだ。Codepenは、

> HTML、CSS、JavaScriptによるコード実行環境を提供するサービスです。このサービスの特徴の1として、CSSの作品がアートワークのように多く投稿されており、世界中のCSS職人による素晴らしいギャラリーを堪能することができます。その技術はもはや 変態 職人の域に達しているものが多く、より高いレベルのCSSを組みたい場合に勉強になるでしょう。

というもの。そんなCodepen の https://codepen.io/tag/css-animation から、
[CSSだけでできるあんなことこんなこと](https://qiita.com/rana_kualu/items/43e8

プルダウンの作り方

#プルダウンの作り方

select要素とoption要素を使用します。

“`html
スポーツを選択してください野球サッカー　バスケットボール　バレーボール水泳　柔道
“`

select要素は・・・セレクトボックス
option要素は・・・プルダウンの選択肢

これでプルダウンが簡単に作れます。

【初心者でもわかる】ラジオボタンの選択で項目を出し分ける方法

# どうも7noteです。選択したラジオボタンによって内容を出し分ける方法について。

男性にだけ効きたい質問だったり、学生にだけに効きたい質問。
または**特定の条件にそって要素を出し分け質問項目を変える方法**について書きます。

今回サンプルで作ったのは普段検索エンジン何を使っているのかによって質問を出し分けるフォームです。
※実際に送信ボタンの実装はしていませんので、あくまで**出し分け部分のソースのみ**に特化した記事です。

## ソース

※jQueryを使用しています。jQueryってなんだ？という方は[こちら](https://qiita.com/7note/items/45bd8efbedd557667218)

“`index.html

質問：普段使う検索エンジンを教えてください。

Google
[JavaScript][iframe]別のフレームの入力フォームにアクセスしたい。

iframeでフレームを分けているWebサイトのようなものを作っているのですが。
フレームをまたいだDOM操作が難しく感じたので、備忘録として残しておきます。


index.htmlで左のフレーム、右のフレームそれぞれファイルを呼び出し、フレーム化しています。
今回のイメージは左のフレームのテキストをクリックして、右のフレームのフォームに入力するイメージです。

left.htmlの\

タグをクリックするとindex.jsのinputText()ファンクションが発火するという流れです。

###別フレームの要素にアクセスするための構文
“`
parent.フレーム名.document.要素名称.プロパティ

//↓今回の場合
parent.right_frame.document.getElem

匿名掲示板 6chan.jp を作成した話 – pull戦略について

オタクのための掲示板 6chan.jp を作成しました。その作成の経緯について書こうと思います。
http://6chan.jp

# pull戦略
Joi Itoさんによると、Pullとは、情報や資材を備蓄するのではなく、必要に応じてネットワークから引っ張り出す方法です。
https://www.techrepublic.com/article/9-tools-to-navigate-an-uncertain-future-from-new-book-whiplash/

例えば、我々の掲示板 6chan.jp では phpBB というオープンソースのフォーラムをそのまま利用しています。これは、githubというネットワークから必要なソースコードをpullした状態と言えます。

同じように、マーケティング、マネタイズ、運用マニュアル作成なども、pullによって行うことができます。つまり、必要に応じてネットワークから必要なだけリソースを引っ張り出すのです。

マネジメントの面では、支出を削減し、柔軟性を高めることができます。

例えば、Safecastは、Kickstarterでの資金

WEBページ上で、テーブルを列ごとにソートできるようにする

#はじめに

WEBページを作る際、こういったテーブルを表示したいという時があるかと思います。
この時、テーブルのタイトル行をクリックしたら、その列に従って中身がソートされればいいのになと思うことがあるかと思います。
「名前」を一回クリックしたとき
　
「名前」をもう一回クリック
【Rails 6】favicon の設定以降、他のアプリでも同じfaviconが表示される不具合を解消

#概要
favicon を設定したものの、他のアプリのfaviconまで同じシンボル画像になっていました。

他のアプリにはfavicon を設定していないのにも関わらず、同じfaviconが設定されていることの疑問を解消しましたので、その共有です。


#結論
他のアプリのfaviconも、設定することで解決する。


#同じfaviconが表示されることの仮説
※調べても情報がなかったので仮説となっています。ご参考までに。

情報が保存されるcookieが原因かと仮説を立てております。

一度アプ

【初心者向け】transformを複数指定したい時は書き順に注意！

# どうも7noteです。transformを複数書く時は書き順に注意！！！

要素を回転、拡大縮小、傾斜、移動することできる`transform`ですが、複数指定することができます。

まずtransformで使える指定の種類は以下の通り。

||書き方|指定方法例|
|:–|:–|:–|
|移動|translate|transform: translate(100px, 100px);|
|回転|rotate|transform: rotate(-45deg);|
|伸縮|scale|transform: scale(2, 2);|
|傾斜|skew|transform: skew(30deg, 30deg);|

## ○ transformの正しい複数指定の方法

“`css
/* 正しいtransformの複数指定の方法 */
img {
transform: translate(100px, 100px) rotate(-45deg);
}
“`

transformを複数指定する場合は**間を半角スペース空けます。**
これが正しい複数指定の方法です。

秒数からフォーマットされた時間表示を出したい

下記のように、元の秒数を3600で割った商、余りからhour, minute, secondを割り出して
文字列結合でフォーマットする。

“`html:index.html

“`

“`javascript:script.js
function output(s)
{
let string = “”;
let times = Math.floor(s / 5);

for (i = 1; i <= times; i++) { if ((i * 5 + 1) > s) continue;
string += generateChunk(i * 5, i * 5 + 1);
}

Google翻訳の抑制

# Google翻訳の抑制

Chromeを使ってる時、
（中国語に）「翻訳しますか？」などと出てくる場合がある。
日本語サイトなんですけど・・・

## 対策

“`conf:以下タグを使う
# まずはこれを試す

# それでもだめならこれを試す

# それでもだめならこれを試す

“`

フォームデータの送信

###form要素
データを送信する方法を定義します。その属性すべてが、ユーザーが送信ボタンを押すと送信されるリクエストを調整できるように設計されています。

###action 属性
action 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 URL でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。

###GET メソッド
GET メソッドは、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。

###POST メソッド
POST メソッドは少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。

htmlとcssのメモ

– いつか整理します

## 1行が長いけどスクロールバーでなく折り返したい時

関連するstyle

“`css
body {
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap: break-word;
}
“`
などを設定する.

– [white-space](https://developer.mozilla.org/ja/docs/Web/CSS/white-space)
– [overflow-wrap](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap)

DOM要素をjQueryオブジェクトとして使いたい

jQueryオブジェクトをfor ofで回すと、1つ1つの要素がDOMとなってしまう
jQueryオブジェクトとして使いたい場合どうするかを記していく。

先に答えを書いておくと、$()のカッコ内にDOM要素を入れるだけ

“`js
$(DOM要素)
“`

## 実際にやってみた

例を上げると、こういう場合

“`html

デルピエロ

トッティ

カモラネージ

“`

“`js
let hoges = $(‘.hoge’);
for (let hoge of hoges) {
// hogeがjQuery要素ではなく、DOM要素となっている
}
“`
hoge(hogesの各要素)をjQueryとして扱いたい場合どうすればよいか

## これでよい

“`js
for (let hoge of hoges) {
console.log($(hoge).text);
}
“`

【初心者向け】結局どのデバイスがどのブラウザに対応しているかわからん人へ。フォントメーカーを紹介

# どうも7noteです。フォント素人へ、この便利ツールよ届け！

フォントって本当にたくさん種類がありますよね。明朝体からゴシックや英数専用のフォントなど様々あります。

前置きはおいといて、**デバイスごとにどのフォントが使えるのか簡単に知る方法、知りたくありませんか？**

今回は私がフォント選びでよく使う**フォントツールをご紹介**

## フォント選びが簡単「フォントファミリーメーカー byサルワカ」

リンク： https://saruwakakun.com/font-family

何がすごいかというと

– **windows mac ios のデフォルトフォントが何かわかる**
– **直感的なUIで簡単にオリジナルフォントファミリーが作れる**

いや、ほんとにこれめっちゃ便利ですよ。

### 使い方

**「優先さ