f@ctor

今さら聞けないHTML　2022年08月18日

今さら聞けないHTML　2022年08月18日
目次

anime.js で さらに かっこいい サイト を 作る [アニメーション]

最近、こんなのを見つけました。

https://animejs.com/

anime.jsというのはhtmlの要素にアニメーションを付ける軽量なjavascriptのファイルです。
では今回はこのanime.jsを使いこなしていきましょう。

“`html:html










“`

“`javascript:javascript
anime({ //アニメを実行
// ここにふるまい,対象の要素を入力しよう

元記事を表示

人事のおじさんプログラミングを学ぶ Day2「JavaScriptのファイルをHTMLファイルに読み込む」

書籍『確かな力が身につくJavaScript「超」入門 第2版』をKindleで購入。
JavaScriptのファイルをHTMLファイルに読み込んでみる。
うむ、わかりやすい。
![2022-08-18 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2783084/69491a08-89af-9234-f1b2-92c3acb8fe0a.png)

元記事を表示

CSSとHTMLで「超」スマホアプリ風なUIを実装してみる。

## 初めに
なんか思い立ったので、やってみようと思います。
スマホでアクセスするとスマホアプリ風なUIに、パソコンでアクセスすると普通のwebサイト風のUIになるようなサイトを作ってみたいと思います。

## スマホアプリのイメージ
![1DFD064B-1098-4B69-97B5-734C0811A0A9.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740290/8eb05228-b42b-5871-71a6-5426b9020c2b.jpeg)
こんな感じの、「明らかにスマホアプリやなぁ〜」てな感じのものをイメージしています。

## HTML
まずはHTMLから組んでみましょう。
ヘッダーがあって、メニューがあって、ボディーがあって、フッターがある。そんな感じです。
“`html




jQueryを使ってテーブルの行をドラッグ&ドロップで並び替え

# 背景
ユーザーにより自分が好きな順番でtableの表示データーを設定できるように
`jQuery UI`の`sortable`を使用してHTMLのtable項目の並び順設定を作ってみました。

# 結果
![sampleGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743372/53519a35-b14a-6b80-d2f2-5b0083447763.gif)

# 環境
* jQuery: `1.8.3`
* jQuery UI: `1.8.24`

# 今回試したブラウザ
以下はテストしてみたブラウザのリストです。これ以外のブラウザにも対応できるかもしれません。
* Mozilla Firefox: `103.0.2`
* Chrome: `104.0.5112.79`
* Microsoft Edge: `104.0.1293.47`
* Safari: `15.6`

# ソースコード
## 並び替えたいHTMLのtableを用意する
“`html:html

第2弾! html & css & javascript で かっこいいサイト を 作る[アニメーション]

https://qiita.com/caleb7023/items/bfa2b365d675616196a3

前回この記事が私にとって絶好だったので2弾目を作りました。
是非、LGTMお願いします。

—

最近サイトを作りました。
https://caleb7023.hmath.pro/
私のサイトはレンタルサーバーが高いので仕方なくgoogle sitesで作ってあります。
しかし、google sitesは自由度が低すぎるということで最近、
結局レンタルサーバーを借りてhtmlで作ろうと思っています。

しかしhtmlには弱点があります。
それは ***「専門知識が必要になる」*** ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
[動くwebデザインアイデア帳](https://coco-factory.jp/ugokuweb/)というサイトを参考に作っていこうと思います。

私が気に入ってるサイトです。

では、ここから役に立ちそうな背景のアニメーションを紹介していこうと思います。

【#52 エンジニア転職学習】goqueryでhref情報をスクレイピング

# はじめに
富山県に住んでいるChikaといいます。
毎日投稿を目標に、バックエンドエンジニア転職に向けた学習内容をアウトプットします。

引き続きスクレイピングのプロジェクトをつくっていきます。

バックエンドエンジニアになるまでの学習内容は以前投稿した以下の記事を基にしています。

https://qiita.com/Chika110/items/ef54dddd565a0193ef44

# 本日の学習内容
本日は1つ目のタスクとしてURL一覧を取得するハンドラー部分を作成しました。
* **goqueryでURL一覧を取得するハンドラー作成　←Topics!!**

# goqueryでURL一覧を取得するハンドラー作成
対象である「マイナビ転職」の求人一覧ページ（https://tenshoku.mynavi.jp/list/）から、各求人詳細ページへのリンクURLを取得するところから始めます。
添付画像の`/jobinfo ~ /`をHTMLから取得してきます。
![image.png](https://qiita-image-store.s3.ap-northea

フロントエンド開発ツール Svelte の始め方

# Svelte とは

**[Svelte](https://svelte.dev/)** とは [React](https://reactjs.org/) や [Vue.js](https://vuejs.org/) のようなコンポーネント指向かつリアクティブなフロントエンドUIを簡単に開発できるツールです。

この記事の目的は「始め方」なので、他のツールとの違いや細かい説明は省きます。

# Svelte の学習

事前に用意するものは Chrome だけで十分です。前提知識は(たぶん)必要ありません。

さっそく [チュートリアル](https://svelte.dev/tutorial/basics) ([日本語版](https://svelte.jp/tutorial/basics)) にアクセスしましょう！

このチュートリアルはよくできていて、ブラウザ上でコードを書いて動かすことができます。
画面構成は以下の様になっていて、`①説明を読む` `②コードを書く` `③結果を確認する` を1画面でスムーズに進めることができます。
![image.png](https://q

html javascript で 3D

今回はサイトの見栄えをよくするための術を再びご紹介します。

下をクリックしてみてください。

https://www.midwam.com/en

かっけえええ….

ではこのようなものはどのようにして作れれているのでしょうか

今回はサイトに3Dモデルを埋め込む方法を紹介します。

# Three.js で3D

### まずは基本。ライブラリのダウンロード

今回使うライブラリはhttps://threejs.org/です。

まずは「Code」の「download」をクリックし「three.js-master.zip」をダウウンロードします。

その次に「three.js-master.zip」を解凍し、
開いて最初にある「tree.js-master」というフォルダを取り出します。

### ディレクトリ構成

ディレクトリ構造は次のようになります。

“`bat
.
├── index.js
├── index.html
└── three.js-master/
“`

### index.jsのコード

作業用フォルダの「index.js」を編集します。

次のよ

超簡単【お家で交通系ICのピッを楽しむ方法】obniz

### はじめに
小さい子からすると、ICカードでピッてするの憧れですよね。
でも本物だとそんなに何度もできないので、、、
obnizで手間なく目的のものができたので記事にしました。
とにかく簡単です。

### 準備するもの
obniz Board
USB micro B cable
ブザー　Keyestudio_Buzzer
距離センサー　HC-SR04
（全て[obnizスターターキット](https://obniz.com/ja/products/starterkit)に含まれています。）

改札機のピッの部分を印刷した紙（センサー部分はくり抜いておく）

### 実装
ブザーとセンサーをコードで指定した番号(今回はセンサーを0〜３、ブザーを9〜１１）に差し込み、コードを開発者コンソールにコピペして実行を押すのみです。
obnizの準備は[公式HP](https://obniz.com/ja/doc/reference/board-1y/quick-start/)を参考にします。

【練習問題】HTMLタグ-2

# はじめに

この記事はクイズ形式で自身のHTMLの学習をアウトプットしていきます。
問題文の条件を満たすHTMLを記述してください。

:::note warn
お手元のエディタに解答を入力したうえで
「▶正解」をクリックして回答を確認してください
:::

## 練習問題
* 1番大きい見出しを追加する
* 見出しの文字列は「はじめに」とする

正解

“`html

はじめに

“`

# 問題
## 第1問
* 汎用的なブロック要素を１つ追加する。(ID=「mainBlock」,名前=「main」）
* 追加したブロック要素の中に、汎用的なインライン要素を２つ追加する
* インライン要素の１つ目の中身の文字は「65536は216です。」
　(ID=「info1」,名前=「info1」,クラス名=「item」）
* インライン要素の２つ目の中身の文字は「水の化学式はH2Oです。」
　(ID=「info2」,名前=「info2」

ファビコン ( タブの上にある画像 ) を svg で

サイトを作ってるとき、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747899/89d27a21-c78b-0741-c2ee-137b48030f68.png)
タブの上にある画像(緑色のやつ)が画質荒いと思ったことありませんか?

まずはこの画像の変え方を教えます。

# ファビコンの変え方

“`“`の後に“`“`を追加するだけ

# 本題 ファビコンをsvgにする

簡単です。
“`html “`
　　を
“`html “`
にするだけです。

qiitaﾉﾛｺﾞｶﾜﾙｶﾅ?

html & css & javascript で かっこいいサイト を 作る[アニメーション]

最近サイトを作りました。
https://caleb7023.hmath.pro/
私のサイトはレンタルサーバーが高いので仕方なくgoogle sitesで作ってあります。
しかし、google sitesは自由度が低すぎるということで最近、
結局レンタルサーバーを借りてhtmlで作ろうと思っています。

しかしhtmlには弱点があります。
それは ***「専門知識が必要になる」*** ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
[動くwebデザインアイデア帳](https://coco-factory.jp/ugokuweb/)というサイトを参考に作っていこうと思います。

私が気に入ってるサイトです。

では、ここから役に立ちそうな背景のアニメーションを紹介していこうと思います。

# 役に立つ背景のアニメーション
## [幾何学模様](https://coco-factory.jp/ugokuweb/move02/5-4/)

CSSのdisplay: contentsでdivの仕切りを取り払い、同じHTMLでいろんなレイアウト

画面幅によりコンテンツの配置や順序が大きく変わるデザインに対して、HTMLに記述する階層構造は変えずにCSSだけで対応したい。

この記事では下図のレイアウトを題材にします。１つのセクションの中に、見出し１個、画像２個、テキストの段落４個を配置したページです。レイアウトはデスクトップ向け、タブレット向け、およびスマホ向けの３種類です。
![fig01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/03cdb09e-7b6c-c282-bb9f-3522b095bd9a.png)
※画像引用: Photo by [Johnny Africa](https://unsplash.com/photos/CgwzPOgimrg) on [Unsplash](https://unsplash.com/), Photo by [Katja Rooke](https://unsplash.com/photos/77JACslA8G0) on [Unsplash](https://unsplash.com

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

# 1.はじめに
　初めまして。55歳を過ぎてWebの勉強を始め、このほど初めてウェブサービスをデプロイしました。開発したのは、ブラウザ上の原稿用紙とでもいいましょうか、[縦書きエディタ](https://www.sakubun.tokyo)です。
![sakubun動画.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779438/622d6577-0bfa-3b58-4010-95c71368b059.gif)

# 2.なぜ縦書きエディタ？
　なぜ縦書きエディタかというと、GIGAスクールが関係しています。

　学校現場に配布される児童・生徒１人１台端末は、手軽さなどからChromebookが採用されるケースが多いのですが、文書を作成するツールは、GoogleドキュメントなどのGoogle系ツールが主体です。Google系ツールには縦書き機能がなく、日本語を教える国語の先生は大変困っています。

　教育現場で使われているにもかかわらず、日本語を縦書きできる環境がないのは教育の根幹にかかわる問題だと

VSCodeでTypeScriptのHTML埋め込み開発

# 概要

HTMLへのタグへのTypeScript埋め込みは公式ではサポートされていないのでVSCodeのHTMLモードで埋め込んでもTypeScript部分でエラーが出ます。
当たり前ですが、TypeScriptモードにするとHTML部分でエラーがでます。
HTMLモードではTypeScript部分が、TypeScriptモードではHTML部分でエラーが出ないようにしてみた。

# 方針

– そのままブラウザで実行してもとりあえず動く(余計な表示はしない)ように
– VSCodeのHTMLモード・TypeScriptモードでそれぞれエラーが出ないように
– ~~PHP~~EJSで実行すると別フォルダにちゃんとしたHTMLファイルを生成できるように

# TypeScript埋め込み

TypeScriptコードの実行にはJavaScriptへのトランスパイルが必要です、
一応Webブラウザで実行するライブラリはあるのですが、TypeScript対応のライブラリは調べた限り相当古いのしかなかったので、
今回はちゃんとメンテナンスされてそうなBabel Standalo

placeholder

placeholderを設定すると、カーソルを合わせたらすぐに書き込める。

valueを設定すると、カーソルを合わセ、削除してから必要事項を記入する。

【メモ】position: relativeとabsolute

## position: absoluteとは？
移動するときの基準が画面左上（top:0、left:0）になる。

## position: relativeとは？
移動するときの基準が元いた位置になる。つまりpositionを記述する前に配置されていた場所から移動する。

## relativeとabsoluteはセットで使うことが多い
親要素にrelative、子要素にabsoluteを当てると、（画面左上を起点ではなく）親要素を起点として位置を設定できる。

## 参考にさせて頂いた記事

>https://uxmilk.jp/63409
>https://qiita.com/ChiJ_SeaW/items/b18b2dc98443ab988ecb

floatとclearfixの使い方

# floatとclearfixの違い

ある要素の中で横並びのレイアウトを実現するために、floatをかけた要素の高さを親要素が認識しなくなることで、表示が崩れる場合がある。

### floatプロパティとは
要素に’right’や’left’といったように、値を設定すると要素を右・左寄せすることができる
また、floatは’浮く’という意味
例) float: ‘left’; (左寄せ)

### clearixプロパティとは
floatプロパティに’right’や’left’を設定することで、要素が右寄せ左寄せになった要素に対して、回り込みを解除するプロパティ

# floatで要素を横並びにする

“`index.html


“`
“`style.css
.left {
float: left;
width: 100px;
height: 100px;

CSSの基礎的知識 Part1

## CSSの基礎的な知識
### はじめに
エンジニア初心者やプログラミングを始めて間もない頃はインプットで学んだことが定着してスラスラと出てくるまで時間がかかってしまいます。しかし、だからと言ってアウトプットを辞めてしまうとすぐに忘れてしまいます。
そこで僕が感じる初心者が分かりにくいところやそれ知りたかったであろう情報を思いついた順にランダムに投稿していきます。もしよかったら参考にしてください。

### CSSとは？
まず、HTMLで記述した文字や画像等がWebページに表示されます。そしてそのWebページの文字の色や大きさ・字体、背景や配置等デコレーションをしてみやすくわかりやすくする為に利用するものです。

### CSSの使い方
まず、HTMLには　**<>,(タグ)** というもので囲った要素の名前をつけます。それに対してCSSにて指定するのが一般的です。

【例】
“`index.html.erb
<br /> CSSの基礎的な知識<br />
“`
“`index.scss
.title {
color: black;
font-siz

人事のおじさんプログラミングを学ぶ Day1 “Hello, World!”

やってみないことには始まらないということで、「14歳からのプログラミング」を読みつつ、WindowsにVisual Studio CodeとNode.jsをインストールして、JavaScriptとHTMLで”Hello, World!”のコードの書き方をネットで調べてプログラムしてみました。

![2022-08-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2783084/f5c0e5f1-f6fd-f080-089a-a367a4234cd0.png)

OTHERカテゴリの最新記事