- 1. 【2022年最新】Web制作周りを無料で学べる学習サービス集
- 2. HTMLメモ
- 3. Javascriptでのページ内スクロール
- 4. 7月Vol.6ハッカソン技育CAMP2022_共同開発
- 5. Pythonでマークダウンをパースして、快適なプログラミング記事作成環境を作る
- 6. 【PC・スマホ両対応】CSSだけでモーダルの背景をスクロールさせない新しい方法（つっかえ棒式モーダル背景固定法）
- 7. htmlタグの属性修正できない場合
- 8. オシャレなタイマーを実装しよう jQuery Classy Countdown Plugin
- 9. 「後でやろ」を忘れないためにobniz【簡単】ボタンぽちだけ
- 10. ヘッダー、フッターを作っていく
- 11. レスポンシヴウェブデザイン
- 12. アニメーション
- 13. 初めての案件
- 14. background-imageの表示ラグ問題を（ほぼ）CSSのみで実装するCSS遅延読み込みで解決
- 15. Flaskでツールチップの実装
- 16. 【新規事業】SkyWayでモザイク加工したカメラ映像を送ってみるよ（前編）【プロト開発】
- 17. 「HTTP/1.1」についてのメモ
- 18. 「HTTP/1.0」についてのメモ
- 19. 「HTTP/0.9」についてのメモ
- 20. VSCodeのhtmlのひな形を作成するショートカット「！」がアップデートで使えなくなったぽい
【2022年最新】Web制作周りを無料で学べる学習サービス集
## はじめに
今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。
これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。
## この記事の対象者
– プログラミング初心者~中級者
– Web制作を学びたい人
– HTMLやCSSをより深めたい人
– ポートフォリオを作りたい人## [無料コーディング練習所](https://webdesigner-go.com/coding-practice/)
まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる[無料コーディング練習所](https://webdesigner-go.com/coding-practice/)です。
“`html
日付を入力してください。
“`
value値にデフォルトの日付をセットしてあげます。# 画像の遅延ロード
“`html
“`# スムーススクロール
“`css
html {
scroll-behavior: smooth;
}
“`# アスペクト比固定
“`css
img {
aspect-ratio: 16/9;
width: 100%;
height: 100%;
}
“`
Javascriptでのページ内スクロール
# ページ内スクロール
Webページ作成時にそれぞれのsectionにidを付与してnavのリストのaタグからページ内での遷移をスクロールで行いオシャレにしたい✨
よく見る光景なのでコードは調べたらすぐに出てきた?“`
const smoothScrollTrigger = document.querySelectorAll(‘a[href^=”#”]’);
for (let i = 0; i < smoothScrollTrigger.length; i++){ smoothScrollTrigger[i].addEventListener('click', (e) => {
e.preventDefault();
let href = smoothScrollTrigger[i].getAttribute(‘href’);
let targetElement = document.getElementById(href.replace(‘#’, ”));
const rect = targetElement.getBoundingClie
7月Vol.6ハッカソン技育CAMP2022_共同開発
2022/07/16
ハッカソン開始！
頑張るぞ！！
いえーい
Pythonでマークダウンをパースして、快適なプログラミング記事作成環境を作る
先日、社内のホームページで、プログラミング活用の事例紹介をしてほしいとの依頼がありました。
いくつかの記事をHTMLで直接書いてみたのですが、これじゃ続かないと思い、マークダウンで書くことにしました。PythonでマークダウンファイルをHTMLに変換することにし、シンタックスハイライトできるように工夫しました。
使用するPythonライブラリは
* [python-markdown](https://python-markdown.github.io/)
* [jinja2](https://jinja.palletsprojects.com/en/3.1.x/)シンタックスハイライトは[Prism.js](https://prismjs.com/index.html)を使用します。Prism.jsはあらかじめダウンロードページで、必要なオプションをチェックし、cssファイルとjsファイルをダウンロードしておきます。（今回はPythonとLine Numbersを追加でチェックしました。）
マークダウンファイルは次のように用意し、contents.mdというファイル名で保
【PC・スマホ両対応】CSSだけでモーダルの背景をスクロールさせない新しい方法（つっかえ棒式モーダル背景固定法）
スクロールチェーンを防ぐための「overscroll-behavior: contain」を応用した方法をご紹介します。
名付けて「つっかえ棒式モーダル背景固定法」です。ソースコードはこちら
https://github.com/gorimatyan/css-modal-nonscroll# 目次
[1.対象読者](#1-対象読者)
[2.モーダルの構成](#2-モーダルの構成)
[3.つっかえ棒で簡単解決](#3-つっかえ棒で簡単解決)
[4.まとめ](#まとめ)# 1. 対象読者
↓ モーダルの後ろがスクロールされてしまう人
# 2. モーダルの構成
.each(function () {
$(this).removeAttr(“height”);
});$(“iframe”).css({
‘height’: ‘550px’,
‘border’: ‘2px solid’
});●iframeの高さを自動的に調整してくれるスクリプト
(function (wi
オシャレなタイマーを実装しよう jQuery Classy Countdown Plugin
# 今回のあれ
カウントダウンするタイマーを実装します。
https://github.com/arsensokolov/jquery.classycountdown
MIT licenseのようです。色々探したけどこれが一番オシャレな気がしました。ナイス。
↓こういう動くやつを追加できます。
# 必要なもの
・jquery
・jquery.knob.min.js
・jquery.ba-throttle-debounce.js（これはなくても一応動く）
・jquery.classycountdown.js
・jquery.classycountdown.css# サンプルコード
上から
インポートするところ
divのところ
スクリプトのところ
です。
{{timeleft_minutes}}を適当に100とかしてbody
「後でやろ」を忘れないためにobniz【簡単】ボタンぽちだけ
### はじめに
「ちょっと後でやろ」って思ってたら忘れてしまう経験はありませんか？
私は数えきれないくらいあります。
グリルや電子レンジの中に忘れられた食べ物たち・・・
5分とか10分先にリマインドしてほしい、でもめんどくさいことは嫌だという方向けです。
ぽちっとボタンを押すだけで、うっかり忘れが防げます。①これ忘れそう、後で知らせて！って時にボタンをぽち
②設定した時間経過後、音楽が流れる
それだけの仕組みです。
### 使用したもの
※全てobnizスターターキットに含まれています。
obniz Board
USB micro B cable
ブザー Keyestudio_Buzzer
スイッチボタン Keyestudio_Button### 準備
obnizの準備は公式HPを参考にします。
https://obniz.co
ヘッダー、フッターを作っていく
# ハッダーを作っていく
“`html… “`
を使うと点（・）がつくからこれを外す。
つまりこの要素にプロパティをつける。
“`css
li {
list-style: none;
}
“`
これで点が外れる
# 実際使ってみる
“`application.css
li {
background-color: #808000;
list-style: none;
}
“`
# 気づき
点が消えた。成功！# ヘッダーのメニューを横並びにする。
“` application.css
.title {
background-color: #00ffff;
font-size: 36px;
float: left;
}li {
background-color: #808000;
list-style: none;
float: left;
“`## 気づき
なんかそれっぽくなっていきた。# “`padding“` 要素の余白をつける
padding-top（上）,padding-right（右
レスポンシヴウェブデザイン
.600px から800pxの間だけ背景をつける
“`
@media (min-width: 600px) and (max-width: 800px) {
body {
background: skyblue;
}
}
“`?モバイルファーストで小さい方から書いていく
・画面幅に合わせて可変を使うとき
“`
aside {
display: none; ←600px以下では広告を表示しない
}.image {
background: pink;
height: 100px;
}.text {
background: silver;
height: 100px;
}/* medium screen */
600px以下では横並びにし、textに可変を効かせる@media (min-width: 600px) {
section {
display: flex;
}.image {
width: 200px;
}.text {
flex: 1;
}
}/*
アニメーション
## transitionでアニメーションをさせてみよう
【正方形のボックスを〇に変化させたいとき】
.box:hoverに`border-radius:50%を指定。それだけだとパッと切り替わるだけなので、変化の保管をするため
.boxに
`transition-property: border-radius;
transition-duration: 1s;`?boxにtransitionで中間を補完するプロパティはborder-radiusで、
それにかかる時間は１秒だよという意味## transformプロパティを使ってみよう
ーよく使われる種類ー
・移動 transform:translate(10px, 10px); XY指定可
・回転 transform:rotate(10deg);
・リサイズ transform:scale(2,0.5); XY指定可 縦に二倍、横に半分❕複数指定する場合は注意が必要❕
rotateの後にtranslateを指定すると、回った後に移動する。
translateの後にrotateを指定す
初めての案件
こんにちは。
私はA型事業所でプログラミングをしています。
よろしくお願いいたします。来週から、実際の案件に取り掛かる予定です。
今週から出勤が週三日になり、ちょっと負荷が高くなりました。
今週から、月曜日、金曜日に加えて木曜日も出勤になりました。## 実際の案件について
実際の案件ではHTML/CSS/Javascriptという感じのスタートになりそうです。
**コーディングの案件からのスタート**です。
A型事業所のほうに既に案件がはいってきており、そちらをこなす感じになりそうです。
初めての案件で、緊張もありますが、うまく進めていきたいなと思います。案件をこなすにあたり、自分で実際にサイトを作ってから挑もうかなとも考えていました。
その時間はなさそうなので、実際に案件をこなしながら、わからないことは時間をかけて調べてやってみようかなと思います。
最初の案件は少し時間を多めに取り、調べたり、必要に応じて戻って学習しながらやっていこうと思っています。
案件をくださっている方とも連携しながら進めていくことになりますので、コミュニケーション能力も試されそうな気がします。ちょっ
background-imageの表示ラグ問題を（ほぼ）CSSのみで実装するCSS遅延読み込みで解決
:::note info
こちらはZennにて[『background-imageの表示ラグ問題を（ほぼ）CSSのみで実装するCSS遅延読み込みで解決](https://zenn.dev/crayfisher_zari/articles/24273afb875d1d)に投稿した内容と同じです
:::ベストプラクティスとも限らないですが、プレーンなHTML・CSSサイトでも手軽に実装できる方法を紹介します。
# background-imageの一瞬表示されない問題
CSSのbackground-imageはその画像が表示されるまで読み込まれません。例えばユーザーのアクションに応じてbackground-imageを変える場合、変更後の画像はユーザーアクションが行われてから初めて読み込まれます。（この読み込みは初回のみ行われるので、2回目以降は発生しません）
[遅延表示のサンプル](https://crayfisher-zari.github.io/css-background-preload/)
より具体的な現象としては、独自デザインのラジオボタンやチェックボックスをク
Flaskでツールチップの実装
本記事では、PythonのWebアプリケーションフレームワークであるFlaskでwebアプリ等を作る際に、ツールチップ機能を実装する方法について記述します。
ツールチップとは、難しい意味の単語がweb上に書かれている際にその単語や単語付近のアイコンにカーソルを合わせると、詳細な意味が書かれた吹き出しが表示されるweb機能の一種です。以下画像が今回作成したものです。
今回はよくWebサイトで見られるように、文字の近くにクエスチョンのアイコンを設け、そのアイコンにカーソルを合わせると吹き出しが表示される機能を実装しました。
# 環境
+ MacBook Air
+ Python3.7.6
+ Flask 1.1.1
+ Bootstrap 4# 実装方法
### ディレクトリ構成
ディレクトリは以下の様に構成します。今回はBoots
【新規事業】SkyWayでモザイク加工したカメラ映像を送ってみるよ（前編）【プロト開発】
# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています。アイディアの検証のために、先日作成した[SkyWay*の1対1通信アプリ](https://qiita.com/Shinkijigyo_no_Usagi/items/1d4e1cccbb6de9aa4526)に自分たちの機能を載せていこう！となる中で
**①カメラ映像に加工すること**
**②加工した映像をSkyWayを通じて送ること**が必要になりました。
*[SkyWay](https://webrtc.ecl.ntt.com/)…NTTコミュニケーションズが提供する、ビデオ・音声通話を簡単に実装できるSDKとAPIです
# この記事の位置づけ
普段
「HTTP/1.1」についてのメモ
#### 「HTTP/1.1」とは
– 「HTTP/1.0」が発表された翌年の1997年に[RFC2068](https://www.ietf.org/rfc/rfc2068.txt)として策定され、その後、[RFC2616](https://www.ietf.org/rfc/rfc2616.txt)で改定された。
– 以降の拡張・改定
– [Upgrading to TLS Within HTTP/1.1 (RFC2817)](https://www.ietf.org/rfc/rfc2817.txt)
– [Defining Well-Known Uniform Resource Identifiers (URIs) (RFC5785)](https://www.ietf.org/rfc/rfc5785.txt)
– [Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP) (RFC6266)](https://w
「HTTP/1.0」についてのメモ
#### 「HTTP/1.0」とは
– 1996年に[RFC1945](https://www.ietf.org/rfc/rfc1945.txt)としてまとめられた。
– リクエスト時にHTTPのバージョン情報が追加された。（例: `echo -e “GET / HTTP/1.0\r\n” |nc localhost 80`）
– リクエスト時のメソッドが「HTTP/0.9」の「GETのみ」から拡張された。
– GET、HEAD、POST
– POSTメソッドにより、クライアント側からサーバー側へのデータ送信が可能になった。([RFC1867](https://www.ietf.org/rfc/rfc1867.txt))
– PUT、DELETE（ブラウザでは未サポート）
– LINK、UNLINK（HTTP/1.1で廃止）
– リクエスト、応答時の両方でHTTPヘッダーが追加された。（ `Host` 、 `User-Agent` など）
– HTTPヘッダーの例
– コンテントネゴシエーションというファイルの種類や表示言
「HTTP/0.9」についてのメモ
#### 「HTTP/0.9」とは
– [Tim Berners-Lee](https://www.w3.org/People/Berners-Lee/)によって提案され、1991年にリリースされたHTTPのプロトタイプ。（1990年としている記事も多いですが、w3cの記事に「[The Original HTTP as defined in 1991](https://www.w3.org/Protocols/HTTP/AsImplemented.html)」と記載されているため、ここでは1991年としました）
– バージョン番号がなく「HTTP」と呼ばれていたが以降のバージョンと区別するため「HTTP/0.9」として位置づけられるようになった。
– サポートされているリクエストメソッドはGETのみ。
– リクエストメソッドはASCII文字列 + CRLFで構成される。（例: `echo -e “GET /\r\n” |nc localhost 80`）
– [isindexタグ](https://www.w3.org/wiki/HTML/jp/Elements/isindex)による
VSCodeのhtmlのひな形を作成するショートカット「！」がアップデートで使えなくなったぽい
7月のVSCodeのアップデートで「！」で本体ならひな形を作成できるけど使えなくなっていた。
（本来ならショートカット候補がでてき）解決方法
“html”と打って候補に挙がった”html:5″を選択すればひな形の出来上がり
VSCodeのパッチをざつーに探してみたが見当たらなかった
https://code.visualstudio.com/updates/v1_69
(結構便利だったのになぜ消してしまったのか…)
