20200531のHTMLに関する記事は8件です。

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"の場合、文書の概要を指定し、検索エンジンに表示される

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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"の場合、文書の概要を指定し、検索エンジンに表示される

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【マークアップ 】デザインボタン

概要

ボタンに少しデザインを付けることで、サイトがカッコ良くなる〜:laughing:
と思い実装しました!

今回紹介するのは、立体的に見えて押し込み式のボタンとなります:bulb:

実装

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;/*ボタンを押すと線が消える*/
    }
  }

実装結果

ボタン:静止画像

スクリーンショット 2020-05-31 20.57.38.png

ボタン:動画 

※Gyazoで撮影していますので、タイミングによっては見れないかもしれません:cry:

https://gyazo.com/d5c37521452af8a951b69bf658ac2f53

感想

HamlとScssで簡単実装できました!
皆様もぜひ活用してください:laughing:

参考

https://saruwakakun.com/html-css/reference/buttons

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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)とする
javascript
var 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の時は空にする必要がある

ということで修正(ちょっと雑ですが...)

javascript
var 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.

終わり

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Django ページネーションについて教えていただきたいです

Python Djangoという参考書で勉強していたのですが
4−3ページネーションの「ページの移動はどうするの?」で躓いてます。
firstはちゃんと動くのですが、prev,next,lastがどうしてもPage not foundになってしまいます。
何方か教えてくれませんか?
ソースはこんな感じです
初投稿なのでうまく使えてないと思います。すみません
django_app/hello/url.py
from django.urls import path
from . import views

urlpatterns=[
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 Paginator

def 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}}










{% for item in data %}







{% endfor %}
id name age mail birthday
{{item.id}} {{item.name}} {{item.age}} {{item.mail}} {{item.birthday}}


{% if data.has_previous %}
«first
«prev
{% endif %}

[{{data.number}}/{{data.paginator.num_pages}}]

{% if data.has_next %}
next»
last»
{% endif %}


  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Django ページネーションについて

Python Djangoという参考書で勉強していたのですが
4−3ページネーションの「ページの移動はどうするの?」で躓いてます。
firstはちゃんと動くのですが、prev,next,lastがどうしてもPage not foundになってしまいます。
何方か教えてくれませんか?
ソースはこんな感じです
初投稿なのでうまく使えてないと思います。すみません
django_app/hello/url.py
from django.urls import path
from . import views

urlpatterns=[
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 Paginator

def 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}}










{% for item in data %}







{% endfor %}
id name age mail birthday
{{item.id}} {{item.name}} {{item.age}} {{item.mail}} {{item.birthday}}


{% if data.has_previous %}
«first
«prev
{% endif %}

[{{data.number}}/{{data.paginator.num_pages}}]

{% if data.has_next %}
next»
last»
{% endif %}


  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

中二病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:textcolor: 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.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む