- 投稿日:2020-05-31T23:03:27+09:00
2020/05/31 プログラミング(WEBデザイン)学習1日目 メモ
本日の学習範囲
ドットインストール
・HTML/CSSの学習環境を整えよう [macOS編] #01〜#05
・はじめてのHTML #01〜#07
(学習時間:2時間)環境構築
ドットインストールで推奨していた
・Google Chrome(ブラウザ)
・Visual Studio Code(コードエディター)
・Ricty Diminished(フォント)
を準備したVisual Studio Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Microsoftが提供しているコードエディター
Windows以外でも動作するRicty Diminished
https://rictyfonts.github.io/diminished
プログラミング用フォントHTML学習メモ
HTML
Hyper Text Markup Languageの略
Webページ作成に使用するマークアップ言語マークアップ
文章をタグで囲むことで、文章を構造化すること
要素
開始タグと終了タグを用いて構成される全体
属性
要素に対して性質を与える
index.html
サイトのトップページ
ブラウザで確認する方法
エディターのタブをブラウザのタブにドラッグ&ドロップする
h1タグ
<h1>文字</h1>
最上位の見出しを記述するタグ
h…headingの略、h1〜h6の6段階pタグ
<p>文字</p>
paragraphの略
一つの段落を記述するimgタグ
<img src="URL">
画像を表示するsrc属性
<img src="URL">
Sourceの略
画像のあるURLを指定するwidth属性
<img src="URL" width="数値">
画像の幅をピクセル単位で指定するheight属性
<img src="URL" height="数値">
画像の高さをピクセル単位で指定するalt属性
<img src="URL" alt="文字">
画像が表示されない場合の代替テキストを指定するDOCTYPE宣言
<!DOCTYPE html>
文書の先頭に記述する、文書がHTMLで作成されていることを示すための宣言htmlタグ
<html></html>
HTML文書であることを示すルート要素lang属性
<html lang="言語"></html>
languageの略headタグ
<head"></head>
文章のヘッダー部分を指定するbodyタグ
<body></body>
ブラウザ画面に表示する内容を指定する字下げ(インデント)
コードを読みやすくするため、文章の先頭に一文字分空白を入れること
字下げしたい部分を選択して[tab]を押すと、その部分が字下げできるmetaタグ
<meta 属性>
head要素内に記述し、文書に関する情報を指定、 ブラウザや検索エンジンに知らせるcharset属性
<meta charset="文字コード">
head要素内に記述し、文書の文字コードを指定するUTF-8
世界的にポビュラーな文字コード
titleタグ
<title>文字</title>
head要素内に記述し、文章のタイトルを表示する
ブラウザのタブや検索エンジンに表示されるfavicon
ブラウザのタブに表示されるアイコン
linkタグ
<link 属性>
head要素内に記述し、そのページと関係する他のページを関連付けるrel属性
<link rel="">
relationshipの略
リンク先の位置付けを示すhref属性
<link href="URL">
Hypertext Referenceの略。
リンク先を示すname属性
<meta name="">
要素の名前を指定するcontent属性
<meta name="" content="">
メタデータの内容を指定する
name="description"の場合、文書の概要を指定し、検索エンジンに表示される
- 投稿日:2020-05-31T23:03:27+09:00
2020/05/31 プログラミング学習1日目 メモ
本日の学習範囲
ドットインストール
・HTML/CSSの学習環境を整えよう [macOS編] #01〜#05
・はじめてのHTML #01〜#07
(学習時間:2時間)環境構築
ドットインストールで推奨していた
・Google Chrome(ブラウザ)
・Visual Studio Code(コードエディター)
・Ricty Diminished(フォント)
を準備したVisual Studio Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Microsoftが提供しているコードエディター
Windows以外でも動作するRicty Diminished
https://rictyfonts.github.io/diminished
プログラミング用フォントHTML学習メモ
HTML
Hyper Text Markup Languageの略
Webページ作成に使用するマークアップ言語マークアップ
文章をタグで囲むことで、文章を構造化すること
要素
開始タグと終了タグを用いて構成される全体
属性
要素に対して性質を与える
index.html
サイトのトップページ
ブラウザで確認する方法
エディターのタブをブラウザのタブにドラッグ&ドロップする
h1タグ
<h1>文字</h1>
最上位の見出しを記述するタグ
h…headingの略、h1〜h6の6段階pタグ
<p>文字</p>
paragraphの略
一つの段落を記述するimgタグ
<img src="URL">
画像を表示するsrc属性
<img src="URL">
Sourceの略
画像のあるURLを指定するwidth属性
<img src="URL" width="数値">
画像の幅をピクセル単位で指定するheight属性
<img src="URL" height="数値">
画像の高さをピクセル単位で指定するalt属性
<img src="URL" alt="文字">
画像が表示されない場合の代替テキストを指定するDOCTYPE宣言
<!DOCTYPE html>
文書の先頭に記述する、文書がHTMLで作成されていることを示すための宣言htmlタグ
<html></html>
HTML文書であることを示すルート要素lang属性
<html lang="言語"></html>
languageの略headタグ
<head"></head>
文章のヘッダー部分を指定するbodyタグ
<body></body>
ブラウザ画面に表示する内容を指定する字下げ(インデント)
コードを読みやすくするため、文章の先頭に一文字分空白を入れること
字下げしたい部分を選択して[tab]を押すと、その部分が字下げできるmetaタグ
<meta 属性>
head要素内に記述し、文書に関する情報を指定、 ブラウザや検索エンジンに知らせるcharset属性
<meta charset="文字コード">
head要素内に記述し、文書の文字コードを指定するUTF-8
世界的にポビュラーな文字コード
titleタグ
<title>文字</title>
head要素内に記述し、文章のタイトルを表示する
ブラウザのタブや検索エンジンに表示されるfavicon
ブラウザのタブに表示されるアイコン
linkタグ
<link 属性>
head要素内に記述し、そのページと関係する他のページを関連付けるrel属性
<link rel="">
relationshipの略
リンク先の位置付けを示すhref属性
<link href="URL">
Hypertext Referenceの略。
リンク先を示すname属性
<meta name="">
要素の名前を指定するcontent属性
<meta name="" content="">
メタデータの内容を指定する
name="description"の場合、文書の概要を指定し、検索エンジンに表示される
- 投稿日:2020-05-31T21:05:56+09:00
【マークアップ 】デザインボタン
概要
ボタンに少しデザインを付けることで、サイトがカッコ良くなる〜
と思い実装しました!今回紹介するのは、立体的に見えて押し込み式のボタンとなります
実装
views/index.html.haml.btn .new__dispaly--commit = f.submit "Submit", class:"commit-btn"index.scss.btn { input.commit-btn { display: inline-block; position: relative; padding: 0.5em 1.4em; text-decoration: none; background: #1d4d8b;/*ボタン色*/ color: $white; border-bottom: solid 5px #123158;/*ボタンの下 色*/ border-right: solid 5px #5375bd;/*ボタンの右 色*/ } input.commit-btn:before { content: " "; position: absolute; bottom: -5px; left: -1px; width: 0; height: 0; border-width: 0 6px 6px 0px; border-style: solid; border-color: transparent; border-bottom-color: $white; } input.commit-btn:after { content: " "; position: absolute; top: -1px; right: -5px; width: 0; height: 0; border-width: 0px 6px 6px 0px; border-style: solid; border-color: white; border-bottom-color: transparent; } input.commit-btn:active { /*ボタンを押したとき*/ border:none; -webkit-transform: translate(6px,6px); transform: translate(6px,6px); } input.commit-btn:active:after, input.commit-btnt:active:before { content: none;/*ボタンを押すと線が消える*/ } }実装結果
ボタン:静止画像
ボタン:動画
※Gyazoで撮影していますので、タイミングによっては見れないかもしれません
https://gyazo.com/d5c37521452af8a951b69bf658ac2f53
感想
HamlとScssで簡単実装できました!
皆様もぜひ活用してください参考
- 投稿日:2020-05-31T20:30:04+09:00
divタグをカスタマイズしてWYSIWYGエディタっぽいものを自作する
概要
divタグをカスタマイズしてWYSIWYGエディタっぽいものを作りたい。
WYSIWYGエディタっぽいものということで、WEBサイトの装飾ごとコピペができるようになるまで作ります。環境
- html
- scss
- javascript
実装
まずは見た目をテキストエリアに近づける
html<div class="textarea"></div>scss.textarea { width: 200px; height: 100px; border: solid 1px #a9a9a9; padding: 3px; overflow: auto; }入力を可能にする
devタグに
contenteditable="true"
を指定すると入力できるようなりますhtml<div class="textarea" contenteditable="true" ></div>scss.textarea { width: 200px; height: 100px; border: solid 1px #a9a9a9; padding: 3px; overflow: auto; }これで、他のページからhtmlタグやスタイルごとコピペできるようになります。
placeholderを作る
html部分
divタグにdata属性を付けて実装します
data-placeholderactive
でplaceholderのon/offできるようにする。デフォルトはon(true)data-placeholder
でplaceholderとして表示するテキスト指定してするhtml<div class="textarea" contenteditable="true" data-placeholderactive="true" data-placeholder="ここに文章を入力してください" ></div>CSS部分
data-placeholderactiveがtrueの時だけ、placeholderを表示するように設定します
scss.textarea { width: 200px; height: 100px; border: solid 1px #a9a9a9; padding: 3px; overflow: auto; &[data-placeholderactive="true"]::before { content: attr(data-placeholder); opacity: .6; } }javascript部分
textarea
クラスに対してイベントを設定- 文字が入力されていたら、placeholderactiveをon(true)、そうでない場合はoff(false)とする
javascriptvar ele = document.getElementsByClassName("textarea")[0]; ele.addEventListener('input', function() { if ( ele.textContent.length === 0 ) { ele.setAttribute('data-placeholderactive','true'); } else { ele.setAttribute('data-placeholderactive','false'); } });(仮)完成
こんな感じになります。
See the Pen make wysiwyg editor div @v1 by ishi720 (@ishi720) on CodePen.
バグ修正
これで完成。と言いたいところですがバグがあります。
ということで、修正していきます。(コードは差分のみ記述します)未入力の状態で改行するとplaceholderが残る問題
- (問題) Ender & backspaceすると想定した動きをしていない
- (原因) ele.textContent.lengthで改行がカウントされていない
- (対策) 文字数が0・改行コードが1の時は空にする必要がある
ということで修正(ちょっと雑ですが...)
javascriptvar ele = document.getElementsByClassName("textarea")[0]; ele.addEventListener('input', function() { - if ( ele.textContent.length === 0 ) { + if ( ele.textContent.length === 0 && ( ele.innerText.match(/\r\n|\n/g) === null || ele.innerText.match(/\r\n|\n/g).length === 1 ) ) { + ele.textContent = "";//強制的に中身を空にする ele.setAttribute('data-placeholderactive','true'); } else { ele.setAttribute('data-placeholderactive','false'); } });完成したもの
まだバグがあるかもですが、以下が完成物となります。
See the Pen make wysiwyg editor @v2 by ishi720 (@ishi720) on CodePen.
終わり
- 投稿日:2020-05-31T16:53:09+09:00
Django ページネーションについて教えていただきたいです
Python Djangoという参考書で勉強していたのですが
4−3ページネーションの「ページの移動はどうするの?」で躓いてます。
firstはちゃんと動くのですが、prev,next,lastがどうしてもPage not foundになってしまいます。
何方か教えてくれませんか?
ソースはこんな感じです
初投稿なのでうまく使えてないと思います。すみません
django_app/hello/url.py
from django.urls import path
from . import viewsurlpatterns=[
path('',views.index,name='index'),
path('int:num',views.index,name='index'),
path('create',views.create,name='create'),
path('edit/int:num',views.edit,name='edit'),
path('delete/int:num',views.delete,name='delete'),
path('find',views.find,name='find'),
path('check',views.check,name='check'),
]django_app/hello/views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from .models import Friend
from .forms import FriendForm
from .forms import FindForm
from django.db.models import Q
from django.db.models import Count,Sum,Avg,Min,Max
from .forms import CheckForm
from django.core.paginator import Paginatordef index(request,num=1):
data = Friend.objects.all()
page = Paginator(data,3)
params = {
'title': 'Hello',
'message':'',
'data': page.get_page(num),
}
return render(request,'hello/index.html',params)create model
def create(request):
if (request.method == 'POST'):
obj = Friend()
friend = FriendForm(request.POST,instance=obj)
friend.save()
return redirect(to='/hello')
params = {
'title' : 'Hello',
'form' : FriendForm(),
}
return render(request,'hello/create.html',params)
def edit(request,num):
obj = Friend.objects.get(id=num)
if (request.method == 'POST'):
friend = FriendForm(request.POST,instance=obj)
friend.save()
return redirect(to='/hello')
params={
'title' : 'Hello',
'id' : num,
'form' : FriendForm(instance=obj),
}
return render(request,'hello/edit.html',params)
def delete(request,num):
friend = Friend.objects.get(id=num)
if (request.method == 'POST'):
friend.delete()
return redirect(to='/hello')
params = {
'title' : 'Hello',
'id' : num,
'obj' : friend,
}
return render(request,'hello/delete.html',params)def find(request):
if (request.method == 'POST'):
msg = request.POST['find']
form = FindForm(request.POST)
sql = 'select * from hello_friend'
if (msg != ''):
sql += ' where ' + msg
data = Friend.objects.raw(sql)
msg = sql
else:
msg = 'search words...'
form = FindForm()
data =Friend.objects.all()
params = {
'title' : 'Hello',
'message' : msg,
'form' :form,
'data' :data,
}
return render(request,'hello/find.html',params)
def check(request):
params={
'title' : 'Hello',
'message' : 'check validation.',
'form' : CheckForm(),
}
if (request.method == 'POST'):
obj = Friend()
form = FriendForm(request.POST,instance=obj)
params['form'] = form
if (form.is_valid()):
params['message'] = 'OK!'
else:
params['message'] = 'no good.'
return render(request,'hello/check.html',params)django_app/hello/template/hello/index.html
{% load static %}
<!DOCTYPE html>
{{title}}
href="{% static 'hello/css/style.css' %}" />
{{title}}
{{message|safe}}
id
name
age
birthday
{% for item in data %}
{{item.id}}
{{item.name}}
{{item.age}}
{{item.mail}}
{{item.birthday}}
{% endfor %}
{% if data.has_previous %}
«first
«prev
{% endif %}
[{{data.number}}/{{data.paginator.num_pages}}]
{% if data.has_next %}
next»
last»
{% endif %}
- 投稿日:2020-05-31T16:53:09+09:00
Django ページネーションについて
Python Djangoという参考書で勉強していたのですが
4−3ページネーションの「ページの移動はどうするの?」で躓いてます。
firstはちゃんと動くのですが、prev,next,lastがどうしてもPage not foundになってしまいます。
何方か教えてくれませんか?
ソースはこんな感じです
初投稿なのでうまく使えてないと思います。すみません
django_app/hello/url.py
from django.urls import path
from . import viewsurlpatterns=[
path('',views.index,name='index'),
path('int:num',views.index,name='index'),
path('create',views.create,name='create'),
path('edit/int:num',views.edit,name='edit'),
path('delete/int:num',views.delete,name='delete'),
path('find',views.find,name='find'),
path('check',views.check,name='check'),
]django_app/hello/views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from .models import Friend
from .forms import FriendForm
from .forms import FindForm
from django.db.models import Q
from django.db.models import Count,Sum,Avg,Min,Max
from .forms import CheckForm
from django.core.paginator import Paginatordef index(request,num=1):
data = Friend.objects.all()
page = Paginator(data,3)
params = {
'title': 'Hello',
'message':'',
'data': page.get_page(num),
}
return render(request,'hello/index.html',params)create model
def create(request):
if (request.method == 'POST'):
obj = Friend()
friend = FriendForm(request.POST,instance=obj)
friend.save()
return redirect(to='/hello')
params = {
'title' : 'Hello',
'form' : FriendForm(),
}
return render(request,'hello/create.html',params)
def edit(request,num):
obj = Friend.objects.get(id=num)
if (request.method == 'POST'):
friend = FriendForm(request.POST,instance=obj)
friend.save()
return redirect(to='/hello')
params={
'title' : 'Hello',
'id' : num,
'form' : FriendForm(instance=obj),
}
return render(request,'hello/edit.html',params)
def delete(request,num):
friend = Friend.objects.get(id=num)
if (request.method == 'POST'):
friend.delete()
return redirect(to='/hello')
params = {
'title' : 'Hello',
'id' : num,
'obj' : friend,
}
return render(request,'hello/delete.html',params)def find(request):
if (request.method == 'POST'):
msg = request.POST['find']
form = FindForm(request.POST)
sql = 'select * from hello_friend'
if (msg != ''):
sql += ' where ' + msg
data = Friend.objects.raw(sql)
msg = sql
else:
msg = 'search words...'
form = FindForm()
data =Friend.objects.all()
params = {
'title' : 'Hello',
'message' : msg,
'form' :form,
'data' :data,
}
return render(request,'hello/find.html',params)
def check(request):
params={
'title' : 'Hello',
'message' : 'check validation.',
'form' : CheckForm(),
}
if (request.method == 'POST'):
obj = Friend()
form = FriendForm(request.POST,instance=obj)
params['form'] = form
if (form.is_valid()):
params['message'] = 'OK!'
else:
params['message'] = 'no good.'
return render(request,'hello/check.html',params)django_app/hello/template/hello/index.html
{% load static %}
<!DOCTYPE html>
{{title}}
href="{% static 'hello/css/style.css' %}" />
{{title}}
{{message|safe}}
id
name
age
birthday
{% for item in data %}
{{item.id}}
{{item.name}}
{{item.age}}
{{item.mail}}
{{item.birthday}}
{% endfor %}
{% if data.has_previous %}
«first
«prev
{% endif %}
[{{data.number}}/{{data.paginator.num_pages}}]
{% if data.has_next %}
next»
last»
{% endif %}
- 投稿日:2020-05-31T11:05:54+09:00
webサイトを中心に配置する
やり方
横幅の大きさを指定します。横幅の大きさを指定しないと中央寄せできません。marginはautoにします。すると中央に要素を配置できます。
.content { max-width: 500px; margin: auto; }ソースコード
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: #555; } .content { max-width: 500px; margin: auto; background: white; padding: 10px; } </style> </head> <body> <div class="content"> <h1>This page is horizontally centered on screens that are wider than 500 pixels.</h1> <h1>Resize the browser window to see the effect.</h1> <p>This page is always centered on screens that are wider than 500px. On screens that are less than 500px wide, it will span the whole of the page.</p> <p>Content inside this container is centered horizontally.</p> <p>Content inside this container is centered horizontally.</p> <p>Content inside this container is centered horizontally.</p> <p>Content inside this container is centered horizontally.</p> <p>Content inside this container is centered horizontally.</p> <p>Content inside this container is centered horizontally.</p> <p>Content inside this container is centered horizontally.</p> <p>Content inside this container is centered horizontally.</p> <p>Content inside this container is centered horizontally.</p> </div> </body> </html>参考サイト
https://www.w3schools.com/howto/howto_css_center_website.asp
https://www.nishi2002.com/16106.html
- 投稿日:2020-05-31T00:37:14+09:00
中二病CSS
かっこいいエフェクトをCSSアニメーションだけで作れないかなと色々模索したので
いくつか作ったサンプルを載せておきます。
Chromeで動作はしますが、ブラウザによっては動かないと思います。過去にこんな記事も書きましたのでよかったらこちらもどうそ
イケてるアニメーションを研究してみるカラー→セピア
画像を退廃的な感じに見せます。
ブラーのエフェクトとノイズ画像を重ねることで更に劣化の表現を増しています。See the Pen sepia animation by teradonburi (@teradonburi) on CodePen.
カラー→グレー
画像をスチームパンク的な雰囲気にします。
セピア版のspeiaフィルターをgreyscaleフィルターに変更しただけです。See the Pen greyscale animation by teradonburi (@teradonburi) on CodePen.
シルエット
画像をシルエットのみにします。PNGなどの透過画像にのみ有効です。
brightnessを0%にすると黒シルエット。その状態からさらにinvertすれば白シルエットになります。See the Pen silhouette by teradonburi (@teradonburi) on CodePen.
ブラー→ブラーなし
こうゆうのは重い画像読み込みのlazyload時などの表現で使われることが多いのですが、
imgタグのsrcset属性やlazy属性で解像度が低い画像から高い画像に切り替わるような擬似的な表現をblurで行っています。See the Pen blur animation by teradonburi (@teradonburi) on CodePen.
徐々に形が変わる出現・退出
clip-pathを使ったアニメーションです。
円形から矩形に変わります。
さらにclip-pathしたものに対してshadowをつけるには親要素側で指定してやりますSee the Pen circle animation by teradonburi (@teradonburi) on CodePen.
光学迷彩
キ○グダムハーツの画面移動っぽいエフェクトだよ・・・ハハッ。
mask-imageでマスク画像で背景画像の切り取りをしています。See the Pen optical-camouflage by teradonburi (@teradonburi) on CodePen.
グレー→カラー
あわせ技、グレー背景に色がついていく演出
See the Pen grey to color animation by teradonburi (@teradonburi) on CodePen.
フェードイン・フェードアウト
よくあるやつです。opacityをアニメーションしているだけです。
See the Pen fade-in fade-out by teradonburi (@teradonburi) on CodePen.
クロスフェード
複数の画像が時系列で切り替わります。
参考:Cross fading imagesアルゴリズムは以下
n枚の画像があるとき a=1枚の画像が表示する時間 b=クロスフェードする時間 累計のanimation-durationはt=(a+b)*n animation-delay = t/n or = a+b keyframesのパーセンテージとopacityの指定: 0% → opacity: 1 a/t*100% → opacity: 1 (a+b)/t*100% = 1/n*100% → opacity: 0 100%-(b/t*100%) → opacity: 0 100% → opacity: 1なお、このアルゴリズムだとalternateは使いません
See the Pen crossfade by teradonburi (@teradonburi) on CodePen.
斬鉄剣
clip-pathで予め画像を2枚に分けておいてtransformで斬られたように見せる
See the Pen slash animation by teradonburi (@teradonburi) on CodePen.
文字背景アニメーション
background-clip:text
とcolor: transparent
で背景を文字で切り抜くことができます。
さらにgreyscaleで通常のグレー文字からレインボー文字にアニメーションしてみました。
何かの呪文とかヒエログリフぽい表現、ウェブフォントにも適応できます。See the Pen clip-text animation by teradonburi (@teradonburi) on CodePen.
タイピング風に表示する
display: none
状態だとanimationの初動が動作しないので使っていない。opacityを指定している。
このレベルになると生のCSSつらいSee the Pen letter animation by teradonburi (@teradonburi) on CodePen.
リストをかっこよく出す
シュッと横から出す
See the Pen list animation by teradonburi (@teradonburi) on CodePen.
おまけ
べ、別にあんたのために作ってあげたんじゃないんだからね!
See the Pen jump by teradonburi (@teradonburi) on CodePen.