再利用できるプレゼン用WEBページを作ろう 第３回
# CSS
素の状態では、sanitize.css のみ適用していました。
このあと、準備しておいた
1. baseDefault.css
1. develop.css
1. upLeftRight.css
1. toneGreen.cssを順次読み込んでみます。
まず CSS の中身を確認し、取り込むたびに見た目がどのように変わっていくのか見ていきましょう。## baseDefault.css
「base」「default」って、なんか意味がかぶっていてセンスのなさを感じますね。もしかしたら名前を付けるタイミングでは必然性があったのかもしれませんが忘れました。そのうち base.css か default.css に変えるかもしれません。
ディレクトリ構造の中には 2 つの baseDefault.css がありますが、develop/css/baseDefault.css は
###### develop/css/baseDefault.css
“`
@charset “utf-8”;
/**
* @package jQueryMock
* @version
再利用できるプレゼン用WEBページを作ろう 第２回
# 全体構成
今回から、実際のソースコードを見ながら解説していきます。
少しでも開発効率アップのお役に立てれば幸いです。とにかく WEB サーバなしが大前提。デモンストレーションしたい内容をすべてブラウザ側だけで実現する必要があるので、今回は jQuery を使います。
ちょっとした動作（の模倣）のあるページを作るには jQuery はうってつけです。## フォルダ構成
１ページのためにずいぶんたくさんのファイルが必要なんだな、と思うかもしれません。
JS は機能ごとに分かれているので、対応するブロックが表示対象外なら読む必要はなくなります。
CSS は baseDefault.css と develop.css 以外はレイアウト、トンマナ各１を読み込みます。今後たびたび **モジュール** という言葉を使いますが、このディレクトリ構造でいうと **common と並列にある develop のこと**だと考えてください。
今回はサンプルのため、1 種類のモジュールしか出てきませんが、本来は
1. クライアント向け管理画面の機能拡張するときに使う module01
1.
再利用できるプレゼン用WEBページを作ろう 第１回
# きっかけ
WEB エンジニアをしていて、こんな経験したことありませんか？
1. クライアントに対し、ワイヤーフレームでページの表示内容、構造を**共有、承認**される
1. 承認された内容に基づいてデザインされたページの画像を作成、提示し、**承認**される
1. 承認された内容・デザインに基づき実際に動作するページを作成、提示
1. 内容・構造・デザインすべて了承済みだったはずなのに、**いろいろ覆ってしまう**
1. 完成したはずのものに手を入れて、なんとかクライアントの要望を満たして再提示
1. **また別の要望が出てくる**、の繰り返し**なぜこうなってしまうのか**、の原因はいろいろあります。5個や10個は考えつきそうですが、その中でもかなり大きい要因は、 1. 2. の過程で「**クライアント（非エンジニア）は、実際に動くページを見ないと、提示されている内容を正しく評価できない**」ということだと思うのです。
これは「いい・悪い」の話ではなく、**単に現実です**。それに気づいてからは、可能な限り納品物に近い見た目・動作の HTML を組み、WEB ブラウザで
【CSS】position: absoluteの中央寄せ方法まとめ
`position: absolute`を適用した要素を、上下左右それぞれの中央寄せにする方法をまとめました。
## marginを使用する
### 上下左右中央
“`css
.absolute {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
“`See the Pen テーブルについて
# テーブル
# tr要素
– テーブルの１行を定義する
– 行は横方向# td要素
– テーブルデータが入るセルを定義する
[MDN]https://developer.mozilla.org/ja/docs/Web/HTML/Element/td# th要素
– テーブルのヘッダーを定義
[MDN]https://developer.mozilla.org/ja/docs/Web/HTML/Ele
リンク a要素
# 構文
“`HTML:a要素
コンテンツ名
“`# ページ内リンク
同一ページ内の指定の場所へのリンクをはりたい場合
“`
りんごりんご
“`
idを指定することでページ内のリンクに飛ぶことができる
HTML基本
# コメントアウト
“`
“`# 改行 br要素
改行したいところに`
`をつけることで改行できる
[br要素：MDNリンク]https://developer.mozilla.org/ja/docs/Web/HTML/Element/br# 区切り hr要素
区切り線をつけたい部分に`
`で区切りをつけることができる
# リスト ul要素/ol要素
順序な
あるHTML要素配下のテキストを一文字ずつ抽出する
body内に書かれているテキストをJavaScriptで一文字ずつ取得したい！！！というニッチな要望に応える記事です。
## たとえば？
“`html
たとえば？
たとえばこのように素のテキストやいろんな要素が入れ子になっている時に
特定の要素配下のテキストをすべて取得して
一文字ずつ“た” “と” “え” “ば” “こ” “の” …
と出力したい
みたいな話です。
“`## 実装コードと出力結果
### コード
“`javascript
【CSS】modal 擬似クラスが主要なブラウザで使えるようになったので試した。
## 概要
:modal 擬似クラスが主要なブラウザで使用できるようになったので、試してみた。## 環境
macOS: Monterey
ver: 12.3.1—
## 所感
今まで JavaScript 等で modal は対応していたが、:modal 擬似クラスが主要ブラウザで対応したので、便利になればと思い試してみた。（あまり調べてないのでいまいちうまく扱えなかった…）## 使い方
2 種類の要素が使用可能– showModal メソッドを使用する dialog 要素
– フルスクリーン モードになっている要素今回、showModal メソッドを使用する dialog 要素の方のみ試した。
おおよそはコードを見ていただければ分かるかと思いますので割愛。（正直今までと、労力はあまり変わらないような..?）
HTML内のリンク一覧をJavaScriptを使ってVimキーバインドで移動・参照できるようにする
– ブラウジングをしていてページ内にキーバインド参照が実装されていたら非常に捗る。
– 一部実装済みのサイトもあるが、割合として未実装の方が多いように感じる。
– 今回はHTML内のリンク一覧をJavaScriptを使ってVimキーバインドで移動・参照できるようにする方法を記録する。## 結果
– 以下の簡易的なリンク一覧で移動や参照できるようにする。
– 以下のキー操作が可能。
– j : 下に移動
– k : 上に移動
– Enter : リンク先へ遷移
## 環境
– mac OS Monterey 12.5##
Vite の MPA モードでサクッと LP の制作環境を構築する
本文はこちら
https://zenn.dev/taichi221228/articles/f52cbcfe726555
【HTML】tableタグ周りがよーわからんくなったので整理してみた。
Tableタグってなんぞや
HTMLで表を作成する際に利用するタグのこと。
実際にコード書いてみる
tr:テーブルの行部分（横方向）を指定するタグ。
th:テーブルの見出しやタイトルとなるセルを指定するタグ。
td:テーブルのセル内容を作成を指定するタグ。①trとtdタグで作成したテーブル
タイトル 名前 日付 Tableタグ周りがよーわからんくなったので整理してみた。 ともひろ 2022年9月24日(土) 15:37:11 “`html:table1.html
タイトル 名前 日付 setIntervalで指定した時間に文字を表示して音を鳴らす方法
## 秒数を計算し表示させる
setIntervalで指定した時間に文字とHTMLのaudioタグで指定した音声ファイルを使って音を出す方法を紹介します
今回のコードではカウントダウンさせています“`javascript:timer
//連想配列で指定したい秒数と表示したい文字を記述する
$(function () {
var timer = {
40: “残り40秒です”,
20: “残り20秒です”,
10: “残り10秒です”
};
“`“`javascript:timer
//60秒からカウントダウンをはじめる
var sec = 60;
“`“`javascript:timer
var timer1;
timer1 = setInterval(function () {
//secをマイナス１秒させる
sec -= 1;
// Mathでsec÷60（1分=60秒）JavaScript で本格的なノベルゲームを作ってみる #1
## はじめに
素の JavaScript でノベルゲームを作ってみようと思いたちました。
・ゲームの中では比較的簡単そう
・昔よく遊んでいたのでノスタルジーを感じる
・作りたいゲームの構想があるので、まずはその土台にしたいといった理由です。
[GitHub も上げておきます](https://github.com/Neru-K/novelgame-javascript)ので、ぜひ「ここが変だよ」「ここはこうした方がいい」などアドバイス頂けたら嬉しいです ✨## 目次
> [まずは画像を表示させてみる](#まずは画像を表示させてみる)
>[テキストを表示させてみる](#テキストを表示させてみる)
>[次にやること](#次にやること)
>[謝辞](#謝辞)
>[連載一覧](#連載一覧)## まずは画像を表示させてみる
画像の描画は canvas で作ることにします。
当初、ひとつの canvas に対して背景・キャラクターを表示させようとしたのですが、
描画の順番などに気を使う必要があったりが面倒な気がしたのと、
単純にレイHTML CSS JavaScript 基礎 ハンバーガーメニュー の作り方
初心者エンジニアなりにハンバーガーメニューの作り方をメモ用に書きました
# 全体コード
“`html:index.html
“`
“`css:style.css
@charset “utf-8”;
*, *::before, *::after{
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}#me
Blazor WebAssembyをルート以外にデプロイすると動かない
# TL;DR;
`index.html`の`
`タグをコメントアウトする。 # `
`タグ 既定の動作では、HTML内で相対パスを記述したとき、現在読み込んでいるHTMLのパスを基準として解決されます。しかし、`
`タグが指定されていると、そのパスを基準として解決されます。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/base
# Blazor WebAssemblyの`
`タグ Blazor WebAssembyでは、起動時に`index.html`から、`_framework/blazor.webassembly.js` が読み込まれるのですが、`
`が指定されているので、 – http://example.com/_framework/blazor.webassembly.js
– fie:///_framework/blazor.webassembly.jsといったように解決されます。
デプロイしたときに、`index.ht
positionプロパティはいつ使う？
# 経緯
positionプロパティを使っていると、「あれ？これpaddingやmarginでもいいんじゃない？」と思うことが何度かありました。そこでそれぞれの**使い道について**記事を書きたいと思います。## static
これは何も指定をしていないデフォルト状態。
もし使用するとしたら**打ち消し**をしたい時とかです！## relative
[使用例]
* paddingやmarginの影響を受けたくない
* 要素を少しだけずらしたい
* 謎に埋まらない隙間を埋める時
* 「absolute」「sticky」の基準にしたいとき
* 余白の外側へ飛び出すデザイン飛び出すデザイン例
## absolute
relativeを設定Cacheの超簡単解説
# Cacheとは
– サーバとブラウザーとの通信を効率的にするための情報技術。
– ブラウザーがWEBサイトに初めてアクセスした場合、staticファイル（image, html, css, javascript）はコピーを保存し、再度同じWEBサイトにアクセスした場合、ブラウザーは保存されたstaticファイル利用する。
– Cacheは満了期間が定まってないため、手動で削除する必要がある。# Cacheの利点
ネットワークトラフィクが減らし、webサイトを素早くレンダーリングすることができる。# Cacheの弱点
staticファイルが更新されてもブラウザーはコピー本を使用するため、古いままの場合がある。# cachebuster(キャッシュバスター)
Cacheの弱点を回避するために行われるのが`cachebuster`である。
cachebusterは、静的ファイル名を変更することで、古いファイルを読まないようにする方法。
やり方としては以下のお通りである。“`html:html Nimで静的ファイルの配信
[htmlgen](https://nim-lang.org/docs/htmlgen.html)の公式しか頼れなかったので、ここにメモします。
htmlgenをimportすると、HTMLタグに対応したmacroが使えます。
# 例
## h1
例えばh1タグ“`nim:nim
h1(“hello world!”)
“`↓のように解釈されます
“`html:html
hello world!
“`
サーバーとして実行して試すなら下記のように記述します。
フレームワークに[ Jester ](https://github.com/dom96/jester)を使っています。
`$ nimble install jester`としてjesterを使えるようにしてください。“`nim:nim
import std/htmlgen, jesterrouter route:
get “/”:
let html = h1(“hello world!”)
resp(Http200, html)proc main() =
AWS S3を使ってWebページを外部から見れるように（公開）する
現在知り合いのWebページを保守運用しているのだが、新たにWebページを作成する必要ができた。
そのため、以前と同じ方法で公開しようとしたのだが、だいぶ前に公開していたこともありほとんど覚えていない。
なので、備忘録も兼ねてここに記載します。# 前提として
すでにHTMLファイルとCSSファイルは作成済みです。主にこちらの記事を参考にさせていただきました！
というか、上記のページだけで大丈夫でしたね（笑）
# S3でバケットの作成
1. S3からバケットを作成をクリック
1. バケット名には自分が取得したドメイン名を入力
1. AWSリージョンは東京or大阪を選択
1. 「このバケットのブロックパブリックアクセス設定」で「パブリックアクセスをすべて ブロック」のチェックを外す
1. 「パブリックアクセスのブロックをすべてオフにすると、このバケットとバケット内のオブジェクトが公開される可能性があります。」のはチェックを入れる
1. バケットを作成をクリック以上でバケッ
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関連のことを調べてみた
