Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all 8685 articles
Browse latest View live

CSSセレクタ詳細度の理解を深める

$
0
0

社内勉強会のメモ

CSSセレクタの詳細度とは

仕様

https://www.w3.org/TR/selectors-3/#specificity

仕様にもある通り、「詳細度」というのは

selector's specificity

なので、「セレクタの詳細度」のこと。

詳細度は計算できる。

MDN

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

詳細度Specificityは、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。

「ちゃんとプロパティを書いてるのに適用されない!」みたいになってDevToolsを開いてみたら、実際に当てたいプロパティに打ち消し線が入っている、みたいなことが起きうる原因。

※以下の文章の引用は、注釈が無い限りこちらのページからの引用となります。

基本

単品で比べた時のプロパティの優先度の高さの順番は以下の通り
(ここで「詳細度」と書いていないのは、厳密に言えば!importantとstyle属性はセレクタでは無いので、セレクタの詳細度とは別の仕様であるため)

高

0. HTML上のstyle属性に書かれたプロパティ
1. !important
2. IDセレクタ
3. クラスセレクタ、属性セレクタ、擬似セレクタ
4. 要素型セレクタ、擬似要素
5. CSSの記載順序がうしろのプロパティ

低

HTML上のstyle属性に書かれたプロパティ

要素に追加されたインラインスタイルは、常に外部スタイルシートの中のスタイルを上書きします

セレクタの詳細度とは別の仕様で、CSSに書かれたプロパティを上書きするので、最も優先度が高い。

!important

!important 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。

セレクタの詳細度とは別の仕様で、他のプロパティを上書きするので、優先度が高い。
同じプロパティに!importantが記載された場合は、セレクタの詳細度が適用される。

世紀末な無法地帯になるので使わないでください。

IDセレクタ、クラスセレクタ、属性セレクタ、擬似セレクタ、要素型セレクタ、擬似要素

  • IDセレクタ:#hoge
  • クラスセレクタ:.hoge
  • 属性セレクタ:[name="hoge"]
  • 擬似セレクタ::hover
  • 要素型セレクタ:div
  • 擬似要素:::before

これらがセレクタの詳細度の仕様で言及されているセレクタたち。

全称セレクター (*), 結合子 (+, >, ~, ' ', ||), 否定疑似クラス (:not()) は詳細度に影響を与えません。 (但し、 :not() の中で宣言されたセレクターは影響を与えます。)

詳細度の計算方法

考え方

セレクタたちは全員、詳細度の点数を持っている。

セレクタ {
  プロパティ: 値;
}

というCSSの記法のうち、「セレクタ」部分に登場するセレクタたちの点数の合計が、カギカッコの中の「プロパティ」たちの詳細度となる。

セレクタの点数

セレクタ点数
ID100
クラス、属性、擬似10
要素型、擬似要素1
全称、結合子、否定擬似クラス0

hoge.css
.hoge.piyo{background-color:blue;}.hoge{background-color:red;}

というファイルがあったとして、上下のそれぞれの詳細度は

  • 上:クラスセレクタ(10点)が2個なので20点。
  • 下:クラスセレクタ(10点)が1個なので10点。

通常であればcssは後に書いたプロパティが優先されるが、このファイルの場合上に書かれたセレクタの方が詳細度が高いので、上のbackground-color: blue;が適用される。

スクリーンショット 2019-11-07 16.20.04.png

HTMLファイルを表示する
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>CSSの詳細度</title><style>.hoge{width:200px;height:200px;}.hoge.piyo{background-color:blue;}.hoge{background-color:red;}</style></head><body><divclass="hoge piyo"></div></body></html>

続き工事中


HTML とと

$
0
0

サイト模写中は「divとspanはpは項目とかをまとめられる役割なんだなあー」とざっくりにしか理解していなかったので、少しずつきちんとわかった事をまとめていこうと思います。

<div>タグ

division(分割・段)の略で、<div>~</div>で囲った部分をブロック要素としてグループ化する。前後に改行が入る
<div>タグ自身は特に意味を持たない。

<span>タグ

短時間・全範囲の意味。<span>~</span>で囲った部分をインライン要素としてグループ化する。前後に改行が入らない
<span>タグ自身は特に意味を持たない。

<p>タグ

paragraph(段落)の頭文字で、<p>~</p>でページ内で段落を作る

実際に書いてみる

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>divとspanとp</title><linkrel="stylesheet"href="css/styles.css"></head><body><divclass="container01"><p>最初の文です。</p><p>2番目の文です。</p></div><divclass="container02"><p>最初の文です。</p><p><span>2番目</span>の文です。</p></div></body></html>
styles.css
body{margin:0;}div{margin:10px;width:400px;}.container01{background:lightcoral;}.container02{background:#80f0ab;}p{margin:0;padding:00010px;font-size:20px;line-height:35px;text-align:left;}span{color:#5797e0;}

20191107_Qiita02.png

<div>タグで囲むと1つのグループになって、こんな感じで背景とか変えられる。
<p>タグで囲んだところは、<br>タグを使っていないのに改行されている。
<span>タグで囲んだところは、改行されないからこんな感じで文字の色を変えられる。

【初心者】SSIエラーが出たけど実はそうじゃなかった件

$
0
0

はじめに

1つ1つ案件をやっていくうちに、予期せぬエラーにも出くわすようになりました(汗)
その中でも、なるほどなーって思ったことがあったので備忘録まで。

SSI(Server Side Include)

Server Side Includes はWebサーバの機能の1つです。
HTMLの中にWebサーバ側で実行するコマンドを埋め込んでおき、その実行結果をクライアントサーバに返す仕組みです。

どういう時に利用するかというと、複数ページに同じレイアウトが登場するときなどに便利です。例えば、ヘッダー・フッター・メニューについては、どのページに遷移しても、常に同じものが表示されているべきですよね。そいう時に、各ページに同じHTMLを記載するのではなく、ヘッダー部分を1つのファイルから読み込んで表示したほうがメンテナンスもしやすくなります。このファイルのことをインクルードファイルといいます。

ただ1つ注意しなければならいのは、Webサーバ自体がSSIに対応またはサービス利用可になっている必要があります。

インクルードファイルをもう少し詳しく

インクルードファイルには、ページのある一部分のソースコードが書かれているファイルということに勘がいい人はもう気付いていると思います。
先ほどの例で出したヘッダー・フッター・メニューをSSI機能を使って表示させるようにするためには、その部分だけを抜き出したファイル=インクルードファイルを準備する必要があります。

インクルードファイルの形式はHTML形式でOKです。実際にはインクルードファイルを読み込んだ部分に内容を展開することになるので、本当に一部分を抜き取ったファイルが出来上がっていればインクルードファイルは完成になります!

早速、インクルードファイルを読み込んでみよう!

インクルードファイルの読み込みは簡単です。
下記のように、自分が作成しているHTMLファイルに記載すればいいだけです。めちゃ簡単です。

<!-- #include virtual="[ファイル名 or ファイルパス]" -->

この状態で、ブラウザを表示するとその部分にインクルードファイルの内容が読み込まれ、きちんとヘッダーやフッター・メニューなどが表示されます。

簡単なはずがエラー「an error occurred while processing this directive」が表示される!?

インクルードファイルの存在と設定の仕方がわかったところで、さっそくHTMLファイルにヘッダー部分のインクルードファイルの読み込みを追記して画面を確認!
ところが、「an error occurred while processing this directive」と表示されるではありませんか!?!!(なってこった…。)

このエラーが表示される原因を調べてみると、
「SSI は有効になっていて、何らかのエラーで SSI の処理ができなかった場合に表示される」とのこと。つまり、インクルードできなかったよ!ということなので、そういう場合は下記を疑ってみるのが通常のようです。

  • ファイル指定の間違い
  • ディレクトリを遡っている
  • サーバルートからのパスを指定している
  • http から始まる URL を指定している

でも、今回は全部合っていました。なんでーーーーー???

先頭に#を付けたコメントが原因だった!

結局何が原因だったかというと、超絶単純なミス。笑
インクルードファイルの読み込みは、HTML内に記載するコメントの書き方と同じです。

▼ただのコメント

<!-- header menu -->

▼インクルードファイルの設定

<!-- #include virtual="../sample/include_menu.html" -->

インクルードファイルかどうかの判断は、どうやら#の部分から判断しているみたいです。
みなさんも、HTMLファイルを作成したときに「ここからここまでが、〇〇〇の部分」などコメントを記載すると思います。
わたしは、クラス名やID名でそのコメントと記載するのですが、ID名を使用したコメントを

<!-- #send_format -->

なんて書いていました。
そのため、この先頭につけた#が原因で、インクルードファイルの読み込みエラーが表示されてしまっていました。そりゃ、インクルードファイルの読み込みを追記した部分を穴が開くほどみてもわからないわけです。

まとめ

今回のエラーは初心者のわたしが1人で勉強しているだけでは出くわさないエラーだと感じました。インクルードファイルの読み込みをするときは、コメントの先頭に#を使わないように気を付けましょう(笑)
未経験での中途入社はがんばらないといけないことがたくさんありますが、思い切ってこの業界に転職したことが正解だったと思えた瞬間でした!

参考URL

http://www.tohoho-web.com/wwwssi.htm
https://wa3.i-3-i.info/word12024.html
https://support.sugutsukaeru.jp/ja/troubleshooting/news-widget/93.html

コンテンツ量の違うボックスの下辺が揃わない問題について

$
0
0

下の画像みたいな感じになった時の対処法

image.png

解決策

  • flexboxを使う
  • heightで高さ指定する

flexboxに関する参考サイト

もう迷わない!CSS Flexboxの使い方を徹底解説
https://webdesign-trends.net/entry/8148

【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。
https://www.plusdesign.co.jp/blog/?p=8747

heiht指定した時に要素が浮いちゃったのでその対処法に関するサイト

clearfixで浮かないようにしなくちゃいけないってこと。

【CSS】floatした要素の親要素に高さを認識させる2つの方法
https://handywebdesign.net/2017/11/two-ways-to-recognize-a-height-of-floating-object/

初心者によるプログラミング学習ログ 153日目

$
0
0

100日チャレンジの153日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

153日目は、

年末まで毎日webサイトを作り続ける大学生 〜20日目 CSSの5つのpositionとfloatを勉強する〜

$
0
0

はじめに

こんにちは!最近週末は温泉に通っている@70days_jsです!
webサイト制作でお金を稼ぐために年末まで毎日webサイトを作っております。
はや20日、、、もっとテンポアップせねば。。。だが基礎をおろそかにはできない。。。というジレンマの中にいます。
今日はサイトデザインをする上で欠かせないpositionとfloatを学びました!
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は20日目。(2019/11/7)
よろしくお願いします。

サイトURL

やったこと

MDNのcssページでpositionとfloatを学びました。
先にpositionから説明します。

position ~覚えるべき5つの位置~

まず前提としてpositionは要素の位置を変更できるプロパティですが、覚えるべき位置が5つあります。

【覚えるべき5つの位置】
1. 静的位置指定(Static positioning)・・・デフォルト、通常フローの位置
2. 相対位置指定(Relative positioning)・・・通常フローから相対的な位置を指定できる
3. 絶対位置指定(Absolute Positioning)・・・通常フローから完全に外れて位置を指定できる
4. 固定位置指定(Fixed ppsitioning)・・・ブラウザのビューポートを基準にして位置を指定できる(つまり固定)
5.粘着位置指定(Sticky positioning)・・・振る舞いが位置によって変わる。置かれた場所を過ぎるまではstaticで、過ぎればfixedのように振る舞う

全体として性質的には相対位置 or 絶対位置の2つに分けられますね。
staticは普通通りの動きでこれはすべての要素のデフォルトなので置いといて、
相対位置 → relative
絶対位置 → absolute, fixed
相対位置 + 絶対位置 → sticky

絶対位置はabsoluteとfixedの2つがありますね。何が違うのでしょうか?

【Absolute と Fixedの違い】
1. スクロールした時(absoluteは位置は固定にならない、fixedは固定)ナビバーならfixed
2. 基準位置が違う(absoluteは親要素またはview port、fixedは常にview port )

これも実際に見てみるとわかりやすいのでgifをご覧ください。(今日作ったのはこれです)↓
test.gif

Absoluteは位置の指定は絶対ですが、固定ではありませんね。逆にfixedは固定です。
つまりナビバーに使うなら絶対位置でもfixedの方ですね。

positionの指定もとても簡単です。

.fixed_positioning{position:fixed;top:0;left:0;...

例えば上のはfixedですが、固定させたい要素のセレクタを指定し、positionプロパティにfixedの値を与えるだけでその要素は固定になります。

stickyも簡単です。

.sticky_positioning{position:sticky;top:0px;left:0px;

positionプロパティにstickyの値を与え、要素がもともと設置されている場所がtopとleftで指定している位置までくるとそのまま固定になります。

float ~あまり使われない~

というわけで次はfloatですが、flex boxやgridレイアウトが登場したおかげでfloatはあまり使われ無くなっています。唯一使うかなという場面は、画像の周囲にテキストを回り込ませたい時ぐらいだと思います。(雑誌風に)

floatは指定した要素を通常フローから外すことができます。ただ、スペースは確保するので、他の要素はそれを避けるようになるべく通常フロー通りに配置されるようになっています。

指定はとても簡単で、floatプロパティにどっちに浮かせるか値を与えるだけです。

.float_group{float:left;...

この場合だとleftを与えているので要素は通常フローから外れて左側に浮きます。

感想

今日はとりあえずpositionとfloatの基礎ができたのでよかったです。ただ細かい部分はまだ分かっていないので、これから先問題に当たった時に都度解決する方針でいこうと思います。とりあえず今はwebサイト制作スキルを身につけて仕事を取りたい!ということで頑張っております。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

  1. CSS レイアウト入門 - Web 開発を学ぶ | MDN (https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Introduction)

MDNさんありがとうございます!JS・CSSチュートリアルをマスターしてwebサイト制作の仕事を受注してみせます!

画像添付中はボタンの色が変わるjQuery input[type=file]

$
0
0

すること

画像添付中の画像添付ボタンのスタイルを変える方法です。

使うもの

  • jquery
  • css(scss)

処理の流れ

1.添付中は特定のclassを付与
2.上記で付与されたclassのstyleがついて色が変わる
3.送信したら特定のclassを削除
4.classが削除されたことによってstyleも削除されて色が元に戻る

書くコード

nantoka.js
// 画像を添付した時に着火するイベント$('input[type=file]').change(function(){$('色を変えたい要素のセレクタ').addClass('active');//class「active」をつける});// 送信で着火するイベント$('送信ボタンのセレクタ').submit(function(){.done(function(){// ~ 送信処理省略 ~//$('色を変えたい要素のセレクタ').removeClass('active');// ←.doneの最後でclass削除を処理}).fail(function(){});});

上記のjQueryのclass付与でstyleが効くように、cssも定義します。

nantoka.css
.btn.active{background-color:#38aef0;/* span、divなどでボタン作った方はこれ */color:#38aef0;/* FontAwesomeの色変更はこっち */}

実行結果

0bcd077a208ec469e5ce1be9f47fc2e8.gif

無事に添付ボタンの色を変更できました。
簡単にできるので、jQuery苦手なかたもチャレンジしてみてください。
小さなできたを楽しみましょう!

参考サイト

ファイルアップロードの参照ボタンの変更設定
http://php.o0o0.jp/article/jquery-upload_button

【低意識】開発中cssとかjsとか読みなおすのめんどくさーーい

$
0
0

なにもかもがめんどくさい

PCのChromeとかはさ、開発者ツールだしたうえで更新ボタン左クリックで長押し→「キャッシュのクリアとハード再読み込み」でまあなんとかなる(でもそれすらもめんどい)

あとは特にスマホでキャッシュクリアすんのがめんどくさい(結構時間かかる)

王道Pragma

header("Pragma: no-chache");

だと全部キャッシュされない、これはキモイ

Apacheは高性能

http://note.mokuzine.net/apache-cache/

<filesMatch "\.(css|js|php)$">
FileETagNoneHeaderunset ETag
    Headerset Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Headerset Pragma "no-cache"
    Headerset Expires "Thu, 01 Dec 1994 16:00:00 GMT"
</filesMatch>

ぐわーーー
意識が高くてじんましんが出るぜ!!!!
Apacheの設定ファイルみたいな、1文字間違うと動かなくなるようなナイーブな奴と関わり合いになるのはお断りなんだよ!

まあこんな感じでしょ

<linkrel='stylesheet'href='/css/style.css'type='text/css'onload="this.href = this.href + '?' + (new Date()).getTime()"/>

ちなみに画面が乱れます
本番には絶対使えない系

画面乱れたくない

<linkid="css"rel='stylesheet'href='/css/style.css?'type='text/css'media='all'/><script>document.addEventListener('DOMContentLoaded',function(){varcss=document.getElementById('css');css.href+=(newDate()).getTime();});</script>

もはや意識高いし複雑すぎてダサい

js動くのがやだなって人のおまけ

<linkrel='stylesheet'href='/css/style.css?{{date().timestamp}}'type='text/css'/>

こっちだと画面が乱れない(かといって本番に使うことはおすすめしない)


プログラムに書くコメント各種

$
0
0
java
// 一行だけがコメント/* この間の文字は
すべてコメント*/
html
<!-- この間の文字がコメント--><!-- この間の文字が
すべてコメント-->

// コメントにはならない
/* コメントにはならない*/
CSS
/* この間の文字がコメント */

padding(パディング)の書き方-CSS

$
0
0

paddingの書き方

指定したい値が方向ごとに異なる場合、個別で指定する方法もありますが、まとめて書くことも可能。
値を4つ、スペース区切りで指定した場合、「上」「右」「下」「左」の順で適用され
値を2つ指定した場合、「上下」「左右」の順に適用されます

sample
.sample1{padding:20px10px20px10px;/*  上(top) 右(right) 下(bottom) 左(left) 
      時計回りに指定 */}.sample2{padding:20px10px;/*      上下 左右   */}

Sassについての学習

$
0
0

Sassとは

SassとはCSSの機能を拡張した言語である。Sassを利用することで、CSSを効率的にかけるようになる。SassはCSSに非常に似ているが異なる言語である。CSSを簡潔にかけるだけではなく、CSSの中で編集を使ったり、計算を行うことができたりする。

Sassファイル

Sassは通常のCSSファイルには記述することができない。反対にSassファイルにCSSを記述することはできる。Sassを扱うファイルの拡張子は.sassと.scssの2種類がある。どちらもSassのファイルとなるが記法が大きく異なる。

.sass拡張子

拡張子は .sass
SASS記法を扱うことができる。
SASS記法では波括弧の省略やセミコロンが不要
しかし、CSSの記法との差がありすぎた為かあまり普及しなかった。

SASS記法
.bodypcolor:#333font-size:15pxfont-weight:normalstrongcolor:redfont-weight:bold

.scss拡張子

.sassに後に作られたSassファイルが.scssの拡張子ファイルである。
CSSに非常に似た記法(SCSS記法)でSassの機能を使うことができる。今ではこの記法が主流である。
これからの説明はSCSS記法を用いる。

SCSS記法
.bodyp{color:#333;font-size:15px;font-weight:normal;strong{color:red;font-weight:bold;}}

記述の簡略化

● Sassのネスト構造
ネストさせることで、同じ親のセレクタをまとめることができる。
下記の例で見てみる。

sample.html
<divclass="block"><h1class="title">Hello world</h1><pclass="text">Sass is <span>great!</span></div>

CSSのスタイルで記述する場合

sample.css
.block{background-color:#000;}.block.title{color:#FFF;font-size:70px;text-align:center;}.block.text{font-size:15px;color:#FFF;}.block.textspan{color:red;font-size:20px;}

Sassでセレクタをネストして記述した場合

sample.scss
.block{background-color:#000;.title{color:#FFF;font-size:70px;text-align:center;}.text{font-size:15px;color:#FFF;span{color:red;font-size:20px;}}}

プログラムのような処理ができる

Sassでは変数や条件分岐といったプログラムのような処理を記述できる。
● Sassにおける変数
変数の定義の仕方
$変数名: 値;
よく使うカラーコードや値は変数にすることであとで変更が楽になったり、コードが読みやすくなる。

Sassにおける変数
$section-color:rgb(30,30,30);seciton{background-color:$section-color;}

複数のCSSファイルを1つにまとめることが可能

Sassではパーシャルという機能を使用して、複数のSassファイルを1つのCSSファイルとしてまとめられる。機能ごとにファイルを分割することができ、CSSを管理しやすくなる。
● パーシャル
パーシャルファイルの作成
ファイル名を_(アンダースコア)から始める。
パーシャルファイルの読み込み
@import ファイル名と記述する。

(例)

sample.scss
@import"reset";/* _reset.scssを読み込む */@import"header";/* _header.scssを読み込む */

同じ値を使いまわすことができる

Sassでは変数を使うことによって、同じ値を使い回すことができる。
また、mixinという機能を使用することで、同じスタイルをまとめることもできる。

(例)

_variable.scss
$mainYellowColor:#FFEC00;/* #FFEC00という色をmainYellowColorという変数名で定義する */

変数を定義してある_variable.scssを読み込むことで、_variable.scssに定義された変数を他のscssファイルで使用可能。

● mixin
まとまったスタイルを定義する機能
mixinの定義の仕方
@mixin mixin名() {}
.clearfixをよく使用することは多いと思うがその場合は、_clearfix.scss(ファイル名は自由)ファイルに定義しておく。

(例)

_clearfix.scss
@mixincleafix(){&:after{content:'';display:block;clear:both;}}

・ mixinの呼び出しは@includeを使用して以下のように書く。

_sample.scss
.menu{@includeclearfix();....menu__list{float:left;...}}

これで以下のようなsample.scssのコードを同じになる。

_clearfix.scss
.menu{&:after{content:'';display:block;clear:both;}.menu__list{float:left;...}}

何度も同じような記述をしているものがあったら、mixinにまとめることを考えた方が良い。

クリックした場所に要素を移動させる!(timeclock DAY1)

$
0
0

今回はjavascriptを用いて要素をクリックした場所に移動させる

というのをやっていきます。
初心者が自分で考えて作ったものなので多分最適化したら3行ぐらいで終わるかもしれません…自身がない方に採用してほしい…( ;´・ω・`)

クリックした場所移動

window.onload=function(){//まず動かす対象を取得varball=document.getElementById("ball");//対象が動くフィールドとなる部分を取得varcontents=document.getElementById("contents");//フィールドが押されたときにイベント発生varcontentsaddEventListener("click",function(){//押された場所を取得varx=event.x;vary=event.y; //押された場所に移動ball.style.left=x+"px";ball.style.top=y +"px";},false)

これだけです!
引っ掛かるところは関数内部かな?
javascript
var x = event.x;
var y = event.y; 

ここの中ではX軸からの距離、Y軸からの距離をそれぞれとってきています。
Javascript では座標を指定するときなどは左上に(0,0)があると考えて、

X軸が正の方向にいくときに増加して、
Y軸が負の方向にいくときに減少します。

なんかすごいわかりずらくてこんがらがりますがそんなもんだと覚えましょう…( ;´・ω・`)

そうして上で得られた変数x,yをここで使います。
javascript
ball.style.left = x + "px";
ball.style.top = y + "px";

落ち着いて分けて考えると、
ball(変数)のstyle(cssの設定)のtop(上からの距離)=変数px
です!topはabsoluteと設定したときによくみますよね?あれです…
同じようにyもleft(左からの距離)としています。
→変数 + "px"の部分
 ここはjavascriptでstyleの指定をする際に変数(数字)は""をつけて、px(文字)ではつけないという基本的な原則に乗っ取ってます…

まとめ

今回の処理では
変数に現在位置代入!からの
 変数で場所指定!

という単純な動作をしています。
ポチポチ押して動くのも結構楽しいのでやってみては???

次回の時 旅さん

さーて来週(明日ぐらい)の時 旅さんはー?
俺です。
この動きを導入するときに一緒に導入した移動距離と時間を比例関係におく
っというのをここで紹介したいと思います。
そもそも今日紹介しようとしたけど分量が長くなったのでやめました…
また明日も…見てくれよな!

なに紹介してる??

紹介しているものとしては現在作成しているもののなかで実装した機能たちです。

タイトルの後ろには現在作成しているものの名前とそれが今何日目なのかを表してます…
こんな感じのものつくりたいっていうのと似てたらそれがついてるやつを追ってけば少しずつ完成していくはずです。
それかそこから紹介してそうだなーっていうのを予想して探してみてください(激ムズ)
要望あったり、面白そうなアイデアくれたら作ります。今は経験が必要なので…

以上!
あなたとともに時を越える旅を?

年末まで毎日webサイトを作り続ける大学生 〜21日目 段組みレイアウトでタロットカードを配置してみた〜

$
0
0

はじめに

こんにちは!最近週末は温泉に通っている@70days_jsです!
webサイト制作でお金を稼ぐために年末まで毎日webサイトを作っております。
今日はMDNでcssの段組みレイアウトを学びました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は21日目。(2019/11/8)
よろしくお願いします。

サイトURL

やったこと

まず段組みレイアウトってなんぞやという話なんですが、見たらすぐにわかると思います。
スクリーンショット 2019-11-08 23.43.27.png

これが段組みレイアウトです。新聞記事風に配置できる感じですかね。
flexboxやgridレイアウトでできそう・・・とか思いましたが、まあ見出しと本文があるものを段組みしようと思ったら微妙に手間ですよね。

というわけで今回は、こんな感じのスタイルを使いました↓

#container{column-count:4;column-gap:80px;column-rule:1emdoublergba(50,200,50,.5);}.all_card{break-inside:avoid;}

column-countで何段にするかを指定して、gapは段の間の大きさを指定できます。
column-ruleは段と段の間に線が引けますね。
break-insideは一つのブロック要素を分裂させずに表示します。(これがなかったら記事が途中でも次の段に行って見栄えが悪くなります。)
というわけで今回これを利用して作ったのがこちら↓
test.gif

最近JavaScriptで完結させたい熱が出てきて、htmlはかなりシンプルにしました。html部分はこれだけです↓

<body><h1>タロット占い</h1><divid="container"></div></body>

タロットカードの表示とかは全部JavaScriptで行なっています。

letcontainer=document.getElementById('container');leteventNumber=document.getElementsByClassName('all_card');lettekitoudesu=['絶好調','危ないかも','うーん、頑張れ','なるほどなぁ・・・','そのままでいい!','その調子だ!'];for(vari=0;i<8;i++){vardivCreate=document.createElement('div');varh2Create=document.createElement('h2');varnumber=i;vartext1=document.createTextNode(number);vartext3="card"+number;varsetClass='all_card '+text3;divCreate.setAttribute('class',setClass);h2Create.appendChild(text1);divCreate.appendChild(h2Create);container.appendChild(divCreate);}for(vari=0;i<eventNumber.length;i++){eventNumber[i].addEventListener('click',test)}functiontest(){letrandom=tekitoudesu[Math.floor(Math.random()*tekitoudesu.length)];alert(`今日のあなたの運勢は"${random}"です!`);}

for文のところで要素を生成しています。画像はあらかじめcssでbackground-imageを用意しておいて、要素にclassをつけているだけです。img要素を作ってつけるのとどっちがいいんだろう・・・?

.card0{background-image:url("talot/talot0.jpg");}

あとはクラス名でイベントリスナーをつけてクリックされたら、用意しておいた適当な文言からどれか一つを表示するだけです。

感想

そろそろ簡単なwebサイト制作の仕事を受注したいなーと考えています。まだまだなのは分かっていますが、実践を通した方が成長スピードがもっと上がるかなとか思っています。いやでも未熟なうちはどうなんだろう・・・。悩ましい。という感じです。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

  1. 段組みレイアウト - Web 開発を学ぶ | MDN (https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)

MDNさんありがとうございます!とても分かりやすかったです!

[Catalina] 英語と日本語を混ぜた要素の高さが合わない(フォントのバグ)(Chrome)

$
0
0

現象

日本語と英語表記にしたdiv要素をdisplay:inline-blockで横一列に並べると、以下のように英語が入っている要素のみdivが小さくなっている。

スクリーンショット 2019-11-09 0.05.29.png

対象読者

codepenの表示が上のようにHelloのみ小さく表示されている人

See the Pen catalina_font_bug by Toshi (@Toshi1) on CodePen.

結論

Chromeのフォント設定を変更しましょう

方法

これはmac新OSのCatalinaのフォント設定が原因で生じます。macOS Catalinaでヒラギノ角ゴPro/ProNがなくなったことにより、デフォルトで明朝体が設定されるようです。そこで、フォント設定を行いましょう。

Chromeの画面で右上のスクリーンショット 2019-11-09 0.18.20.pngを押し、Chromeの設定画面に入る

スクリーンショット 2019-11-08 23.15.54.png

フォントをカスタマイズを選択
スクリーンショット 2019-11-08 23.16.08.png

標準フォントカスタムとなっているので、好きなフォントに設定する(一度フォントを選択するとカスタムはなくなります)

スクリーンショット 2019-11-09 0.16.00.png

自分の場合はヒラギノ角ゴシックを選択しました

スクリーンショット 2019-11-09 0.14.40.png

Sans Serifフォントもカスタムになっているのでこれも変更してください。
スクリーンショット 2019-11-09 0.38.35.png

再度表示を確認すると、日本語と英語が混ざったdiv要素の高さが揃っていることが確認できると思います。

スクリーンショット 2019-11-09 0.23.27.png

移動距離と移動時間を比例させる!(timeclock DAY2))

$
0
0

移動距離と移動時間

昨日説明したクリックした場所に要素を移動させる[https://qiita.com/toga364/items/bbbdcad49258a5f3540f]
のつづきとして紹介していく…
初心者が初心者のために作ったものなので無駄に長くてまとまってないかも…
あんま参考にしないでね!

どういうこと??

タイトルだけじゃよくわからないと思うので、どんな機能をつけるかまとめる
1.要素を移動させる
2.要素の移動距離を取得
3.要素の移動距離に応じて移動にかける時間を設定
こんな感じです…まぁ詳しくはコードみてね!

実際のコード

/*ここまでは前回で触れたよ!
(リンクは上にあります)
contents.addEventListener("click",function(){
   var x = event.x;
   var y = event.y;
*/varleft=ball.style.left;vartop=ball.style.top; varleftNum=left.slice(0,left.length-2);vartopNum=top.slice(0,top.length-2);vardistanse=Math.sqrt(Math.pow(leftNum,2)+Math.pow(topNum,2));ball.style.transitionDuration =distanse*1.5+"ms";/*ここも前回で触れたよ!
   ball.style.left = x + "px";
   ball.style.top = y + "px";
   */},false)

この5行ぐらいのコードが今回説明するために新たに必要になるものです。
2行位ずつで分けて説明します。

変数の指定(left,top)

varleft=ball.style.left;vartop=ball.style.top; 

ここの部分。
ここでは現在のボールの位置を取得して変数に代入してます。
一応確認すると、ball要素のstyle のleft、heightからの距離を取得してます。
ちなみにここではpxが単位としてつきます。consoleで確認してみてね!
まあまだ簡単…
*leftは左からのx軸方向の距離、
 topは上からのy軸方向の距離を分けて求めてるよ!

sliceの部分

varleftNum=left.slice(0,left.length-2);vartopNum=top.slice(0,top.length-2);

ここだね!
ここではひとつ前で取得した変数からpxを抜き出しています。

要素.slice(開始位置,終了位置)

で終了位置のあとをなくした状態の変数(数字)を取得できます。
変数を使っていく上でさっきの状態ではpxがついているため、文字列だったけど、今回設定すると数字になったよ!
だからこれは文字列数字にするための処理です。
文字列の状態では足し算、引き算ができないのでこう変化(数字にする)を加えてます。 

変数(distanse)は何してる??

vardistanse=Math.sqrt(Math.pow(leftNum,2)+Math.pow(topNum,2));

ここだよ!
みた感じすごい難しそうだけど紐解いていくと簡単で、中学のときの三平方を利用してもとの場所と移動する場所の距離を求めてます。

まず、謎の関数たちの説明!
javascript
Math.sqrt(平方根を求める対象);

ここで()のなかの値の平方根を求められる。
javascript
Math.pow(累乗する対象,指数);

ここで累乗した値を求められる。

これでわかった人がいるかもしれないけど、単純に中学のときの三角形の直角があるときに使える三平方の定理を利用してる
三平方の定理
A^2=B^2+C^2
変形後
A=√B^2+C^2
単純にこれをしているだけです…

関数郡のせいで難しそうだけどx方向の距離とy方向の距離を分けててにいれたものをここで処理して、要素の過去、現在の座標の距離を求めているよ!

最後の指定は?? 

ball.style.transitionDuration =distanse*1.5+"ms";

ここではスタイルを通じてアニメーションにかける時間を設定しています。
css
transition-duration: 時間;

でアニメーションにかける時間を設定するのと同じ感じ…( ;´・ω・`)
この時間のところにさっきてにいれた変数(distanse)を使用して、数字を求めています。
今回は一ミリ秒で1500px動くようになっている…はず…

まとめ

大まかな流れ
1,現在位置を求める
2,位置を数字化する
3,位置の距離を三平方使って求める
4,最後に秒速設定!
って感じ!
質問あったらよろしくぅ!


業務で知った言葉

$
0
0

業務で知った言葉のまとめ
転職して初めて知った言葉が結構ある…

※まだ単語だけの項目が多いですが、随時詳細を書いていきます※

LT

Lightning Talkのことで、スピーチより硬くない感じ。
話す時間も5分~10分と比較的短め。
人前で話すことが苦手な人に向いている
→人前で話すことに慣れて苦手じゃなくなる!ということらしい。
参考サイト

マテリアルデザイン

Googleが推奨するデザイン手法のガイドラインのこと。
日本語のページはないっぽいけど、図を見ればそれなりにわかる(https://material.io/design/)
同じサイトが違うデバイスでも表示されても、シンプルで直感的に操作できるデザインが望ましいということ。勉強あるのみ!

レスポンシブデザイン

デバイスの画面サイズに依存しないデザインのこと。ウインドウの幅が変わると自動的に見やすくなっているのがそう。

HTMLメール

HTMLで構成された電子メールのこと。
HTMLメールではテキストメールと違って

  • 文字のフォント・色・大きさが変えられる
  • テキスト内に画像や動画を配置できる

という特徴がある。
Amazonの発送確認メールとかがHTMLメールにあたる。
メールに画像があったら「これはHTMLメールだな」と思っていい。
<table>タグを使わないといけない(じゃないと正しい表示にならない)ので、<tr>~</tr>の数がえぐい…:scream:
「そこ、<div>~</div>でよくない?」ってところも、<table>タグ使ってて<tr>~</tr>だったりする。気になるひとはデベロッパーツールで見てみよう!

サンダーバード

青い鳥:chicken:のデザインが特徴的な、電子メールクライアントソフトウェア。
5人兄弟がメカを操って世界の平和を守っている方ではない:rocket:

業務でHTMLメールが正しく表示されるか確認するために使っている。
日常生活でメールするのには別に要らないな…

コードレビュー

記述してあるコードがコーディング規約に従っているか・デザイン画通りになっているか・スペルミスがないか等々を確認すること。

ABテスト

WEBマーケティングの1つ。
変更を加える前のもの(Aパターン)と変更を加えたもの(Bパターン)を用意し、どちらがより良い結果を出せるかを検証すること。

スケルトン

スプライト

ブランチ

さまざまな動きをするjQueryスライダーを作ってみた

$
0
0

jQueryの勉強のために昔作ったスライダーです。
そのころはまだレスポンシブとかあまりなかったので、デスクトップ表示しかありません。

スライドのパターン

よく使う配布されているスライダーを見ると画像の動き方が何種類かあるので、今回は6種類作ってみました。

デモ

デモ

HTML

<divid="slide01"><ul><li><ahref="#"><imgsrc="img/img01.gif"width="700"height="426"alt=""></a></li><li><ahref="#"><imgsrc="img/img02.gif"width="700"height="426"alt=""></a></li><li><ahref="#"><imgsrc="img/img03.gif"width="700"height="426"alt=""></a></li><li><ahref="#"><imgsrc="img/img04.gif"width="700"height="426"alt=""></a></li><li><ahref="#"><imgsrc="img/img05.gif"width="700"height="426"alt=""></a></li></ul></div>

CSS

デモからスライドに関係する箇所

.sliders{position:relative;}.slidersli{overflow:hidden;list-style-type:none;}.slidersliaimg{border:0;}.pager{padding:10px0;text-align:center;}.pagerli{display:inline-block;*display:inline!important;list-style-type:none;zoom:1;}.pagera{margin:05px;display:block;width:10px;height:10px;background:url(img/pager_off.png)no-repeatlefttop;text-decoration:none;text-indent:-9999px;outline:none;}.pagera:hover,.pager.currenta{color:red;text-decoration:none;background:url(img/pager_on.png)no-repeatlefttop;}.prev{margin-top:-25px;margin-left:-450px;width:50px;height:50px;position:absolute;top:50%;left:50%;background:url(img/prev_off.png)no-repeatlefttop;text-indent:-9999px;z-index:50;cursor:pointer;}.prev:hover{background-image:url(img/prev_on.png);}.next{margin-top:-25px;margin-left:400px;width:50px;height:50px;position:absolute;top:50%;left:50%;background:url(img/next_off.png)no-repeatlefttop;text-indent:-9999px;z-index:50;cursor:pointer;}.next:hover{background-image:url(img/next_on.png);}

JavaScript

$(function(){$("#slide01").sliders();});

オプション

スライドの種類等jはオプションで設定できます。

$(function(){$("#slide01").sliders({slideType:'selectAnimation',changeTime:1500,showTime:3000,allTime:15000,animeType:'linear'});});
  • slideType スライドのタイプ。以下から選んで下さい。
    • fadeSlide フェードイン
    • leftSlide 左にスライド(終わりまで行くと左へ戻る)デフォルト
    • leftSlideLoop 左にスライド(ループ)
    • leftSlideAnimation 常に左にスライド(ループ)
    • selectAnimation 左にスライド(前へ次への選択ボタンあり)
    • moveOn 現在表示されているものの上に右からスライド
  • changeTime 次のスライドまでの移動秒数。デフォルトは1500
  • showTime 表示秒数デフォルトは3000
  • allTime leftSlideAnimation用・常に左にスライド(ループ)専用の全体にかかる秒数。デフォルトは15000。
  • animeType アニメーションタイプ。デフォルトはswing。jquery.easing.jsを読みこめばそちらの値も使えます。

スライダーはbxSliderなど配布されていたものを使っていたのですが、やはり自作できるといろいろ改造もできて楽しいです。

転載元

さまざまな動きをするjQueryスライダーを作ってみた

年末まで毎日webサイトを作り続ける大学生 〜22日目 ワイヤーフレームを学ぶ〜

$
0
0

はじめに

こんにちは!最近週末は温泉に通っている@70days_jsです!
webサイト制作でお金を稼ぐために年末まで毎日webサイトを作っております。
今日はワイヤーフレームという概念を学んで、2カラムレイアウトのサイトを作ってみました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は22日目。(2019/11/9)
よろしくお願いします。

サイトURL

##やったこと
ネットにある記事を参考にワイヤーフレームを学びました。
構成を考えて、ワイヤーフレームを手書きして、そのあと作り始めました。
構成↓
スクリーンショット 2019-11-10 0.04.17.png

手書きワイヤーフレーム↓
IMG_1116.jpg

本当はこの後にアプリ等を使ってデジタルのワイヤーフレームも作るらしいのですが、今回は初めということでその作業は飛ばしました。

作ったもの↓
スクリーンショット 2019-11-09 23.44.14.png

使った技術は特に新しいものはありません。headerとmain(その中にサイドバーあり)とfooterで分けて書きました。

<body><header><divid="logo_wrapper"><span>東京散歩 ~毎日ワクワクお散歩日和〜</span></div><nav><divid="nav_topic_wrapper"><div>TOP</div><div>TOPIC 1</div><div>TOPIC 2</div><div>TOPIC 3</div></div></nav></header><divid="main_contents_wrapper"><main><divid="article"><div><imgsrc="pic.png"alt="記事1のサムネイル"><div><h2>記事1のタイトル</h2><span>記事1の内容</span></div></div><div><imgsrc="pic.png"alt="記事2のサムネイル"><div><h2>記事2のタイトル</h2><span>記事2の内容</span></div></div></main><asideid="sidebar"><h3>運営者name</h3><imgsrc="pic.png"alt="プロフィール画像"><span>fugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafuga
            </span></aside></div><footer>Copyright © 2019 @js70days, All rights reserved.</footer></body>

感想

ワイヤーフレームの存在を知ったので、今後磨きをかけていいコンテンツを作れるようにします。確かに最初に構想を作るのと作らないのではやりやすさが違いました。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

  1. HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ (http://websae.net/wireframe-20150303/)
  2. 神戸ポートタワーを望むシンメトリの世界|無料の写真素材はフリー素材のぱくたそ (https://pakutaso.com/20191104309post-23997.html)

ワイヤーフレームについて参考になりました。ありがとうございます!

はてなブログのカスタマイズ(brooklyn)自分がやってきたことのまとめ(MarkDownで記事を書く人向け)

$
0
0

はてなブログのカスタマイズ

自分が今まではてなブログに行ってきたカスタマイズについてひと段落したのでここに貼ります。
自分がMarkdownモードユーザーなのでMarkdownで記事をかきhtmlなどの編集を行わなくてもそれなりの記事になるよう変更しています。

完成する記事概要

以下、私のブログです。だいたいこんな感じになります。
https://mahimahironron.hateblo.jp/entry/2019/11/09/docker-compose%E3%83%81%E3%83%BC%E3%83%88%E3%82%B7%E3%83%BC%E3%83%88

※ベースとなるテーマとしてbrooklynを使用していますが、基本、他のテーマでも問題ないと思いますが、ナビゲーションバーのカスタマイズは今回のコードでできないかもしれません。

フォントをメイリオにする

フォントを一般的に読みやすいと言われるメイリオに変更します。
記事コンテンツ内のフォントがメイリオになります。

/* フォントをメイリオにする */.entry-content{font-family:'Meiryo UI';}

ナビゲーションバーの色変更

Brooklynは画面の上にカテゴリを示すナビゲーションバーを表示することができます。デフォルトでは黒なので、自分好みの色に変更します。
色については以下のサイトで探しましょう。
https://www.colordic.org/search

/* ナビテーションバーの色変更 */#blog-title{border-bottom:2pxsolid#a1dbe6}.global-menu-listlia{background-color:#a1dbe6;}#global-menu{background-color:#a1dbe6;border-bottom:2pxsolid#a1dbe6}

見出しのデザインを変更する(h3)

/* 見出しと見出しの文字の色を変更する、角を丸くする*/.entry-contenth3{color:#ffffff;/* 文字の色 */background:#a1dbe6;/* 背景色 */border-left:0px;#border-color:#ffffff;/* 左の境界の色を白に変更 *//* 角を丸くする */border-radius:10px;/*角の丸み*/}/* 吹き出し部分の色の変更 */.entry-contenth3:before{border-top-color:#a1dbe6}

コードブロックを変更する

はてなブログに限った話ではないですが、コードブロックでは言語ごとの色付け(シンタックスハイライト)を行うことができます。

  • ※シンタックスハイライトの付け方
    • 念の為書いておきますがコードブロックを「```python」のように書くことで言語ごとの色付けを行うことが可能です。
/* コードブロックの背景色変更 */pre.code{margin:001.5em0;padding:1em;border:1pxsolid#dad8d800;background:#efefef;border-radius:2px;}

コードブロックに言語表示

/* 言語名表示 */pre.code::before{content:attr(data-lang);position:relative;bottom:1em;right:0.95em;background:#8e8e8e;padding:0.2em;color:#ffffff;font-size:100%;line-height:1.6;}

コードブロックの言語表示を言語ごとに色分け

/* 言語名ごとに色分け*/pre.lang-yaml::before{background:#3f5845;}pre.lang-sh::before{background:#acc100;}pre.lang-python::before{background:#199e8c;}pre.lang-html::before{background:#ff9e26;}

参考サイト

年末まで毎日webサイトを作り続ける大学生 〜22日目 3column layoutでサイトを作る〜

$
0
0

はじめに

こんにちは!最近週末は温泉に通っている@70days_jsです!
webサイト制作でお金を稼ぐために年末まで毎日webサイトを作っております。
昨日2カラムレイアウトのサイトを作ったので、今日は3カラムレイアウトのサイトを作ってみました。
何かを参考にしようか迷いましたが、とりあえず最初は自分でということで何もみないで作りました。レスポンシブには対応していません。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は23日目。(2019/11/10)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day23.html

やったこと

3 column layoutでサイトを作りました。

まずは構想を作ります。↓
スクリーンショット 2019-11-10 23.52.28.png

次に手書きでイメージ図を描きます。↓
IMG_1119.JPG

最後に実際にコーディングして完成です。↓(gif、重くてみられないかも。サイトURLへGO!)
test.gif

特に見せ場はないのですが、とりあえず今回はheader,main,footerの構成で、mainの中を右、真ん中、左で分けて、それをflex boxで処理しました。

body{margin:0;display:flex;flex-direction:column;min-height:100vh;}main{display:flex;}

あとのところは今までに習ったことで都合をつけました。

感想

なんやかんやで1時間近くコーディングしていました。やっぱりcssって時間かかりますね・・・。ただ、デザインは考えるのが楽しいです。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

  1. 太陽を一面に浴びる雪山の斜面|無料の写真素材はフリー素材のぱくたそ (https://pakutaso.com/20191127311post-20952.html)

画像をお借りしました。ありがとうございます!

Viewing all 8685 articles
Browse latest View live