What's New Qiita

20210426のCSSに関する記事は5件です。

  • 投稿日：2021-04-26T22:31:54+09:00

【Javascript】Javascript/Cssでモーダルを作ってみた

初めに ボタンを押したら周りの背景が薄暗くなり、画面の真ん中に出てくるウィンドウが気になり、javascriptとcssを使って実装してみました。また、自分なりに学習し学んだ内容を記事にしてみました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 モーダルとは 英語でmodal。「様式の」「形態の」の意味で、ボタンを押したらブラウザ上に現れるウィンドウのこと。閉じるボタンを押すまで他の操作ができなくなる画面のこと。 実装における主な概念 ❶HTMLのタグとCSSのz-indexを利用し3つの層を作る ❷overlayという名前のタグを作り、ベースとなる画面を被せる薄暗いレイヤーを用意する ❸ボタンを押した時に画面の一番手前に出てくるmodalという名前のタグを作る。 ❹hiddenというクラス名をmodalタグやoverlayタグにあらかじめ付けておく ❺cssでhiddenの属性を「display: none」にセットする ❻Javascriptでボタンを押した際に「hidden」タグを付けたり外したりする処理をする ３つのレイヤの構成 イメージとしてはベースがあってその上にoverlay、modalが重なる感じ。overlayとmodalはボタンを押したときに現れ、閉じるボタンを押すと隠れる。 HTML側の実装 modalとoverlayというクラス名を持つ２つのタグを用意します。また、２つのタグにはhiddenというクラス名を別途付けておきます。 <!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>モーダルウィンドウ</title> </head> <body> <div class="overlay hidden"></div> <!-- overlay --> <button class="show-modal">モーダルボタン</button> <!-- モーダルを表示されるボタン --> <div class="modal hidden"> <!-- モーダル--> <button class="close-modal">&times;</button> <!-- モーダルを閉じるボタン --> <p> モダールウィンドウです。 </p> </div> <script src="script.js"></script> </body> </html> CSSの実装 * { /* ブラウザ全体の余白を消す */ margin: 0; padding: 0; } body { font-family: sans-serif; height: 100vh; position: relative; /* body要素にflexboxを指定する */ display: flex; align-items: flex-start; justify-content: center; background: linear-gradient(to top left, #f76060, #ebd407); /* body要素の背景をグラデーションにする */ } .show-modal { font-size: 20px; /* modalを開くボタン */ font-weight: 600; padding: 10px 30px; border: none; margin-top: 100px; background-color: #fff; color: #444; border-radius: 20px; cursor: pointer; } .close-modal { position: absolute; /* modalを閉じるボタン */ top: 4px; right: 22px; font-size: 40px; color: #333; cursor: pointer; border: none; background: none; } p { font-size: 20px; } .hidden { display: none; /* hiddenクラスが付与されている場合は表示させないようにする */ } .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; color: rgb(255, 0, 0); background-color: white; padding: 6rem; border-radius: 5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); /* modalに影を作る */ z-index: 10; /* z-indexでmodalを一番上に位置させる */ } .overlay { position: absolute; /* overlayの絶対位置を左上を起点にし幅と高さを100%にする */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); /* 一番下のbody領域をぼやかす */ z-index: 5; /* z-indexの数字を0と10の間の数字にし、bodyとmodalの真ん中に位置させる */ } bodyとmodal、overlayのz-indexをそれぞれ0,5,10にします。こうすることによってbody要素が一番下、その上にmodalウィンドウがあり、一番上がoverlayという層になります。また、hiddenクラスのdisplayをnoneにしておき、このクラスが付与された時に要素が見えないようにします。 Javascriptの実装 "use strict"; const modal = document.querySelector(".modal"); //modalを指定 const overlay = document.querySelector(".overlay"); //overlayを指定 const btnOpenModal = document.querySelector(".show-modal"); //modalを開くボタンを指定 const btnCloseModal = document.querySelector(".close-modal"); //modalを閉じるボタンを指定 //modalとoverlayのhiddenクラスを消す（modalとoverlayが見えるようにする）処理 const openModal = () => { modal.classList.remove("hidden"); overlay.classList.remove("hidden"); }; //modalとoverlayのhiddenクラスを追加する（modalとoverlayが見えないようにする）処理 const closeModal = () => { modal.classList.add("hidden"); overlay.classList.add("hidden"); }; //modalの開くボタンと閉じるボタンをクリックした時の処理 btnOpenModal.addEventListener("click", openModal); btnCloseModal.addEventListener("click", closeModal); modal,overlay,モーダルの開くボタン、閉じるボタンをquerySelectorで指定し、それぞれの要素にhiddenクラスを付けたり、外したりしています。また、addEventListenerでclickした場合にボタンの処理を行うようにしています。 結果物 ①モーダルを開く前 ②開いた場合 参考サイト https://goworkship.com/magazine/modal-windows-mobileui/ https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-26T18:55:48+09:00

Flexboxを自由に操ってジョージア国旗を作ってみました。

Flexboxを使って国旗を作る ジョージア国旗 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！　何をどんな風に、どうやって作るのか？ 　最初にある程度決めておくと後が楽になります。 　例　ジョージア国旗を調べる 　　　<div>は何個必要なのか？ 　　　class属性名はどうしようか？ 　　　 ここまで出来たらcodeを書いていきます♪ ※head部分は省略 <div class="georgia"> <div class="gia"> <div class="georgia1"></div> <div class="georgia2"></div> <div class="georgia1"></div> </div> <div class="gia"> <div class="georgia1"></div> <div class="georgia2"></div> <div class="georgia1"></div> </div> <div class="gia"> <div class="georgia1"></div> <div class="georgia2"></div> <div class="georgia1"></div> </div> <div class="gia"> <div class="georgia1"></div> <div class="georgia2"></div> <div class="georgia1"></div> </div> </div> .georgia { width: 500px; height: 300px; background-color: red; border: 1px solid black; margin: 200px auto; } .gia { width: 220px; height: 125px; background-color: pink; } この状態で一旦ブラウザで確認　↓ .georgia { width: 500px; height: 300px; background-color: red; border: 1px solid black; margin: 200px auto; display: flex; ※追加 flex-wrap: wrap;　※追加 justify-content: space-between;　※追加 align-content: space-between; ※　追加 } display: flex;を使って、４個の<div>を上下左右に納めました。 .georgia1 { width: 40px; height: 20px; background-color: orange; } .georgia2 { width: 20px; height: 80px; background-color: aquamarine; } ピンク部分に 赤い十字を作っていきます　↓ .georgia1 { ※追加 width: 40px; height: 20px; background-color: orange; } .georgia2 {　※追加 width: 20px; height: 80px; background-color: aquamarine; } ピンクのボックスに３個の<div>の箱を作ります。 解りやすいように色を付けています 上記の３個にdisplay: flex;を付けます .gia { width: 220px; height: 125px; background-color: pink; display: flex;　※追加 justify-content: center;　※追加 align-items: center;　※追加 } 最後に、色を整えてあげたら完成です。 まとめ 大きい『赤十字』を作成するのに、最初は赤い十字を作りましたが 「小さい赤十字」を上手に作成できなかったので、 赤をベースに白い箱を作り、そこにFlexboxをつけました。 今回は以上です！ ありがとうございました
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-26T18:34:43+09:00

cssでファミコン風表現

google fontsに日本語書体のバリエーションが8種類も増えており、その中にドット風のテキストも含まれてました。 今までドット文字を使う場合はフォントをダウンロードし、読み込んで使うことがほとんどだったのですがgoogle fontsに追加されたおかげで気軽にドット文字を使うことができるようになり、いくつかcodepenで使用してみました。 メニュー See the Pen dot menu by cahid (@cahid0814) on CodePen. テキスト See the Pen dot text by cahid (@cahid0814) on CodePen. 触ってみた感想 importするだけなので気楽に使える ちょこっと装飾するだけで雰囲気が出る Fontsworksさんの記事を見ると他にも色々なフォントが追加されてるので覚えておくと提案できそう
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-26T17:06:33+09:00

Webで使われるデータ形式（HTML,CSS,画像,動画,音声）

マークアップ言語 HTML(HyperText Markup Language) HTMLは、Webに特化したマークアップ言語（文字データになんらかの情報や構造を持たせるもの）である。 HTML文書は、タグによって囲まれた文章によって構成される。タグは「開始タグ」と「終了タグ」からなる。開始タグ、文章、終了タグの塊を要素と呼ぶ。 HTMLの先頭におくDOCTYPE宣言は、バージョン形式を伝える。 開発当初は文書とリンクを表すだけのものであったが、バージョンアップにより機能が追加されていった。現在は2017年に勧告されたHTML5.2が最新版である。 XML(Extensible Markup Language) XMLはHTMLと同じマークアップ言語であるが、HTMLに比べ、さまざまな用途に汎用的に利用できる。 XMLもHTMLも元はSGML（Standard Generalized Markup Language）を改良した言語である。HTMLはWeb文書（ハイパーテキスト）の記述に特化したのに対し、XMLは個別の目的に応じてタグを独自に定義することで汎用的に利用できる。 XHTML(Extensible HyperText Markup Language) XHTMLは、HTMLをXMLの文法で再定義したものである。HTMLより書式が厳密になり、タグの省略や大文字の混在が許されなくなるなどの違いがある。 XHTMLはXMLの一種であるため、別のXMLで定義された文書をXHTML文書内に埋め込むことができる。埋め込み利用されるものとして、MathML(XMLで記述された数式)やSVG(XMLで記述された画像)などがある。 CSS(Cascading Style Sheets) CSSはHTMLやXMLの体裁を表現する記述で、スタイルシートとも呼ばれる。 CSSが登場する以前は、HTML内で体裁を整えていたが、文書の構造の記述と体裁の記述が入り混じってしまっていた。CSS登場後は文書構造と体裁の棲み分けが可能になった。 よって、共通のCSSを適用させたり、クライアントの種類ごとに表示を切り替えるといったこともできるようになった。 画像データ Webで扱われる画像データは、ネットワーク転送量を減らすため、基本的にデータサイズが小さくなる。 JPEG(Joint Photographic Experts Group) Jpeg(ジェイペグ)形式は１６６７万色を扱えるため、写真の画像形式としてよく使われる。人間が気づかないデータを削ることで圧縮しているので、画質が劣化しやすい。 GIF(Graphics Interchange Format) GIF(ジフ)形式は２５６食しか扱えないが、データの圧縮方法がJpegと異なるため画像の劣化が発生しない。 特定の色を透過色にしたり、複数のGIF画像を使ってアニメーションにしたりできる。 PNG(Portable Network Graphics) PNG(ピング)形式はGIFの特許問題（GIFの圧縮技術の特許を持っていたUNISYS社の利用料請求）により開発されたもので、１６７７万色以上を扱える。 透明色が扱え画質の劣化が起きず、同じ内容でもGIFよりデータサイズが小さくなる。 音声・動画配信 インターネットでの転送時間短縮のため、音声・動画ファイルも画像ファイル同様にデータを圧縮する。 データ圧縮にはコーデックというソフトが用いられ、圧縮をエンコード、再生のために伸長することをデコードという。 音声ファイルではMP3やACC、動画ファイルではMPEG-4やWMVがある。 コーデック 拡張子 説明・用途 AAC .aac .m4aなど iPod 着うた WMA .wma PC向け音源 MPEG-4 .m4v mp4など スマホ向け動画 WMV .wmv PC向け動画 MPEG-2 .mpg m2p DVD 地デジ ダウンロード配信 音声・動画の配信方法は大きく分けて２種類ある。１つは「Webサーバーからダウンロードしてもらい、それを再生する」というダウンロード配信である。 ユーザーがファイル全体をダウンロードしてから再生する方法と、ファイルをダウンロードしながら再生する方法（プログレッシブダウンロード配信）がある（YouTubeやニコニコ動画など）。 しかし、配信したファイルはユーザーに残るため著作権のあるデータ配信には向いていない。 ２つめは、この問題を解決するストリーミング配信である（AbemaTVやニコニコ生放送など）。この方法では、ファイルを細かく分割し、細切れにしたデータを配信する。再生したデータは都度削除されるので著作権問題は解決するが、細切れにして転送するためのストリーミングサーバーを用意する必要がある。 参考 イラスト図解式 この一冊で全部わかるWeb技術の基本
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-26T09:11:43+09:00

Rails 勉強日記 1日目（4/23）

内容 Railsの学習の予定を立てた。 メモ Rails（Ruby on Rails）を段階的に学んでいくための予定を以下でまとめる。 目標 簡単なWebアプリケーションを作れるレベルになる 自分のブログを構築する 現状 HTMLやCSSを読むことはできるが、実際に書いたことはほとんどない Rubyも雰囲気はわかるが、実際に書いたことはほとんどない JavaScriptは全くわからない Railsはチュートリアルの初めの方だけやったことがある 段階 HTML、CSS、Ruby、JavaScript、Railsに慣れる Progateを数回やる 段階的にそれぞれの技術のレベルを上げる Rails Girlsを進める Railsチュートリアルを進める 目標となる物を作る （目標の通り）
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧