- 投稿日:2020-01-24T20:23:19+09:00
CSS,SCSSで画像を背景にする方法
SCSSで作成
.クラス名 {
background: url(/フォルダ名/ファイル名) no-repeat top / 横px 縦px;
height: 要素の高さ;
wight: 要素の幅;
}backgroundで背景にする
urlで画像を指定する
no-repeatで画像が何枚も投稿されるのを防ぐ
(これがないと勝手に何枚も表示される)topで上に詰める?
画像の縦横を指定してあげる
間違いがあれば指摘をお願いします。
- 投稿日:2020-01-24T20:19:10+09:00
Djangoで区分値を定義し、簡単に画面へ反映する
Djangoで区分値を管理する
要件
model.py
で区分値を定義し、履歴のリストを表示するhtmlページへ反映します。1. モデルに定義する
History
テーブルにSTATUS
という区分値を持たせます。
ポイント:choices=
manage.pyclass 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.pyurlpatterns = [ # リスト 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>
- 投稿日:2020-01-24T16:02:13+09:00
フッターのコピーライトとかで自動的に今の年を表示する方法
フッター等によく書いてあるコピーライト。
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
←年数はそのサイトが開設された年(著作物が発行された年)
で十分。今の年を表示させる必要は実はないんです。
- 投稿日:2020-01-24T15:34:29+09:00
HTML, CSSの基礎
- 投稿日:2020-01-24T14:59:48+09:00
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>
- 投稿日:2020-01-24T01:22:33+09:00
レスポンシブ設計 キホンの基本 part1~display:flex;
CSSでレスポンシブなサイト作成のキホンについてやっていきますが、
その中でも超基本から。
この図のように、何もしないと要素は縦並びになってしましますよね。
レスポンシブにするためにはまず親要素のcontainerにdisplayをflexを設定します。
ちなみに、子要素の幅(width)は均等にするため、各子要素にflexを1に設定します。
style.css.container { display: flex; } .boxA { flex: 1; } boxB { flex: 1; }子要素が横並びになます。
デフォルトでは子要素の高さ(hieght)は同じで、幅(width)はコンテンツによって変わります。
今回の場合は、flex:1;を設定しているので、幅は均等です。
これがレスポンシブのキホンの基本です。
では次回は親要素のcontainerの幅を設定して、折り返す方法を書いていきたいと思います。
- 投稿日:2020-01-24T01:05:28+09:00
transformについて[html, css]
はじめに
「transformは何ができるのか」
「transformはどんな時に使うのか」
ということについて書いていきたいと思います。transform自体を使ったことがない人も多いと思いますが、
Webデザインをしていく中で必ず目にすることになると思います。そんなtransformについてまとめていきたいと思います。
transformについて
transformを使用することによって、デザインに移動、回転、伸縮、傾斜の効果をつけることができます。二次元的な動きだけではなく、三次元的な動きにも対応しています。
transformの種類
transformには4つの関数が用意されています。
- translate() 「移動」
- rotate() 「回転」
- scale() 「伸縮」
- 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) }
.transform
にtransition: 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) }値には
px
もdeg
も使用しません。
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はマスターするとWebデザインの幅がとても広がります。
基礎的な使用方法でも十分幅が広まります。
ぜひマスターしましょう。