- 投稿日：2021-05-16T18:30:19+09:00
【初心者でもわかる】2枚の画像を重ねる3つの方法
どうも7noteです。画像をテキストや文字に重ねたいときに使える3つの方法を解説 ①背景画像にする 背景画像を指定してしまえば、画像の上に文字や別の画像を設置できます。 ただし、背景画像を前面に持ってくることはできません。 index.html <div class="box"><img src="sample01.jpg" alt=""></div> style.css .box { background: url(sample02.jpg); /* 背景画像に緑の画像を指定 */ width: 800px; /* 画像にあわせて適当な幅を指定 */ padding: 20px; /* 適当な余白を指定 */ } ②position指定で重ねる position指定を使うことで自由にコンテンツの位置や前後の重なり順を指定することができます。 ただしその分コンテンツの高さが無くなるので乱用しすぎるとレイアウト崩れの原因にもなります。 index.html <div class="box"> <img src="sample01.jpg" alt="" class="img_01"> <img src="sample02.jpg" alt="" class="img_02"> </div> style.css .box { width: 500px; /* 適当な幅を指定 */ height: 300px; /* 適当な高さを指定 */ position: relative; /* 基準位置とする */ } /* 共通するCSS */ .box img { width: 300px; /* 適当な幅を指定 */ position: absolute; /* 相対位置に指定 */ } .box .img_01 { /* 左上に固定 */ top: 0; left: 0; } .box .img_02 { /* 右下に固定 */ bottom: 0; right: 0; } ③ネガティブマージンで重ねる この方法では無理やりマイナスの値のmarginを指定することで、ほかの要素の上に画像やテキストを重ねる事ができます。 ガッツリ重ねるというよりは、一部が被る程度の時に使えます。 index.html <div class="img_01"><img src="sample01.jpg" alt=""></div> <div class="img_02"><img src="sample02.jpg" alt=""></div> style.css img { width: 300px; /* 適当な幅を指定。※解説用なのでなくてもOK */ } .img_02 { margin-top: -100px; /* 上方向にネガティブマージンを取る */ opacity: .5; /* ※解説用にかぶっているところをわかりやすくしているだけ */ } まとめ いかがでしょうか？ 画像の重ね方とかで調べると、どの記事もposition指定の方法しか書かれていなかったりしますが、個人的には初心者にposition指定だけ教えてしまうと何でもかんでもposition指定してレイアウト崩れを起こしたり、配置の修正が難しくなってしまう場合が多いなと感じています。 しっかりとその場面に合わた方法がある事を伝えたいと思い記事にしました。 状況に合わせて使ってください。お役にたてれば嬉しいです。 【フロントエンド強化月間に参加中↓↓】 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日：2021-05-16T01:10:31+09:00
【Sass】要素を横に並べるとき余白も考慮したwidthの調整のしかた
要素を横に並べるときのwidthの調整のしかた 方程式：100% / 要素の数 - 余白の幅 * 余白の数 / 要素の数 例↓ style.scss width: calc(33.3% - 24px * 2 / 3);
- 投稿日：2021-05-16T00:06:40+09:00
【駆け出しエンジニア支援】HTML&CSS + jQueryだけで簡単にコンポーネントを実装してみる【初心者向け】
概要 最近はVueやReactといった便利なライブラリを使い、フロントのHTMLやJSファイルを部品として分割するコンポーネント化の技術の発展がめざましいですね。しかしそれらの技術は便利な反面、環境への依存度が高かったり、学習コストが高いのも課題の一つです。 この記事では技術の発展にあえて逆行し、HTML&CSSおよびjQueryだけで簡単にビューの部品をコンポーネント化する方法を提案します。LP製作やコーポレートサイト制作程度のフロントエンド業務であれば、この記事で解説する簡単な実装でも十分実務で活用できる場合もあるかと思うので、こんな簡単な方法もあるのだなと、記憶の片隅にでも入れてもらえればと思います。 この記事の想定読者 Web系エンジニア初心者 HTML&CSS, jQueryは理解している Vue.jsやReact.jsが分からない/ 学習中だが躓いている それでもDRY(Don't Repeat Yourself)したい この記事の想定読了時間 20分程度 完成図 実装コード index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Kiita</title> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Goldman&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> </head> <body> <myHeader></myHeader> <myBody></myBody> <!-- コンポーネント --> <script src="components/js/myHeader.js"></script> <script src="components/js/myBody.js"></script> <script src="components/js/sidebarContent.js"></script> <script src="components/js/topContentArticle.js"></script> <style> * { margin: 0; } a { text-decoration: none; color: inherit; } body { background-color: #F0F0F0; } </style> </body> </html> ほか8ファイル(js, css) 解説 まず大前提として、HTMLでは<div></div>といったタグを用いることができますが、これらのタグは自作(自前で定義)することもできます。さらに、そのタグをjQueryから取得することが可能です。 例えば以下に示すindex.htmlのbodyタグ内には<myHeader></myHeader>というタグがあります。このタグはjQuery上から$('myHeader')として取得することが可能です。 index.html <body> <myHeader></myHeader> ←これ <myBody></myBody> <!-- コンポーネント --> <script src="components/js/myHeader.js"></script> <script src="components/js/myBody.js"></script> <script src="components/js/sidebarContent.js"></script> <script src="components/js/topContentArticle.js"></script> <style> * { margin: 0; } a { text-decoration: none; color: inherit; } body { background-color: #F0F0F0; } </style> </body> jQuery上から要素にアクセスできるということは、 $('myHeader').html('hoge') と書くとHTMLを <myHeader>hoge</myHeader> という状態にできるワケです。つまりhogeの部分がヘッダーの中身になっていればいいワケですから、 <script src="components/js/myHeader.js"></script> っていうスクリプトタグを書いてから、その中身に components/js/myHeader.js $('myHeader').html(` <header> <div id="header"> <p id="header-logo">Kiita</p> </div> </header> <link rel="stylesheet" href="components/css/myHeader.css"> `) って書けばヘッダーがコンポーネント化できるワケです。ここにCSSをあてたければ、単にlinkタグを追加すればいいだけなので、 components/js/myHeader.js $('myHeader').html(` <header> <div id="header"> <p id="header-logo">Kiita</p> </div> </header> <link rel="stylesheet" href="components/css/myHeader.css"> `) ってすればCSSが適用できます。あとは<script src="components/js/myHeader.js"></script>を各ページに追加すればヘッダーが共通部品になる、即ちコンポーネント化されるので、DRYが達成できています。やったZE！ しかし、コンポーネント化の真髄はここからです。例えば画面左側のサイドバーの『ホーム』『タイムライン』などが書いてある部分に注目してください。 この部分もコンポーネントが使用されています。<sidebarContent></sidebarContent>です。 myBody.js <div id="top-sidebar-article"> <p class="sidebar-title">記事フィード</p> <sidebarContent href="" icon="fa fa-home" title="ホーム"></sidebarContent> <sidebarContent href="" icon="far fa-clock" title="タイムライン"></sidebarContent> <sidebarContent href="" icon="fa fa-chart-line" title="トレンド"></sidebarContent> </div> 一般的なHTMLタグのようにhrefなどの属性を与えることも可能です。このように与えられた属性は$('sidebarContent').attr('href')などとして取得できます。 よって、コンポーネントにパラメータを与えて動的に表示内容を変更したい場合は、以下のような処理になります。 sidebarContent.js $('sidebarContent').html(` <a href="${$('sidebarContent').attr('href')}" class="sidebar-content"> <i class="${$('sidebarContent').attr('icon')}"></i> <span>${$('sidebarContent').attr('title')}</span> </a> `) これでパラメータを与えることができますが、まだ一つ問題があります。このコードのままこの処理を走らせると、sidebarContentタグが複数ある場合に全てのコンポーネントが最初に与えたパラメータの値に置き換わってしまいます。 なぜこうなるかというと、$('sidebarContent')が何回目に呼び出されたパラメータを参照すればいいか記述できていないためです。こうした場合は$('sidebarContent')の処理にfilter関数を適用してあげることで解決できます。 sidebarContent.js $('sidebarContent').filter((i, dom) => { $(dom).html(` <a href="${$(dom).attr('href')}" class="sidebar-content"> <i class="${$(dom).attr('icon')}"></i> <span>${$(dom).attr('title')}</span> </a> `) }) これでパラメータを無事個別に受け取ることが可能になります！これでコンポーネント化がバッチリ完了です。しかしまだ細かい修正を行うべき部分が存在するので、あと2箇所ほど修正を加えます。 まず$('タグ名')のように指定している部分ですが、この'タグ名'の部分はファイル名を取得してあげれば毎回書き直す必要がなくなるので、以下のようにファイル名を取得して適用する処理を加えます。CSSファイルも同じ名前なので、こちらもファイル名をタグ名にリンクさせます。 sidebarContent.js tagName = document.currentScript.src.split('/').pop(0).split('.')[0] $(tagName).parent().append(`<link rel="stylesheet" href="components/css/${tagName}.css">`) $(tagName).filter((i, dom) => { $(dom).html(` <a href="${$(dom).attr('href')}" class="sidebar-content"> <i class="${$(dom).attr('icon')}"></i> <span>${$(dom).attr('title')}</span> </a> `) }) また、<sidebarContent></sidebarContent>のような自分で命名したタグはコンポーネントの呼び出し後には削除しても良いので、これを削除する処理を追加します。削除の処理は以下のような記述で可能です。 $(dom).children().unwrap() よってこれらの修正が全て完了すると、以下のようなJavaScriptテンプレートを使用してコンポーネントの追加が可能になります。 リスナテンプレート tagName = document.currentScript.src.split('/').pop(0).split('.')[0] $(tagName).parent().append(`<link rel="stylesheet" href="components/css/${tagName}.css">`) $(tagName).filter((i, dom) => { $(dom).html(`任意のHTML`).children().unwrap() }) このスクリプトが自作HTMLタグの追加リスナとして作用します。 以上でコンポーネント化の解説が完了です！まとめると、以下の手順によってHTML&CSS + jQueryのみでビューのコンポーネント化が可能になります。 1. 自作タグを任意のHTMLファイルに記述する。 index.html <myComponent param="hoge"></myComponent> 2. JSファイルとCSSファイルをタグ名で用意する。 root | -- index.html | -- components | ` -- js | ` -- myComponent.js ` -- -- css ` -- myComponent.css 3. myComponent.jsにリスナテンプレートをペーストして任意のHTMLの部分を編集する。 myComponent.js tagName = document.currentScript.src.split('/').pop(0).split('.')[0] $(tagName).parent().append(`<link rel="stylesheet" href="components/css/${tagName}.css">`) $(tagName).filter((i, dom) => { $(dom).html(` 任意のHTML `).children().unwrap() }) パラメータを自作タグに与えた場合、$(dom).attr('パラメータ名')で取得しましょう。 <myComponent param="hoge" href="fuga"></myComponent> ↕︎ 対応 $(dom).html(` <div>${$(dom).attr('param')}</div> <a href="${$(dom).attr('href')}">リンク</a> `) ↓のようにレンダリング(出力)される <div>hoge</div> <a href="fuga">リンク</a> 4. HTMLファイルからmyComponent.jsを読み込む。 index.html <myComponent param="hoge"></myComponent> <script src="components/js/myComponent.js"></script> 完了！ これでHTML&CSS + jQueryのみでコンポーネント化が達成できました。お疲れさまでした。 まとめ jQueryでも割と簡単にコンポーネント化してDRYできる！ ReactやVueを一から学ぶのは結構大変なので、簡単なLPやコーポレートサイトのコンポーネント化であればこのような方法もアリなのかなと思います。もちろんVueやReactを習得できるのであれば、それに越したことはありませんが、この記事で紹介したような方法もあるということは覚えてみても損はないかもしれません。 『コンポーネント化』と単語だけ聞くとどうも難しく感じるかもしれませんが、ReactやVueで用いられるコンポーネントの概念もこの記事で説明していることと基本的な考え方は一緒です。一旦理解できてしまえばコードが素早く綺麗にかける素晴らしい技術なので、是非習得して快適なコーディングライフを過ごしましょう！ 筆者プロフィール 26歳現役フルスタックエンジニア。Ruby/PHP/JSVue/AWS/nginxなどが主です。プログラミングの教材執筆やメンターしてます。VTuberとしてプログラミング解説雑談配信等もします。 Twitter : https://twitter.com/soeno_onseo Github : https://github.com/Fumiya-Soeno HP : http://www.onseo.info/