20200124のHTMLに関する記事は7件です。

CSS,SCSSで画像を背景にする方法

SCSSで作成

.クラス名 {
background: url(/フォルダ名/ファイル名) no-repeat top / 横px 縦px;
height: 要素の高さ;
wight: 要素の幅;
}

backgroundで背景にする

urlで画像を指定する

no-repeatで画像が何枚も投稿されるのを防ぐ
(これがないと勝手に何枚も表示される)

topで上に詰める?

画像の縦横を指定してあげる

間違いがあれば指摘をお願いします。

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

Djangoで区分値を定義し、簡単に画面へ反映する

Djangoで区分値を管理する

要件

model.pyで区分値を定義し、履歴のリストを表示するhtmlページへ反映します。

1. モデルに定義する

HistoryテーブルにSTATUSという区分値を持たせます。
ポイント:choices=

manage.py
class History(models.Model):
    STATUS = (
        ('001', '実施前'),  # BEFORE_EXECUTE
        ('011', 'ログイン中'),  # DURING_LOGIN
        ('012', '取得中'),  # WHILE_GETTING
        ('101', '完了'),  # DONE
        ('401', '失敗')  # fail
    )

    start_at = models.DateTimeField()
    status = models.CharField(max_length=3, choices=STATUS)

2. URLを定義する

履歴のリストを表示するページへのURLを定義。

url.py
urlpatterns = [
    # リスト
    path('history_list', views.HistoryListView.as_view(), name='history_list'),
]

3. ListViewに定義する

履歴のリストを表示するページのhtmlへ渡すViewを定義。

class HistoryListView(ListView):
    model = History
    template_name = 'history_list.html'

4. Htmlへ反映させる

ポイント:get_FIELD_diaplay

example.html
<td>
    {{ history.get_status_display }}
</td>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

フッターのコピーライトとかで自動的に今の年を表示する方法

フッター等によく書いてあるコピーライト。
Copyright © hoge.exmaple.com 2010-2020 All Rights Reserved.
こういうやつです。

この2020という年数を年が変わるたびに手動で変更するのは面倒ですよね。今回はJavaScriptで自動で今の年を表示する方法を紹介します。ものすごい小ネタです。

フッターのコピーライトとかで自動的に今の年を表示する方法

<footer>
  <p class="copyright">Copyright © <span class="thisYear"></span> hoge.example.com All Rights Reserved.</p>
</footer>

JavaScriptで今の年を表示しているだけです。

  const yearElm =  document.querySelector('.thisYear'); // <span class="thisYear"></span>を取得
  const thisYear = new Date().getFullYear(); // 今の年を取得
  yearElm.innerHTML = thisYear; // <span class="thisYear"></span>の中に年を表示

コピーライトの書き方

ちなみに、最初に例示したコピーライトは間違ってはいませんがいろいろ不要なものが多いです。というかそもそもコピーライトの表記自体なくても問題ないのです。でも慣習的に書いておいた方が無難。

正しくは
© 2010 hoge.exmaple.com ←年数はそのサイトが開設された年(著作物が発行された年)
で十分。今の年を表示させる必要は実はないんです。

参考
年号と©マークと何が必要?Copyright(コピーライト)表記の正しい書き方
Wikipedia: 著作権表示

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

HTML, CSSの基礎

今回はProgateを使ったHTML,CSSの学習をしました。

 実は前に2、3回くらいやったことがあったので、スラスラと進めることができました。
 具体的にやったこととしては見出しの書き方やHTMLへのCSSのリンクの書き込み、ヘッダーやフッターやメインの基礎です。HTML、CSSの復習としてはかなりいいものでした。

HTMLとCSSの要約

HTMLでサイトに文字や画像などを書き込み、CSSでその文字やCSSを装飾します。基本的にはこの二つを使うことでサイトの見た目を作ることができます。

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

jQueryで年月のプルダウンを生成する

こんなかんじのプルダウンを作成します。

<select>
    <option value="">選択する</option>
</select>
<!--jQueryはCDNを使用-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
//英語の月を配列にする
var m_eng = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

var today=new Date();
//現在の年月を文字列の状態で取得する(例:20201)
var now_date = String(today.getFullYear()) + String((today.getMonth() +1));
//現在の年月が5文字(例:20201~20209)の場合、月を01表記に整形
    if(now_date.length = 5){
    var now_date = now_date.slice(0, 4) + "0" + now_date.slice(-1);
    }
var num_date = Number(now_date);

//スタート年月を設定(今回は2019年1月)
var onset = 201901;

//スタート年月(onset)~現在(num_date)のプルダウンを繰り返しで生成する
while (onset <= num_date) {
    //onsetの月部分が13になった時、年に+1年、月を1月にする
    //例)201913→202001
    var set_cnv = String(onset);
        if(set_cnv.slice(-2) == 13){
        var onset = onset + 100 -12;
        var set_cnv = String(onset);
        }
        //年と月
    var set1 = set_cnv.slice(0, 4);
    var set2 = Number(set_cnv.slice(-2)) -1;

//selectにoptionタグを追加する
$('select').append(
'<option value="' + set_cnv + '">' + set1 + '[' + m_eng[set2] + ']' + '</option>');

onset++;
}

});
</script>

以下、jQueryで生成されたタグです。

<select>
    <option value="">選択する</option>
    <option value="201901">2019[Jan]</option>
    <option value="201902">2019[Feb]</option>
    <option value="201903">2019[Mar]</option>
    <option value="201904">2019[Apr]</option>
    <option value="201905">2019[May]</option>
    <option value="201906">2019[Jun]</option>
    <option value="201907">2019[Jul]</option>
    <option value="201908">2019[Aug]</option>
    <option value="201909">2019[Sep]</option>
    <option value="201910">2019[Oct]</option>
    <option value="201911">2019[Nov]</option>
    <option value="201912">2019[Dec]</option>
    <option value="202001">2020[Jan]</option>
</select>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

レスポンシブ設計 キホンの基本 part1~display:flex;

CSSでレスポンシブなサイト作成のキホンについてやっていきますが、

その中でも超基本から。

このような構図があったとします。スクリーンショット 2020-01-24 1.02.02.png

この図のように、何もしないと要素は縦並びになってしましますよね。

レスポンシブにするためにはまず親要素のcontainerにdisplayをflexを設定します。

ちなみに、子要素の幅(width)は均等にするため、各子要素にflexを1に設定します。

style.css
 .container {
display: flex;
}
.boxA {
flex: 1;
}
boxB {
flex: 1;
}

そうすると、こうなります。スクリーンショット 2020-01-24 1.15.02.png

子要素が横並びになます。

デフォルトでは子要素の高さ(hieght)は同じで、幅(width)はコンテンツによって変わります。

今回の場合は、flex:1;を設定しているので、幅は均等です。

これがレスポンシブのキホンの基本です。

では次回は親要素のcontainerの幅を設定して、折り返す方法を書いていきたいと思います。

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

transformについて[html, css]

はじめに

「transformは何ができるのか」
「transformはどんな時に使うのか」
ということについて書いていきたいと思います。

transform自体を使ったことがない人も多いと思いますが、
Webデザインをしていく中で必ず目にすることになると思います。

そんなtransformについてまとめていきたいと思います。

transformについて

transformを使用することによって、デザインに移動、回転、伸縮、傾斜の効果をつけることができます。二次元的な動きだけではなく、三次元的な動きにも対応しています。

transformの種類

transformには4つの関数が用意されています。

  1. translate() 「移動」
  2. rotate() 「回転」
  3. scale() 「伸縮」
  4. skew() 「傾斜」

transformの使い方

それぞれの関数にX,Y,Z,3Dが用意されています。
translateX()のように()の前にX,Y,Z,3Dを記入することでその軸に対して関数を使用することができます。
また、translate(X,Y,Z)のように記入してもそれぞれの軸に対して関数を使用することができます。

index.html
<div class="transform">Transform<div>
style.css
.transform{
    padding: 10px 20px;
    background: #59b1eb;
    text-align: center;
    color: #fff;
    width: 30%;
}

このhtml,cssに対して、transformを使用していきたいと思います。
わかりやすくするために:hover,transitionを使用していきたいと思います。
hoverはカーソルを要素に置いた時に適用されるようにする要素です。
transitionはtransformを適用するにあたり、開始から終了までの時間を決めることができます。

translate

translateは要素に移動の効果を追加することができます。

style.css
.transform{
    padding: 10px 20px;
    background: #59b1eb;
    text-align: center;
    color: #fff;
    width: 30%;
    transition: 1s;
}

.transform:hover{
    transform: translate(20px,20px)
}

.transformtransition: 1s;を追加し
.transform:hover{
transform: translate(20px,20px)
}
を新たに追加しました。
動きを確認してみてください。
X軸方向に20px、Y軸方向に20px動くのが確認できたかと思います。

rotate

rotateは要素に回転の効果を追加することができます。

style.css
.transform:hover{
    transform: rotateX(360deg)
}

rotateを使用する場合pxではなくdegree「度」を表す
degを使用します。
このコードの場合X軸に対して360度回転します。確認してみてください。

style.css
.transform:hover{
    transform: rotateY(360deg)
}

この場合Y軸に対して回転するのが確認できるかと思います。

scale

scaleは要素に伸縮の効果を追加することができます。

style.css
.transform:hover{
    transform: scale(1.5,1.5)
}

値にはpxdegも使用しません。
1.5と書けば要素の1.5倍、2.0と書けば要素の2倍になります。また、-2.0と書けば要素の1/2倍になります。
このコードではX軸、Y軸共に1.5倍になるのが確認できると思います。

skew

skewは要素に傾斜を持たせることができます。
他の要素と異なり、X軸Y軸に対してしか使用できない特徴があります。また、値にはdegを使用します。

style.css
.transform:hover{
    transform: skew(30deg,30deg)
}

他の要素と異なり、X軸Y軸に対してしか使用できない特徴があります。また、値にはdegを使用します。

transform-originについて

transform-originを使用することによって、要素の変化の基準点を設けることができます。

style.css
.translate:hover{
    transform: rotate(45deg);
    transform-origin: top left;
}

基準点の設定方法ですが、
- 絶対指定(px)
- 相対指定(%)
- 位置指定(top, center,left等)

の3つがあります。
ざっくりで良いなら位置指定、細かく決めたいなら絶対指定、相対指定を使用するという風に分けたら良いと思います。
transform-origin_1.png

まとめ

transformはマスターするとWebデザインの幅がとても広がります。
基礎的な使用方法でも十分幅が広まります。
ぜひマスターしましょう。

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