- 投稿日：2021-05-14T22:33:31+09:00
【初心者でもわかる】写真を額縁に入れてWEBサイトに飾る方法
どうも7noteです。CSSを使って写真を額縁に入れて飾る方法 きれいな写真をWEBで目立たせたいときにピッタリの方法。 シンプルですが、それらしさがでるかなと思います。 CSSのみで作成する方法を紹介していきます。 CSSで写真を額縁に入れて飾る方法 index.html <div class="frame"><img src="sample.jpg" alt="写真"></div> style.css .frame{ border-top: 20px solid #B37D4D; /* 上のborderを指定 */ border-right: 20px solid #B37D4D; /* 右のborderを指定 */ border-bottom: 20px solid #D2AE7E; /* 下のborderを指定 */ border-left: 20px solid #D2AE7E; /* 左のborderを指定 */ box-shadow: inset 0 0 10px #000; /* 内側に影を指定 */ display: inline-block; /* 写真に合わせるためインラインブロック要素にする */ } .frame img { position: relative; /* z-indexを指定 */ z-index: -1; /* 影を写真の上に重ねるためマイナス値を指定 */ } 解説 borderの特性として、上下左右で色が違う場合重なる部分が斜めに配色されます。 これを利用することで、額縁特有の接続部分を再現することができます。 あとは光の入り方を再現するために左&下と、右&上で色を分けます。 影を指定するのですが、影は普通に入れてしまうと写真の後ろに入ってしまうので、z-indexを利用して写真を後ろに配置し、.frameに対して内向きの影を入れます。これで立体感が少しでます。 まとめ cssだけで簡単に額縁を装飾する方法を解説しました。 こだわった額縁にしたい場合はcssでは難しいので画像を背景画像として指定するなどの必要があります。 CSSで作るメリットとしては、写真の大きさに合わせて額縁も自動で大きさが変わるので作成や変更が簡単なところですね。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日：2021-05-14T16:20:32+09:00
JSを使わず、animationプロパティを使ってマウスホバー時のスライドを作りました
JSを使わず animationプロパティを使ってマウスホバーした時画像がスライドするを作ってみました。 animation と @keyfram を使って画像をスライダーしてみた。これのcodeをQiitaに掲載 #webエンジニア#animation #HTML pic.twitter.com/6yOEGZtEZW— トモゑ☛Web作成の37? (@swan2pink) May 14, 2021 codepenでコードを書いてみました See the Pen VwpazmV by トモゑ☛Web作成の37? (@swan2pink) on CodePen. .main1 { position: relative; width: 300px; height: 300px; overflow: hidden; ※ } .second { position: absolute; top: 0; left: 0; } @keyfram でスライドした際の画像格納場所をどうすれば良いかを悩みました。 結果、overflow: hiddenを親要素につけたら上手に納まりました。 参考資料 overflow:hiddenやscrollが効かない原因と対応方法 まとめ こんなcodeもシンプルで良いですよとかありましたらご連絡ください とっても喜びます！ 今回は以上です ありがとうございます！！
- 投稿日：2021-05-14T15:07:25+09:00
HTML5覚書 〜コンテンツ・カテゴリーにコンテンツ・モデルを添えて〜
普段バックエンドをやっていてフロントエンドが苦手な人間の備忘録（忘備録）です。 コンテンツ・カテゴリー MDN Web Docs - コンテンツカテゴリー HTML5ではブロック要素とインライン要素による分類が廃止されましたが1、その代わりとなるのがコンテンツ・カテゴリーやコンテンツ・モデルによる分類です。HTML5の要素（タグ）の "ほとんど" は、以下7つのカテゴリーに分類されます。 メタデータ・コンテンツ フロー・コンテンツ セクショニング・コンテンツ（区分コンテンツ） ヘディング・コンテンツ（見出しコンテンツ） フレージング・コンテンツ（記述コンテンツ） エンベッディッド・コンテンツ（埋め込みコンテンツ） インタラクティブ・コンテンツ（対話型コンテンツ） ひとつの要素が複数のカテゴリーを跨いで分類されることもあるため、各カテゴリーの関係性を図にすると以下のようになります。 <html>、<li> などは、どのカテゴリーにも属さない要素であり、逆に<a>、<span>などは、複数カテゴリーに属する要素となります。 MDN Web Docs - ＜html＞: HTML 文書 / ルート要素 MDN Web Docs - ＜li＞ MDN Web Docs - ＜a＞: アンカー要素 例として＜span＞タグのリファレンスを見てみます。 span要素のコンテンツ・カテゴリーは、フローコンテンツ と 記述コンテンツ（フレージングコンテンツ） のふたつに属すると書かれています。 また、許可されている内容（子要素）には 記述コンテンツ が、許可されている親要素には 記述コンテンツを受け入れるすべての要素、またはフローコンテンツを受け入れるすべての要素 との記載があります。 次に、各コンテンツ・カテゴリーの概要を見てみましょう。 1. メタデータ・コンテンツ タイトルやメタデータ、表示方法や本文外の情報などを表すコンテンツ。 主に<head>要素内で使用することが多い。 このカテゴリーに属する要素 <base>, <link>, <meta>, <noscript>, <script>, <style>, <title> 2. フロー・コンテンツ テキスト関連や埋め込みコンテンツなど、主に<body>内で使用されることの多いコンテンツ。 このカテゴリーに属する要素 <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> および文字列。 下記の要素は、特定の条件が満たされている場合にのみ、このカテゴリーに属する。 <area> : 要素の子孫の場合 <link> : itemprop 属性がある場合 <meta> : itemprop 属性がある場合 <style> : scoped 属性がある場合 3. セクショニング・コンテンツ（区分コンテンツ） 文章区分や節など、セクション（区切り）を表すコンテンツ。 このカテゴリーに属する要素 <article>, <aside>, <nav>, <section> 4. ヘディング・コンテンツ（見出しコンテンツ） 見出しを表すコンテンツ。 このカテゴリーに属する要素 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 5. フレージング・コンテンツ（記述コンテンツ） 文章中で使用するコンテンツ。HTML4やXHTMLの「インライン要素」に近い概念で、これら記述コンテンツが集まることによって段落が構成される。 このカテゴリーに属する要素 <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> および通常の文字列（空白文字だけで構成されたものを除く）。 下記の要素は、特定の条件が満たされたときのみ、このカテゴリーに属する。 <a> : 記述コンテンツだけを含む場合 <area> : 要素の子孫である場合 <del> : 記述コンテンツだけを含む場合 <ins> : 記述コンテンツだけを含む場合 <link> : itemprop 属性がある場合 <map> : 記述コンテンツだけを含む場合 <meta> : itemprop 属性がある場合 6. エンベッディッド・コンテンツ（埋め込みコンテンツ） 文書に他のリソースを取り込んだり、他のマークアップ言語や名前空間を挿入したりするコンテンツ。主な用途としては、画像、動画、音声などの文書内への埋め込み。 このカテゴリーに属する要素 <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video> 7. インタラクティブ・コンテンツ（対話型コンテンツ） ユーザとやり取りをするためのコンテンツ。リンクやフォームなど、ユーザーが操作することのできるものが基本となる。 このカテゴリーに属する要素 <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, <textarea> 下記の要素は、特定の条件下にある場合のみ、このカテゴリーに所属。 <audio> : controls 属性がある場合 <img> : usemap 属性がある場合 <input> : type 属性が hidden 状態ではない場合 <menu> : type 属性が toolbar 状態ではない場合 <object> : usemap 属性がある場合 <video> : controls 属性がある場合 コンテンツ・モデル HTML5では「コンテンツ・モデル」という概念もあります。 HTML Living Standard の中の 3.2.5 Content models に記載がありますが、コンテンツ・モデルとは要素の予想されるコンテンツの説明 (a description of the element's expected contents) とされていて、要するに「子要素として入れられる内容にはどんなものが許可されるか」を説明するのがコンテンツ・モデルだと考えれば良いかと思います。 例えば＜p＞タグのリファレンスを見てみると、「許可されている内容」に「記述コンテンツ」とありますが、これが<p>タグのコンテンツ・モデルということになります。 <p>タグの中に<span>タグを入れるような良くある実装も、かつてのHTML4などではブロック要素(p)の中にインライン要素(span)を入れるという説明をしていましたが、HTML5においては、「子要素として許可されているのは記述コンテンツであるため<p>タグの中に<span>タグ（記述コンテンツ）を入れられる」と説明できるということです。 <p> <span>pタグの中には「記述コンテンツ」を入れられる。</span> </p> 透過的コンテンツ・モデル HTML5には透過的コンテンツ・モデル ( transparent content model ) という概念もあります。 該当するのは以下の要素です。 a 要素 ins 要素 del 要素 object 要素 video 要素 audio 要素 map 要素 noscript 要素 slot 要素 canvas 要素 自律的カスタム要素 これらの要素のようにコンテンツ・モデルが「透過」であるとされる場合、各要素の「許可されている内容」（子要素）はあくまで親要素に準じるというカタチになります。 踏み込んだ説明をすると「透過的な要素が削除されたりその子要素で置き換えられたりしても、それ自身のコンテンツが必ず妥当な HTML5 として構造化されているもの」が透過なコンテンツモデルを持つそうですが、いったんは、子要素として許可されるコンテンツは親要素の性質を受け継いで決められるという点が理解できれば良いかと思います。 今度は HTML Living Standard で＜a＞タグに関するリファレンス (4.5.1 The a element) を見てみます。 Content model: Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified. とあると思いますが、Transparentと書かれている箇所が「透過」という意味になりますので、<a>タグはコンテンツ・モデルが透過＝子要素として許可されるコンテンツは親要素次第だということになります。（対話型コンテンツは除く、とも書いてあります。） 例えば下記のようなマークアップは、HTML4などのブロック要素/インライン要素の感覚で言えば間違ったマークアップのように見えるかもしれませんが、HTML5で<a>タグのコンテンツモデルは透過となるため、<a>タグは親要素の<div>のコンテンツ・モデルを引き継いで、<p>タグ等のフローコンテンツを子要素として持てるようになります。 <div> <a> <p>a要素は透過的コンテンツ・モデル</p> </a> </div> その他のコンテンツ・カテゴリーやコンテンツ・モデル その他にも、二次的なカテゴリーがあるとか、セクショニング・ルート（区分化ルート）、パルパブル・コンテンツ、スクリプト対応要素、知覚可能コンテンツ、フォーム関連コンテンツ...など触れられていない話題もありますが、もっと自身の理解が深まったらまた書くかもしれません。 参考URL HTML - Living Standard ＜初心者向け＞知っておきたいHTML5の基本【マークアップ編 その1】 ＜初心者向け＞知っておきたいHTML5の基本【マークアップ編 その2】 HTML5 に於ける"透過的な内容"。 トランスペアレントについて 透過的コンテンツモデルの仕様について知りたいです 『ブロック要素とインライン要素による分類が廃止』とは書きましたが、それぞれの要素が持つ表示特性としては、引き続き「ブロック要素」「インライン要素」という分類が可能です。MDN Web Docs - ブロックレベル要素 / MDN Web Docs - インライン要素 ↩
- 投稿日：2021-05-14T07:56:53+09:00
【Css】background-clipを試してみた
初めに Cssだけで背景が透けてみえるお洒落な文字が出来る方法を探したら、background-clipというcssのプロパティがあったのでそれについて学習した内容を記事にします。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 background-clipとは cssのプロパティ。背景画像の表示領域を指定する際に使います。 早速使ってみる まずはテスト用の背景画像を用意しました。 指定できる値が４種類あったのでhtmlで原本の画像が入るものを含め合計5つの箱を用意します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <title>background-clip</title> </head> <body> <div class="none"></div> <div class="border-box"></div> <div class="padding-box"></div> <div class="content-box"></div> <div class="text"> <h1>TestTestTest</h1> </div> </body> </html> ①border-box ボーダボックスまでbackgound画像の表示領域を広げます。 /* ①border-box */ .border-box { width: 150px; height: 150px; margin: 100px 10px; padding: 10px; border: 10px dashed #0000ff; background-size: cover; background-image: url("test.jpg"); background-clip: border-box; } ②padding-box パディングボックスまでbackgound画像の表示領域を広げます。 /* ②padding-box */ .padding-box { width: 150px; height: 150px; margin: 100px 10px; padding: 10px; border: 10px dashed #0000ff; background-size: cover; background-image: url("test.jpg"); background-clip: padding-box; } ③content-box コンテントボックスまでbackgound画像の表示領域を広げます。 /* ③content-box */ .content-box { width: 150px; height: 150px; margin: 100px 10px; padding: 10px; border: 10px dashed #0000ff; background-size: cover; background-image: url("test.jpg"); background-clip: content-box; } ④text 文字列の領域までbackgound画像の表示領域を広げます。 /* ④text-box */ .text { width: 150px; height: 150px; margin: 100px 10px; border: solid 30px; background-size: cover; background-image: url("test.jpg"); background-clip: text; -webkit-background-clip: text; color: transparent; } 文字列の場合、親要素にstyleを適用します。また、文字の色はtransparentにして透明にし、まだ全てのブラウザーで使えるわけではないので、-webkit-background-clip: text;と書く必要があります。 結果 background-clipを適用しない場合、デフォルトはborder-boxになるみたいです。（一番左側の画像） 文字列もが透けて背景が見えるのでお洒落です。（一番右側の画像） 参考サイト https://developer.mozilla.org/ja/docs/Web/CSS/background-clip https://qiita.com/NoxGit/items/20b39e0051ce94720421
- 投稿日：2021-05-14T00:00:14+09:00
CSSでスマホのアドレスバーの高さに合うように実装する方法。100vhで困った人へ
スマホの画面上のURLが書いてある部分のせいで、heightを100vhにしても意図したデザインにならない問題を解決する方法の備忘録 解決方法は、javascriptのwindow.innerHeightを使用すること var windowHeight=window.innerHeight; document.getElementById('section').style.height=windowHeight+'px'; として、100vhでsectionの高さを設定するのではなく、window.innerHeightを使用することで、 アドレスバーの下から画面最下部の大きさで１画面となる。 こちらの記事がとてもわかりやすいです。 https://877.design/smartphone-height/