個人アプリにて...

　個人アプリ作成してる時に見た目が寂しいってことで装飾をつけることにしました。
　ポケモンのダメージ計算アプリを自作しているのでポケモンに関する絵をHTMLとCSSで描こうと思いまして、その時に使用したワンポイントについての記事です。

半円を描く

css

.class {
  height: 25px;
  width: 50px;
  background-color: red;
  border-radius: 100px 100px 0 0;
}

　heightとwidthは各々の好きな大きさにしていただくといいのですが、大事なのはborder-radiusです。
　border-radius: 100px;で綺麗な円を描けます。
　(下の赤丸は高さ、幅共に50pxに設定)

　なので :100px 100px 0 0;で左上、右上だけを丸めてるんですね。

三角形を描く

css

class {
  height: 0;
  width: 0;
  border: 30px solid transparent;
  border-right: 30px solid yellow;
}

三角形はborderの性質を利用して描きます。

borderの性質
　四方にborderをつけるときborder同士の設置面は斜めに設置します。
　と言ってもわからないと思いますが違う色のborderのくっつけてみると分かりやすいと思います。

css

class {
  height: 30px;
  width: 30px;
  border-right: 20px solid yellow;
  border-top: 20px solid green;
}

　このように緑と黄色が斜めに接地してます。これを利用し、3方向の色を透明にすることで色をつけた一方向のみが映し出されて三角形を描くことができます。

px数の関係性としては
　border...底辺の長さ
　border-方向...三角形の高さ　　がそれぞれ変化します。

要素を斜めに配置する

css

class {
  height: 10px;
  width: 30px;
  background-color: blue;
  transform: rotate(-45deg);
  transform-origin: top center;
}

斜めに配置する際に大事なのは

• 傾ける角度
• 回転する際の軸　　　の二つです。

それぞれがtransform: rotate();とtransform-originの部分なわけです。

• transform: rotate();

  • カッコの中身が傾ける角度を指定しています。
  • 値に応じて、プラスの値で時計回り、マイナスの値で反時計回りに回転します。

• transform-origin: top center;

  • 基本形はtransform-origin: ;の中に%かキーワードで指定を行います。
  • transform-origin: top center;の場合、transform-origin: 50% 0%;と同じで、それが表すのは要素の左上を始点としてそこから右に50%、下に0%進んだ場所が回転軸になります。

こう言ったものを利用して...

　cssを自由に使えれば実際なんでもかけるんだなって話です。皆さんも挑戦してみてください。

①文字エンコーディングを指定する
　@charset "UTF-8";

②全体 ボディ・リンクの設定
・bodyの設定⇒マージン、パディング、カラー、フォントサイズ
ブラウザのデフォルトでできてしまうマージン、パディングを０にする

body {
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
}

・リンクの文字色
疑似クラスを用いて設定

a {
    color: #333;
}

a:visited {
    color: #333;
}

a:hover {
    color: #333;
    font-weight: 700;
    text-decoration: none;
}

③全体 マージンの設定

・見出しのマージン⇒デフォルトでは上下にマージンがあるので０にする

h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
}

・段落のマージン⇒デフォルトでは上下にマージンがあるので０に、行間もあけると見やすい

p {
    margin-top: 0;
    line-height: 1.6;
}

・画像のマージン⇒画像下にマージンができてしまうことある

img {
    vertical-align: bottom;
}

④全体　見出しの装飾

⑤ヘッダー

①文字エンコーディングを指定する
　@charset "UTF-8";

②全体 ボディ・リンクの設定
・bodyの設定⇒マージン、パディング、カラー、フォントサイズ
ブラウザのデフォルトでできてしまうマージン、パディングを０にする

body {
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
}

・リンクの文字色
疑似クラスを用いて設定

a {
    color: #333;
}

a:visited {
    color: #333;
}

a:hover {
    color: #333;
    font-weight: 700;
    text-decoration: none;
}

③全体 マージンの設定

・見出しのマージン⇒デフォルトでは上下にマージンがあるので０にする

h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
}

・段落のマージン⇒デフォルトでは上下にマージンがあるので０に、行間もあけると見やすい

p {
    margin-top: 0;
    line-height: 1.6;
}

・画像のマージン⇒画像下にマージンができてしまうことある

img {
    vertical-align: bottom;
}

④全体　見出しの装飾

↓こちらを参考に、というかコピペして使えばいいだろう。(フォントサイズは自分で指定)
https://saruwakakun.com/html-css/reference/h-design

⑤ヘッダー

＜位置調整＞
・ヘッダーの位置調整　→　<header>にmargin:autoにして全体を中央に揃える
・ロゴの位置調整　→　header h1 セレクタにmarginプロパティをあてる
・ナビの位置調整　→　<nav>要素に指定されているIDセレクタにmarginプロパティをあてる

＜ナビゲーションのデザイン①＞
・リストの「・」を消す　→　<ul>タグに、IDセレクタでlist-style: none;のプロパティと値をあてる
・リストを横並びにする　→　デフォルトがblockの<li>タグに、タイプセレクタでdisplay:inline-blockのプロパティと値をあてる
・デザインを整える　→　デフォルトがinlineの<a>タグに、タイプセレクタでdisplay:blockのプロパティと値、またパディングやカラーなどのプロパティでデザインを整える

＜ナビゲーションのデザイン②＞
・<li>タグにdisplay:inline-blockを使って横に並べると「半角スペース」が<li>と<li>の間に入ってしまう問題を解決する（半角スペース分横幅が増えてしまう）。
→<ul>タグにセレクタでfont-size:0px;に一度して、<li>タグでfont-size:14px;などサイズを戻す。ここは難しいのでCSSをそのまま掲載する

#global_navi ul {
    font-size: 0;  /* 半角スペース削除 */
    list-style: none;
    margin: 0;
    padding: 0;
}

#global_navi ul li {
    font-size: 14px;  /* フォントサイズ復活 */
    display: inline-block;
    width: 164px;
    text-align: center;
}

この記事が気に入ったら、他の例をチェックしてください。フロントエンド開発者にとって最高のCSSローダー

「パンケーキ作り」ローダー

See the Pen 'Making pancake' loader by Pawel (@pawelqcm) on CodePen.

純粋なCSSブックローダー

See the Pen Pure CSS Book Loader by Aaron Iker (@aaroniker) on CodePen.

CSS階段ローダー

See the Pen CSS Stairs Loader by Irko Palenius (@ispal) on CodePen.

CSSローダー

See the Pen Loaders by Aaron Iker (@aaroniker) on CodePen.

CSSローダー

See the Pen CSS Loaders by Rosa (@RRoberts) on CodePen.

この記事が気に入ったら、他の例をチェックしてください。フロントエンド開発者にとって最高のCSSローダー

はじめに

初めてanime.jsでスムーススクロールの実装をしてみました。
普段はvelocity.jsを使っているため、やり方が違ってハマってしまい、調べても出てこなかったので備忘録として記事にしました。

実装方法

anime

  //$target = document.querySelector(TARGET);
  scroll($target) {
    const $window = window.document.scrollingElement || window.document.body || window.document.documentElement;
    anime({
      targets: { scroll: $window.scrollTop },
      scroll: $target.offsetTop,
      duration: 500,
      easing: 'easeInOutQuart',
      update: (a) => {
        $window.scrollTop = a.animations[0].currentValue;
      }
    });
  }

velocity

  //$target = document.querySelector(TARGET);
  scroll($target) {
    velocity($target, 'scroll');
  }

終わりに

他のアニメーションとの兼ね合いでanime.jsを使う必要がありました。
velocityのときは一行で済んでいたのですが、anime.jsだとそうもいかず。。
調べてもなかなか出てこず、ハマりました。
もう少しスマートにかけないかなあと思っているので、こうした方がいいよ等ございましたら
教えていただきたいです。

はじめに

初めてanime.jsでスムーススクロールの実装をしてみました。
普段はvelocity.jsを使っているため、やり方が違ってハマってしまい、調べても出てこなかったので備忘録として記事にしました。

実装方法

anime

  //$target = document.querySelector(TARGET);
  scroll($target) {
    const $window = window.document.scrollingElement || window.document.body || window.document.documentElement;
    anime({
      targets: { scroll: $window.scrollTop },
      scroll: $target.offsetTop,
      duration: 500,
      easing: 'easeInOutQuart',
      update: (a) => {
        $window.scrollTop = a.animations[0].currentValue;
      }
    });
  }

velocity

  //$target = document.querySelector(TARGET);
  scroll($target) {
    velocity($target, 'scroll');
  }

終わりに

他のアニメーションとの兼ね合いでanime.jsを使う必要がありました。
velocityのときは一行で済んでいたのですが、anime.jsだとそうもいかず。。
調べてもなかなか出てこず、ハマりました。
もう少しスマートにかけないかなあと思っているので、こうした方がいいよ等ございましたら
教えていただきたいです。

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

TechAcadmy　lesson3 10.webページのレイアウト

◆レイアウト手順まとめ（詳しくは以下の2カラム、3カラムを見る）

１．headerとfooterの間に<div id="wrapper"></div> を作る
２．wrapper の中に、カラムとして横に並べたい div や aside などを作る
３．横に並べてもカラム落ちしないように width を調整する （ % や px で値を決める）
４．カラム用の要素に float プロパティを設定する
５．CSS に clearfix を追加して、wrapper に class="clearfix" をつける
　※cssで#wrapperに「overflow:hidden;」というプロパティと値をあてる方法もある。

◆2カラムレイアウトを作る

[header]
[div#main][aside]
[footer]

という構図のレイアウトを作る

▽【css】mainとasideに「floatプロパティ」をあてる

main{
 float:left;
 }
aside{
 float:right;
}

▽footerが回り込まないようする

〇【html】mainとasideを一つのdivボックスにまとめる
id=wrapperというidを指定することが多い。

<div id="wrapper">
    <div id="main">
        メイン
    </div>
    <aside>
        サイドバー
    </aside>
</div>

〇【html】wrapperのdivに「class="clearfix"」を加える

<div id="wrapper" class="clearfix">

〇【css】「.clearfix::after」セレクタを作る

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

◆３カラムレイアウトを作る

clearfixのところは2カラムと同じ

〇【html】3つのブロックをつくる
asideのタグに「left」「right」のクラス指定をする

<aside class="left">左サイド</aside>
<div id="main">メイン</div>
<aside class="right">右サイド</aside>

〇【css】mainとasideのサイズを指定する

div#main{
 width:34%;
 height:100px;
 }
aside{
 width:33%;
 height:100px;
 }

〇【css】それぞれに「floatプロパティ」を指定する

div#main{
 float:left;
 }
aside.left{
 float:left;
 }
aside.right{
 float:right;
 }

◆ナビゲーションメニューを横並びにする

▽【html】リストでナビゲーションのボタンを並べる

<nav>
<ul>
 <li>ホーム</li>
 <li>会社概要</li>
 <li>サービス</li>
 <li>お問い合わせ</li>
</ul>
</nav>

▽【CSS】displayプロパティにinline-blockという値を入れる

nav ul li{
 display:inline-block;
 }

TechAcadmy　lesson3 10.webページのレイアウト

◆2カラムレイアウトを作る

[header]
[div#main][aside]
[footer]

という構図のレイアウトを作る

▽mainとasideに「floatプロパティ」をあてる

main{
 float:left;
 }
aside{
 float:right;
}

▽footerが回り込まないようする

〇mainとasideを一つのdivボックスにまとめる
id=wrapperというidを指定することが多い。

<div id="wrapper">
    <div id="main">
        メイン
    </div>
    <aside>
        サイドバー
    </aside>
</div>

〇「.clearfix::after」セレクタを作る

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

◆３カラムレイアウトを作る

TechAcadmy　lesson3 10.webページのレイアウト

◆2カラムレイアウトを作る

[header]
[div#main][aside]
[footer]

という構図のレイアウトを作る

▽【css】mainとasideに「floatプロパティ」をあてる

main{
 float:left;
 }
aside{
 float:right;
}

▽footerが回り込まないようする

〇【html】mainとasideを一つのdivボックスにまとめる
id=wrapperというidを指定することが多い。

<div id="wrapper">
    <div id="main">
        メイン
    </div>
    <aside>
        サイドバー
    </aside>
</div>

〇【html】wrapperのdivに「class="clearfix"」を加える

<div id="wrapper" class="clearfix">

〇【css】「.clearfix::after」セレクタを作る

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

◆３カラムレイアウトを作る

TechAcadmy　lesson3 10.webページのレイアウト

◆レイアウト手順まとめ（詳しくは以下の2カラム、3カラムを見る）

１．headerとfooterの間に<div id="wrapper"></div> を作る
２．wrapper の中に、カラムとして横に並べたい div や aside などを作る
３．横に並べてもカラム落ちしないように width を調整する （ % や px で値を決める）
４．カラム用の要素に float プロパティを設定する
５．CSS に clearfix を追加して、wrapper に class="clearfix" をつける
　※cssで#wrapperに「overflow:hidden;」というプロパティと値をあてる方法もある。

◆2カラムレイアウトを作る

[header]
[div#main][aside]
[footer]

という構図のレイアウトを作る

▽【css】mainとasideに「floatプロパティ」をあてる

main{
 float:left;
 }
aside{
 float:right;
}

▽footerが回り込まないようする

〇【html】mainとasideを一つのdivボックスにまとめる
id=wrapperというidを指定することが多い。

<div id="wrapper">
    <div id="main">
        メイン
    </div>
    <aside>
        サイドバー
    </aside>
</div>

〇【html】wrapperのdivに「class="clearfix"」を加える

<div id="wrapper" class="clearfix">

〇【css】「.clearfix::after」セレクタを作る

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

◆３カラムレイアウトを作る

clearfixのところは2カラムと同じ

〇【html】3つのブロックをつくる
asideのタグに「left」「right」のクラス指定をする

<aside class="left">左サイド</aside>
<div id="main">メイン</div>
<aside class="right">右サイド</aside>

〇【css】mainとasideのサイズを指定する

div#main{
 width:34%;
 height:100px;
 }
aside{
 width:33%;
 height:100px;
 }

〇【css】それぞれに「floatプロパティ」を指定する

div#main{
 float:left;
 }
aside.left{
 float:left;
 }
aside.right{
 float:right;
 }

親要素無視してwidth100%に

↑
この部分だけをどうにかしてウィンドウの幅と同じにしたい。

しかし、例えばbodyのwidth: 80%;に指定すると、全ての要素がwidth: 80%;のなってしまう。

一つの要素だけ親要素を無視してwidthを広げたい。

そんな時に使えるのが

width: 100vw;

これは、ウィンドウに合わせてwidth調節できる
（vwは「viewport width」でウィンドウの幅を意味する）

そして、bodyをmargin: 0 auto;で完成。

と思いきやこれは間違いで、そうしてしまうと『トップのシマシマ画像』も開始位置が親要素に依存してしまいます。

ではどうする？

sample.css

.header-top{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

left: 50%;で真ん中に配置させて、

transform: translateX(-50%);で左に50%移動させなければなりません。

これで完成です。

CSSが読み込めない

ディベロッパーツールで確認すると、

Refused to apply style from 'http://localhost:9000/css/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

のエラー。

読んでみると、『MIMEタイプがサポートされていない』と書かれていますが、問題はそこではなくて。

cssのパスの違いにありました。

パスを変える

├── dist
│   ├── index.html *
│   ├── main.js
│   ├── style.css
└── css

index.html（修正前）

<link rel="stylesheet" href="./css/style.css">

index.html（修正後）

<link rel="stylesheet" href="style.css">

原因は相対パスの起点にありました。

起点は、

現在ブラウザで実行されているファイルで、そこからの相対パスを書かなければいけません。

100日チャレンジの315日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
315日目は、

おはようございます
315日目 2h
・ポートフォリオ作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) May 13, 2020

CSS Perspective Text Hover

See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.

Color Swap

See the Pen Color Swap by Mai El-Awini (@maicodes) on CodePen.

Silent Movie Text Effect

See the Pen Silent Movie Text Effect by Dimitra Vasilopoulou (@mimikos) on CodePen.

(cool) text effect

See the Pen (cool) text effect by Hakkam Abdullah (@Moslim) on CodePen.

more example 25+ CSS DROPDOWN MENU

CSS Perspective Text Hover

See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.

Color Swap

See the Pen Color Swap by Mai El-Awini (@maicodes) on CodePen.

Silent Movie Text Effect

See the Pen Silent Movie Text Effect by Dimitra Vasilopoulou (@mimikos) on CodePen.

(cool) text effect

See the Pen (cool) text effect by Hakkam Abdullah (@Moslim) on CodePen.

more example 25+ CSS DROPDOWN MENU