20200625のHTMLに関する記事は10件です。

2020/6/25 フロントエンド HTML復習 学習メモ1(仮)

 Udemy プログラミング学習 

利用した学習教材

Udemy

ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
https://www.udemy.com/course/web-application-development/

学習範囲

セクション1からセクション3の27まで

学習時間

約3時間
(qiitaへ学習メモを残す時間も含めて)

環境構築

・Google Chrome(ブラウザ)
・Visual Studio Code(コードエディター)

フロントエンド開発で重要な3要素

・HTML
・CSS
・Javascript

HTML

・Webページの内容を記述するためのマークアップ言語

CSS

・HTMLで書かれた構造化された文章のスタイルを指定するための言語

Javascript

動的なWebサイト(twitter等)を作るためのプログラミング言語
(HTMLとCSSのみで作られたWebサイトは静的なWebサイト)

 フロントエンドとバックエンド

フロントエンド

・クライアント側(※1)で動作する
・HTML・CSS・Javascriptで記述する

簡単にいうとWebサイトの表の部分

※1: プログラミングにおけるクライアント側とは、Webサイトを開いたユーザーのこと。ユーザーの使っているPCやスマホに入ってるブラウザがプログラムを実行する。

バックエンド

・サーバ側で処理が行われる部分
・DBアクセス(※2)、ファイルへのアクセス、合計金額の計算など
・プログラミング言語で記述する

簡単にいうとWebサイトの裏の部分

※2: DBアクセスは、データベースへの接続のこと。
データベースとは、特定のテーマに沿ったデータを集めて効率的に管理し、使いやすくしたもの。アクセスすることでデータベースに入力したり、データベースから出力することができる。

DBに関して参考にしたサイト
初心者向け】データベースとは何か? わかりやすく簡単に意味を図解

データベースに関して深掘りすると時間がかかりそうだったので割愛とする。

フロントエンド

インターネット

バックエンド
という関係にある。

HTML復習

HTMLの基本構文

<タグ名>コンテンツ</タグ名>
 開始タグ     終了タグ

開始タグから終了タグまでを要素と呼ぶ。

HTMLの基本構造

DOCTYPE宣言

<!DOCTYPE html>

使用するHTMLの種類を宣言している。

html要素

<html></html>

HTML要素の最上位要素

head要素

<head></head>

head要素の中には....

文書のタイトル

<title>タイトル名</title>

文字コード

<meta charset="utf-8">

※meta属性

head要素内に記述、文書に関する情報を指定する

※utf-8

世界的に最もポピュラーな文字コード

説明文

<meta name="description" content="説明文">

※name属性

要素の名前を指定

※description

Webサイトの要約を示すテキスト情報

※content属性

データの内容

キーワード

<meta name="keywords" content="検索されたいワード">

※keywords

検索エンジンに向けた内容を記述
(Googleに関してはメタキーワードは無視されるらしい)

関連ファイル(外部リソース)

<link rel="stylesheet" href="ファイル名">

※link属性

このページに関係する外部リソースを指定するもの。

※rel属性

リンク先となる外部リソースの位置づけを表す。

※stylesheet

外部のCSSファイルを読み込むためのもの。

....などの文書の基本構造が入る。

body要素

ブラウザ画面に表示する内容を記述する。

h1タグ

<h1>見出し</h1>
見出しを記述するためのタグ。
hは、headingの略。
h1からh6までの段階がある。
h1は最上位の見出しタグで、文書内に原則1つまで。

pタグ

<p>文字</p>
pは、paragraphの略。
段落を記述するためのタグ。

※マークは、補足的な意味合いで使っている。

↓は自分に対してのメモ

※学習メモ1は、これからの学習メモを残すための練習も兼ねて。
Markdownの書き方等。

※インプットした内容は可能な限り自分の言葉にして書き残す。(書き写しにならないように意識する。)

※他の方のqiitaも参考にしながら、誰が見ても分かりやすい文章にすることを心がける。

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

2020/6/25 学習メモ1 フロントエンド HTML復習 

 Udemy プログラミング学習 

以降に登場する※マークは、補足的な意味合いで使っている。

利用した学習教材

Udemy

ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
https://www.udemy.com/course/web-application-development/

学習範囲

セクション1からセクション3の17まで

学習時間

約3時間
(qiitaへ学習メモを残す時間も含めて)

環境構築

・Google Chrome(ブラウザ)
・Visual Studio Code(コードエディター)

フロントエンド開発で重要な3要素

・HTML
・CSS
・Javascript

HTML

・Webページの内容を記述するためのマークアップ言語

CSS

・HTMLで書かれた構造化された文章のスタイルを指定するための言語

Javascript

動的なWebサイト(twitter等)を作るためのプログラミング言語
(HTMLとCSSのみで作られたWebサイトは静的なWebサイト)

 フロントエンドとバックエンド

フロントエンド

・クライアント側(※1)で動作する
・HTML・CSS・Javascriptで記述する

簡単にいうとWebサイトの表の部分

※1: プログラミングにおけるクライアント側とは、Webサイトを開いたユーザーのこと。ユーザーの使っているPCやスマホに入ってるブラウザがプログラムを実行する。

バックエンド

・サーバ側で処理が行われる部分
・DBアクセス(※2)、ファイルへのアクセス、合計金額の計算など
・プログラミング言語で記述する

簡単にいうとWebサイトの裏の部分

※2: DBアクセスは、データベースへの接続のこと。
データベースとは、特定のテーマに沿ったデータを集めて効率的に管理し、使いやすくしたもの。アクセスすることでデータベースに入力したり、データベースから出力することができる。

DBに関して参考にしたサイト
初心者向け】データベースとは何か? わかりやすく簡単に意味を図解

データベースに関して深掘りすると時間がかかりそうだったので割愛とする。

フロントエンド

インターネット

バックエンド
という関係にある。

HTML復習

HTMLの基本構文

<タグ名>コンテンツ</タグ名>
 開始タグ     終了タグ

開始タグから終了タグまでを要素と呼ぶ。

HTMLの基本構造

DOCTYPE宣言

<!DOCTYPE html>

使用するHTMLの種類を宣言している。

html要素

<html></html>

HTML要素の最上位要素

head要素

<head></head>

head要素の中には....

文書のタイトル

<title>タイトル名</title>

文字コード

<meta charset="utf-8">

※meta属性

head要素内に記述、文書に関する情報を指定する

※utf-8

世界的に最もポピュラーな文字コード

説明文

<meta name="description" content="説明文">

※name属性

要素の名前を指定

※description

Webサイトの要約を示すテキスト情報

※content属性

データの内容

キーワード

<meta name="keywords" content="検索されたいワード">

※keywords

検索エンジンに向けた内容を記述
(Googleに関してはメタキーワードは無視されるらしい)

関連ファイル(外部リソース)

<link rel="stylesheet" href="ファイル名">

※link属性

このページに関係する外部リソースを指定するもの。

※rel属性

リンク先となる外部リソースの位置づけを表す。

※stylesheet

外部のCSSファイルを読み込むためのもの。

....などの文書の基本構造が入る。

body要素

ブラウザ画面に表示する内容を記述する。

h1タグ

<h1>見出し</h1>
見出しを記述するためのタグ。
hは、headingの略。
h1からh6までの段階がある。
h1は最上位の見出しタグで、文書内に原則1つまで。

pタグ

<p>文字</p>
pは、paragraphの略。
段落を記述するためのタグ。

↓は自分に対してのメモ

※学習メモ1は、これからの学習メモを残すための練習も兼ねて。
Markdownの書き方等。

※インプットした内容は可能な限り自分の言葉にして書き残す。(書き写しにならないように意識する。)

※他の方のqiitaも参考にしながら、誰が見ても分かりやすい文章にすることを心がける。

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

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

100日チャレンジの354日目

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

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

マウスカーソルを合わせた時に文字を表示する機能をCSS (SCSS) で実装

この記事について

個人アプリでアイコンにマウスカーソルを合わせた時に文字が表示される機能を実装したので、本記事で紹介したいと思います。HTMLとCSSを勉強し始めた人にとっては参考になると思います。

完成イメージ

sample.gif

※本題から逸れるのでこの記事では書きませんが、gif画像をアップロードするのに苦労したので、別の記事でQiitaにアップロードできるgif画像の作り方について書こうと思います。

準備したフォルダ(ディレクトリ)及びファイル

"sample A"というフォルダを作成し、"sample.html"と"sample.css"というファイルを作成しました。
※下図はイメージです。
スクリーンショット 2020-06-25 9.19.55.png

コード

各ファイルには以下のようにコードを書いております。

sample.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <div class="mouse">マウスを乗せる
      <span class="word">文字出ます</span>
    </div>
  </body>
</html>

sample.css
.mouse {
  margin: 30px 0px 0px 30px;
  position   : relative;
}
.mouse:hover .word {
  display: inline;
}

/*色は適当です。*/
.word {
  position   : absolute;
  display: none;
  padding: 2px;
  color: aliceblue;
  border-radius: 5px;
  background-color:purple;
  width:100px;
  top: 50px;
  left: 0px;
  font-size: 12px;
  text-align: center;
}


ポイントは「:hover」の部分です。これを擬似クラスと言います。

 擬似クラス

擬似クラスとは、特定の条件を満たした時に適用させるセレクタのことです。今回の擬似クラス":hover"は「要素(mouseクラス)にマウスがホバーした時」に適用される物です。:hoverの後にwordクラス(.wordという部分)を書くことで、mouseクラスを付けられた"マウスを乗せる"という文字にマウスがホバーした時wordクラスが適用されるようになります(文字が表示されるようになること)。

sample.gif

擬似クラスについてはこちらのサイトでまとめられているので、興味のある方は是非ご覧ください。
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

 感想

プログラミングスクールでHTMLとCSSを学習してマスターしたつもりでしたが、今回の実装の件でHTMLとCSSの奥深さを実感しました。今後も積極的に実装していきたいと思います。

参考文献(サイト)

https://webparts.cman.jp/balloon/over/
(↑コピペすれば直ぐに実装できるようにコードが準備されていて便利なサイトです)
https://www.asobou.co.jp/blog/web/css2
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

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

マウスカーソルを合わせた時に文字を表示する機能をCSSで実装

この記事について

個人アプリでアイコンにマウスカーソルを合わせた時に文字が表示される機能を実装したので、本記事で紹介したいと思います。HTMLとCSSを勉強し始めた人にとっては参考になると思います。

完成イメージ

sample.gif

※本題から逸れるのでこの記事では書きませんが、gif画像をアップロードするのに苦労したので、別の記事でQiitaにアップロードできるgif画像の作り方について書こうと思います。

準備したフォルダ(ディレクトリ)及びファイル

"sample A"というフォルダを作成し、"sample.html"と"sample.css"というファイルを作成しました。
※下図はイメージです。
スクリーンショット 2020-06-25 9.19.55.png

コード

各ファイルには以下のようにコードを書いております。

sample.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <div class="mouse">マウスを乗せる
      <span class="word">文字出ます</span>
    </div>
  </body>
</html>

sample.css
.mouse {
  margin: 30px 0px 0px 30px;
  position   : relative;
}
.mouse:hover .word {
  display: inline;
}

/*色は適当です。*/
.word {
  position   : absolute;
  display: none;
  padding: 2px;
  color: aliceblue;
  border-radius: 5px;
  background-color:purple;
  width:100px;
  top: 50px;
  left: 0px;
  font-size: 12px;
  text-align: center;
}


ポイントは「:hover」の部分です。これを擬似クラスと言います。

 擬似クラス

擬似クラスとは、特定の条件を満たした時に適用させるセレクタのことです。今回の擬似クラス":hover"は「要素(mouseクラス)にマウスがホバーした時」に適用される物です。:hoverの後にwordクラス(.wordという部分)を書くことで、mouseクラスを付けられた"マウスを乗せる"という文字にマウスがホバーした時wordクラスが適用されるようになります(文字が表示されるようになること)。

sample.gif

擬似クラスについてはこちらのサイトでまとめられているので、興味のある方は是非ご覧ください。
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

 感想

プログラミングスクールでHTMLとCSSを学習してマスターしたつもりでしたが、今回の実装の件でHTMLとCSSの奥深さを実感しました。今後も積極的に実装していきたいと思います。

参考文献(サイト)

https://webparts.cman.jp/balloon/over/
(↑コピペすれば直ぐに実装できるようにコードが準備されていて便利なサイトです)
https://www.asobou.co.jp/blog/web/css2
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

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

自分を励ますアプリ

自分を励ますアプリ

ひたすらポジティブな言葉をかけてくれる励ましアプリ。
HTML5、CSS3、Javascriptにて製作。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>励ましてくれるアプリ</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
<meta name="robots" content="noindex,nofollow,noarchive">
</head>
<body>

<div id = "container">

  <header>
    <h1>励ましアプリ</h1>
  </header>

  <div id = "message"><strong>悩みや不安を書き出してみよう!</strong></div>

  <div id = "commentBox">
    <form action="" method="post">
      <input id="comment" type="text" value="">
    </form>
  </div>

  <div id ="button"><strong>悩みを聞いてもらおう</strong></div>

  <div id ="result"></div>

  <div id ="buttonClear"><strong>参考になったよありがとう</strong></div>

</div>

<script src="encouragement.js"></script>

</body>

</html>

Javascript

//メッセージを用意
let encouragement = [
    "十分睡眠を取ろう", "海を見に行こう", "陽の光を浴びよう",
    "明日は今よりいい日", "自分を信じろ", "努力は裏切らない",
    "諦めちゃダメだよ", "人事を尽くして天命を待て", "神は見捨てない"
    ,"君ならできる"
];

//表示領域保持
let resultBox =  document.getElementById("result");

//クリアボタンの表示領域を隠す
document.getElementById('buttonClear').style.display="none";

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//ボタンを押したらの動き
document.getElementById("button").onclick = function(){

    //入力値保持
    let commentBox = document.getElementById("comment").value;

    //もしもコメントボックスに何か入力されていたら
    if (commentBox != "") {

        //あらかじめ用意したメッセージから.lengthで配列の要素数取得、その要素数だけループ処理、この場合条件を満たしている限りずっとループ
        while (0 < encouragement.length) {
            //クリアボタン表示
            document.getElementById('buttonClear').style.display="block";
            //配列の要素数に乱数を発生させてそれを整数に直す。
            let eNumber = Math.floor(Math.random()*encouragement.length);
            //配列の中身の文字[ランダムに取得したインデックスナンバー]、つまりランダムでメッセージを取得しそれを表示領域に表示
            resultBox.innerHTML = encouragement[eNumber];
            //処理終わり
            break;
        }

    }
    //そうでない場合、つまりコメントが何も入力されていなかったら。
    else {

        //結果を空に
        resultBox.innerHTML = "";
        //クリアボタン削除
        document.getElementById('buttonClear').style.display="none";
        //警告文表示
        alert("本当に悩みはありませんか?");

    }

}

//ボタンを押したらの動き
document.getElementById("buttonClear").onclick = function(){

    //コメントを空に
    document.getElementById("comment").value = "";
    //結果を空に
    resultBox.innerHTML = "";
    //クリアボタン削除
    document.getElementById('buttonClear').style.display="none";

}

css

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height:100vh;
}

#container {
    margin:0 auto;
    width: 80vw;
    min-width: 300px;
    min-height: 50vh;
    border-radius: 5px;
    font-size: 1.2rem;
    text-align:center;
    overflow: auto;
    -webkit-box-shadow: 4px 4px 8px 6px rgba(0,0,0,0.17);
    -moz-box-shadow: 4px 4px 8px 6px rgba(0,0,0,0.17);
    box-shadow: 4px 4px 8px 6px rgba(0,0,0,0.17);
}

#container h1 {
    margin: 0;
    font-size: 1.3rem;
    padding:2vh 0vh;
    letter-spacing: 5px;
}

header {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: #27e0b7;
    width:100%;
    color:#333;
    background: repeating-linear-gradient(45deg, #2affd0, #2affd0 10px, #27e0b7 0, #27e0b7 20px);
    text-shadow: white 3px 0px, white -3px 0px, white 0px -3px, white -3px 0px, white 3px 3px, white -3px 3px, white 3px -3px, white -3px -3px, white 1px 3px, white -1px 3px, white 1px -3px, white -1px -3px, white 3px 1px, white -3px 1px, white 3px -1px, white -3px -1px, white 1px 1px, white -1px 1px, white 1px -1px, white -1px -1px;
}

#message {
    padding:5vh 0vh;
    color:#333;
    font-weight:500;
}

#comment {
    width: 80%;
    height: 5vh;
    font-size: 1.15rem;
}

#button {
    background: #27e0b7;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    width: 50vw;
    padding: 2vh;
    margin-top: 7vh;
    margin-bottom: 7vh;
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #FFF;
    border-bottom: solid 4px rgb(201, 201, 201);
    border-radius: 5px;
}

#button:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}

#result {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ffeb3b;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 5px;
    text-shadow: #806b20 3px 0px, #806b20 -3px 0px, #806b20 0px -3px, #806b20 -3px 0px, #806b20 3px 3px, #806b20 -3px 3px, #806b20 3px -3px, #806b20 -3px -3px, #806b20 1px 3px, #806b20 -1px 3px, #806b20 1px -3px, #806b20 -1px -3px, #806b20 3px 1px, #806b20 -3px 1px, #806b20 3px -1px, #806b20 -3px -1px, #806b20 1px 1px, #806b20 -1px 1px, #806b20 1px -1px, #806b20 -1px -1px;
}

#buttonClear {
    background: #27e0b7;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    width: 50vw;
    padding: 2vh;
    margin-top: 5vh;
    margin-bottom: 7vh;
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #FFF;
    border-bottom: solid 4px rgb(201, 201, 201);
    border-radius: 5px;
}

#buttonClear:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}

デモなどGithubはこちら。

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

webでNeumorphismのボタンを作る

tl;dr;

2020年初頭から注目されているデザイン、Neumorphismをご存知ですか?
広く普及しているマテリアルデザインと比較して紹介します。
マテリアルデザインは、を用いて要素を浮かび上がらせます。
一方、Neumorphism(ニューモーフィズム)では、を用いて要素の凹凸を表現します。

Neumorphism(ニューモーフィズム)の基本的なパーツはCSS3のbox-shadowを用いて簡単に実装できます。
この記事ではCSSとHTMLを用いて簡単なパーツの作成方法を紹介します。

output.gif
図1 : Neumorphismを用いたアプリケーション例 (neutodo.com)

膨らみの表現

Neumorphism(ニューモーフィズム)の膨らみの表現について解説します。
次の3ステップで基本的な要素が実現できます。
1. border-radiusを指定して要素の四隅に丸みをつける。
2. box-shadowを用いて、要素の左上(光を当てる場所)に背景色よりも明るい色をつける。
3. box-shadowを用いて、要素の右下(影を落とす場所)に背景色よりも暗い色をつける。

box-shadowで指定する値を調整することで、凹凸の高さやなだらかさを調節できます。
box-shadowの詳しい説明は以下のようなドキュメントに譲ります。

box-shadowについて: https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

以下に簡単なHTMLとCSSを示します。

index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>
neumorphism.css
body {
  background-color: #dddddd;
}

div {
  margin: 50px;
  padding: 10px;
  width: 50px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff;
}

スクリーンショット 2020-06-25 11.38.18.png
Chrome83での表示結果

凹みの表現

Neumorphism(ニューモーフィズム)の凹みの表現について解説します。
次の3ステップで基本的な要素が実現できます。
1. border-radiusを指定して要素の四隅に丸みをつける。
2. box-shadow insetを用いて、要素の右下内側(光を当てる場所)に背景色よりも明るい色をつける。
3. box-shadow insetを用いて、要素の左上内側(影を落とす場所)に背景色よりも暗い色をつける。

以下に簡単なHTMLとCSSを示します。

index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>
neumorphism.css
body {
  background-color: #dddddd;
}

div {
  margin: 50px;
  padding: 10px;
  width: 50px;
  border-radius: 5px;
  box-shadow: inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}

スクリーンショット 2020-06-25 11.46.13.png
Chrome83での表示結果

組み合わせて応用

上述の凹凸の表現それぞれを組み合わせることで、応用した表現も可能です。
以下に例を示します。

index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>
neumorphism.css
body {
  background-color: #dddddd;
}

div {
  margin: 50px;
  padding: 10px;
  width: 50px;
  border-radius: 15px;
  border: 5px solid #dddddd;
  box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff,
    inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}

スクリーンショット 2020-06-25 12.03.31.png
Chrome83での表示結果

まとめ

Neumorphismのスタイルを生成するツール等もありますが、今回はCSSで作成しました。
注目を浴びているNeumorphismについて、webではHTMLとCSSで簡単に実現できます。

できる限り多くの方の参考になればと思い、シンプルで簡単に記述しました。

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

webでNeumorphismことはじめ

tl;dr;

2020年初頭から注目されているデザイン、Neumorphismをご存知ですか?
広く普及しているマテリアルデザインと比較して紹介します。
マテリアルデザインは、を用いて要素を浮かび上がらせます。
一方、Neumorphism(ニューモーフィズム)では、を用いて要素の凹凸を表現します。

Neumorphism(ニューモーフィズム)の基本的なパーツはCSS3のbox-shadowを用いて簡単に実装できます。
この記事ではCSSとHTMLを用いて簡単なパーツの作成方法を紹介します。

output.gif
図1 : Neumorphismを用いたアプリケーション例 (neutodo.com)

膨らみの表現

Neumorphism(ニューモーフィズム)の膨らみの表現について解説します。
次の3ステップで基本的な要素が実現できます。
1. border-radiusを指定して要素の四隅に丸みをつける。
2. box-shadowを用いて、要素の左上(光を当てる場所)に背景色よりも明るい色をつける。
3. box-shadowを用いて、要素の右下(影を落とす場所)に背景色よりも暗い色をつける。

box-shadowで指定する値を調整することで、凹凸の高さやなだらかさを調節できます。
box-shadowの詳しい説明は以下のようなドキュメントに譲ります。

box-shadowについて: https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

以下に簡単なHTMLとCSSを示します。

index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>
neumorphism.css
body {
  background-color: #dddddd;
}

div {
  margin: 50px;
  padding: 10px;
  width: 50px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff;
}

スクリーンショット 2020-06-25 11.38.18.png
Chrome83での表示結果

凹みの表現

Neumorphism(ニューモーフィズム)の凹みの表現について解説します。
次の3ステップで基本的な要素が実現できます。
1. border-radiusを指定して要素の四隅に丸みをつける。
2. box-shadow insetを用いて、要素の右下内側(光を当てる場所)に背景色よりも明るい色をつける。
3. box-shadow insetを用いて、要素の左上内側(影を落とす場所)に背景色よりも暗い色をつける。

以下に簡単なHTMLとCSSを示します。

index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>
neumorphism.css
body {
  background-color: #dddddd;
}

div {
  margin: 50px;
  padding: 10px;
  width: 50px;
  border-radius: 5px;
  box-shadow: inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}

スクリーンショット 2020-06-25 11.46.13.png
Chrome83での表示結果

組み合わせて応用

上述の凹凸の表現それぞれを組み合わせることで、応用した表現も可能です。
以下に例を示します。

index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>
neumorphism.css
body {
  background-color: #dddddd;
}

div {
  margin: 50px;
  padding: 10px;
  width: 50px;
  border-radius: 15px;
  border: 5px solid #dddddd;
  box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff,
    inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}

スクリーンショット 2020-06-25 12.03.31.png
Chrome83での表示結果

まとめ

Neumorphismのスタイルを生成するツール等もありますが、今回はCSSで作成しました。
注目を浴びているNeumorphismについて、webではHTMLとCSSで簡単に実現できます。

できる限り多くの方の参考になればと思い、シンプルで簡単に記述しました。

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

【初心者でもわかる】position: absolute;を使ってチキンラーメンの卵をど真ん中(上下左右中央)に落とす方法

どうも、7noteです。今回はposition: absolute;で要素を上下左右中央に配置するお話。

「あー、お腹すいたなぁ。」
「チキンラーメンでも食べるか(深夜2時)。」
「じょぼぼぼぼ・・・(お湯を注ぐ)」

「・・・あっ、卵落とすの忘れてた!」
「この真ん中のポケットに卵を・・・・しまった!!」

失敗例

cr_miss.png

「あーーー・・・」

みんなはこうならないために、上下左右中央に卵を配置できるようposition: absolute;をマスターしよう!

材料はこちら(1人前)

ファイル CSSプロパティ 意味
index.html
style.css position: 〜〜〜〜;
transform:translate();
配置方法を指定
表示位置をズラす
egg.png たまごの画像
chickenramen.png ラーメンの画像

作り方

  1. index.htmlにラーメンの画像と卵の画像を用意。
  2. style.cssで、卵の画像をラーメンの画像の上に重ねる。
  3. style.cssで、上下左右中央に卵の画像を配置して出来上がり。

1.index.htmlにラーメンの画像と卵の画像を用意

index.html
<div class="donburi">
    <img src="chickenramen.png" alt="チキンラーメン">
    <img src="egg.png" alt="卵" class="egg">
</div>

2.style.cssで、卵の画像をラーメンの画像の上に重ねる。

style.css
    .donburi {
        width: 624px; /*ラーメンの画像の横幅と同じサイズを指定*/
        position: relative; /* .donburiの左上を基準点(0,0)と設定 */
    }
    .donburi .egg {
        position: absolute; /* 親要素の基準点(今回だと.donburi)を基準と認識させる */
        top: 0; /*基準点からの位置を上から0pxの位置に指定*/
        left: 0; /*基準点からの位置を左から0pxの位置に指定*/
    }

3. style.cssで、上下左右中央に卵の画像を配置して出来上がり。

style.css
    .donburi {
        width: 624px;
        position: relative;
    }
    .donburi .egg {
        position: absolute;

        /*--以下の値を変更--*/
        top: 50%; /*基準点からの位置を上から50%の位置に指定*/
        left: 50%; /*基準点からの位置を左から50%の位置に指定*/

        /*--以下のプロパティを追記--*/
        transform: translate(-50%,-50%);/*卵の画像の縦横の長さを100%とした時、-50%分、つまり画像の幅や高さの半分マイナス方向に表示位置をズラす*/
    }

\完成/

cr_good.png

解説・作り方のコツ

  • [transform: translate(-50%,-50%);]を書いている理由は、[top: 50%; left: 50%;]だけだとど真ん中にこないから。もしtransformがないと、ど真ん中にくるのは卵の画像の左上角が、ラーメン画像のど真ん中に来てしまう。だから卵の画像の真ん中がラーメンの画像の真ん中にくるようにするためかいています!
  • [position: absolute;]を指定しているとき、上下左右中央の指定は親要素の大きさからみて中央にくるので、 今回は[.donburi]にラーメンの画像と同じサイズの624pxをwidthに当てています。

まとめ

チキンラーメンは美味しい。

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってね!
chickenramen.png
egg.png

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

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

学習日記5日目(2020/6/24)

学習内容

  • HTML&CSS学習(Progate)→終了

その他

  • タイピング練習

明日の予定

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