- 投稿日：2021-12-05T23:16:39+09:00
S3のフォルダ内の写真をフォトシャワーっぽくjsで表示してみる
動機 ・フォトシャワーはなんかいい感じに写真がスクリーンの上から降ってくるみたいな演出です。 ・結婚式の披露宴のときに、披露宴でとった写真がリアルタイムでフォトシャワーで表示されたらおもしろそうだなあと思って結婚式の披露宴のために作りました。 S3は関係なくとりあえずローカルでも動くコードをかく ・この下のコードをコピペしてimage_list内の写真をそれぞれの環境の写真に変更すれば、とりあえずこんな感じで写真が上から下に降りてくるみたいな感じのことができてイメージができるはず。 ・image_list内の写真を全部表示したら、S3からAPIであらたに写真をとってきて、image_listを作り直すという感じです。（S3からの写真の取得は別記事にします） ・披露宴中にどんどん写真がS3の方にたまっていくので、ちょこちょこ写真を取りに行くスタイルにしました。 photo_shower.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wedding_photo_shower</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> .photo-shower-container { position: relative; height: 100vh; /* コンテナの高さ */ width: 100%; /* コンテナの横幅 */ overflow: hidden; /* コンテナからはみ出した要素を隠す */ background-image: linear-gradient(to right, #FFECD2 0%, #FCB69F 100%); } /* 写真のスタイル */ .picture { position: absolute; animation: animate-picture 10s linear; } .pic { max-width: 600px; max-height: 600px; } /* 写真のアニメーション */ @keyframes animate-picture { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; top: 100vh; } } .content { position: relative; } </style> </head> <body> <main class='content'> <div class='photo-shower-container'></div> </main> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> window.addEventListener('DOMContentLoaded', () => { // はじめに表示される写真たち。ここのファイル指定をそれぞれの環境に合わせるととりあえずうごく let image_list = [ 'image_cat/cat1.jpeg', 'image_cat/cat2.jpeg', 'image_cat/cat3.jpeg', 'image_cat/cat4.jpeg', 'image_cat/cat5.jpeg', 'image_cat/cat6.jpeg', 'image_cat/cat7.jpeg', 'image_cat/cat8.jpeg', 'image_cat/cat9.jpeg', 'image_cat/cat10.jpeg' ]; const section = document.querySelector('.photo-shower-container'); let field = 'right'; // 左右交互に写真を表示させるため let count = 0; // 写真を生成する関数 function createPic() { const pictureEl = document.createElement('span'); pictureEl.className = 'picture'; let image = document.createElement('img'); image.className = 'pic'; image.src = image_list[count]; image.style.borderRadius = '20px'; // 写真の傾き具合を-30〜30degでランダムに let min = 0 ; let max = 60 ; let rotate_num = Math.floor( Math.random() * (max + 1 - min) ) + min - 30; image.style.transform = 'rotate(' + rotate_num + 'deg)'; // 写真の長辺の長さを指定 const minSize = 400; const maxSize = 600; let size = Math.random() * (maxSize + 1 - minSize) + minSize; // ここで写真のむきを取得。 getPictureDirection(image.src) // dataにはwidthかheight。長い方がstringで入っている。 .then((data) => { if(data === 'width') { image.style.width = size + 'px'; image.style.height = 'auto'; } else { image.style.height = size + 'px'; image.style.weight = 'auto'; } pictureEl.appendChild(image); // 左右の順番に写真が表示されるように if (field === 'right') { pictureEl.style.left = Math.random() * 300 + 'px'; field = 'left'; } else { pictureEl.style.left = Math.random() * 475 + 475 + 'px'; field = 'right' } section.appendChild(pictureEl); }) .catch((err) => { console.log("error", err); }); // 一定時間が経てば写真を消す setTimeout(() => { pictureEl.remove(); }, 10000); count += 1; // image_listを全て表示したら、APIで次に表示させる写真を取得しimage_listを作成。 if ( count >= image_list.length ) { // APIに関しては別記事参照。 changePicture(modify_time).done(function(data,textStatus,jqXHR) { console.log("成功:" + jqXHR.status); image_list = []; // 取得したファイル名を表示するimage_listに入れる $.each(data,(index,value) => { image_list.push(value.filename); modify_time = value.last_modified; }); }).fail(function(jqXHR, textStatus, errorThrown) { console.log("ajax失敗:" + jqXHR.status); console.log(textStatus, errorThrown); }); count = 0; } } // 写真を生成する間隔をミリ秒で指定 setInterval(function () { createPic() }, 2500); }); // APIでimage_listの中身を取得。別記事参照。 function changePicture(modify_time){ return $.ajax({ url:'*****', type:'POST', data:{body:modify_time}, dataType:'json', // 応答のデータの種類 (xml/html/script/json/jsonp/text) contentType: "application/json;charset=UTF-", accessControlAllowOrigin: '*', headers:{ 'x-api-key': '*****' } }) } // 写真を読み込んでから向きの判定 const loadImg = function(src){ return new Promise(function(resolve, reject){ const image = new Image(); image.src = src; image.onload = function(){ resolve(image); } image.onerror = function(error){ reject(error); } }); } // 写真の向きを取得 let getPictureDirection = function getDirection(src) { return new Promise(function(resolve, reject){ loadImg(src) //読み込みが完了した（画像が設定された）Imageオブジェクトを受け取って処理 .then(function(res){ if (res.width > res.height) { resolve('width'); } else { resolve('height'); } }) //読み込みエラー時の処理 .catch(function(error){ console.log(error); }); }); } </script> 補足 ・結婚式では自分のmacと会場のスクリーンをつなぐ感じだったので、自分のmacでいい感じに表示されればよいかなというcssです。 ・写真の大きさは最初はmax-heightとmax-widthを指定するだけだったのですが、いまいちだったので、ちゃんと写真の向きを取得してから、maxの値を決めました。写真をロードするのをまたないといけなかったので、ここでコードが結構増えてしまった。。 ・実際に会場でリハーサルをしたときに写真が見にくかったので、本番は背景を黒にしました。実際表示してみないと分からない部分だなあと思いました。 ・ひとまず結婚式は良い感じだったのでよし！
- 投稿日：2021-12-05T23:16:39+09:00
JSでフォトシャワーを自作してみた
動機 ・結婚式でみんながとった写真すぐに共有できたらなあ ・いい感じにフォトシャワーみたいなもの作ってみよかなあ とりあえずコードを貼ってみる ・これをコピペしてimage_list内の写真を変更すればとりあえずこんな感じで写真が上から下に降りてくるみたいな感じのことができるはず、、（写真なのでわかりにくいですが） photo_shower.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wedding_photo_shower</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> .photo-shower-container { position: relative; height: 100vh; /* コンテナの高さ */ width: 100%; /* コンテナの横幅 */ overflow: hidden; /* コンテナからはみ出した要素を隠す */ background-image: linear-gradient(to right, #FFECD2 0%, #FCB69F 100%); } /* 写真のスタイル */ .picture { position: absolute; animation: animate-picture 10s linear; } .pic { max-width: 600px; max-height: 600px; } /* 写真のアニメーション */ @keyframes animate-picture { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; top: 100vh; } } .content { position: relative; } </style> </head> <body> <main class='content'> <div class='photo-shower-container'></div> </main> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> window.addEventListener('DOMContentLoaded', () => { let image_list = [ 'image_cat/cat1.jpeg', 'image_cat/cat2.jpeg', 'image_cat/cat3.jpeg', 'image_cat/cat4.jpeg', 'image_cat/cat5.jpeg', 'image_cat/cat6.jpeg', 'image_cat/cat7.jpeg', 'image_cat/cat8.jpeg', 'image_cat/cat9.jpeg', 'image_cat/cat10.jpeg' ]; // コンテナを指定 const section = document.querySelector('.photo-shower-container'); let field = 'right'; // 左右交互に写真を表示させるため let count = 0; // 写真を生成する関数 function createPic() { const pictureEl = document.createElement('span'); pictureEl.className = 'picture'; let image = document.createElement('img'); image.className = 'pic'; image.src = image_list[count]; image.style.borderRadius = '20px'; // 写真の傾き具合を-30〜30degでランダムに let min = 0 ; let max = 60 ; let rotate_num = Math.floor( Math.random() * (max + 1 - min) ) + min - 30; image.style.transform = 'rotate(' + rotate_num + 'deg)'; // 写真の長辺の長さを指定 const minSize = 400; const maxSize = 600; let size = Math.random() * (maxSize + 1 - minSize) + minSize; // ここで写真のむきを取得。 getPictureDirection(image.src) // dataにはwidthかheight。長い方がstringで入っている。 .then((data) => { if(data === 'width') { image.style.width = size + 'px'; image.style.height = 'auto'; } else { image.style.height = size + 'px'; image.style.weight = 'auto'; } pictureEl.appendChild(image); // 左右の順番に写真が表示されるように if (field === 'right') { pictureEl.style.left = Math.random() * 300 + 'px'; field = 'left'; } else { pictureEl.style.left = Math.random() * 475 + 475 + 'px'; field = 'right' } section.appendChild(pictureEl); }) .catch((err) => { console.log("error", err); }); // 一定時間が経てば写真を消す setTimeout(() => { pictureEl.remove(); }, 10000); count += 1; } // 写真を生成する間隔をミリ秒で指定 setInterval(function () { createPic() }, 2500); }); // 写真を読み込んでから向きの判定 const loadImg = function(src){ return new Promise(function(resolve, reject){ const image = new Image(); image.src = src; image.onload = function(){ resolve(image); } image.onerror = function(error){ reject(error); } }); } // 写真の向きを取得 let getPictureDirection = function getDirection(src) { return new Promise(function(resolve, reject){ loadImg(src) //読み込みが完了した（画像が設定された）Imageオブジェクトを受け取って処理 .then(function(res){ if (res.width > res.height) { resolve('width'); } else { resolve('height'); } }) //読み込みエラー時の処理 .catch(function(error){ console.log(error); }); }); } </script> 補足 ・結婚式では自分のmacと会場のスクリーンをつなぐ感じだったので、自分のmacでいい感じに表示されればよいかなというcssです。 ・写真の大きさは最初はmax-heightとmax-widthを指定するだけだったのですが、いまいちだったので、ちゃんと写真の向きを取得してから、maxの値を決めました。写真をロードするのをまたないといけなかったので、ここでコードが結構増えてしまった。。 ・実際に会場でリハーサルをしたときに写真が見にくかったので、本番は背景を黒にしました。実際表示してみないと分からない部分だなあと思いました。 ・ひとまず結婚式は良い感じだったのでよし！
- 投稿日：2021-12-05T22:02:48+09:00
【HTML/JavaScript】buttonタグでリンクをする方法
buttonタグとは？ <button type="button">ボタン</button> ※buttonタグはデフォルトでsubmitになるので、buttonをformタグで囲っておりsubmitしない場合には、「type="button"」をつけましょう。 方法１ buttonタグでリンクをする方法 <button type="button" onclick="loction.href='URL'">ボタン</button> 具体例 <button type="button" onclick="location.href='https://qiita.com/solidstate'">Qiitaマイページ</button> buttonタグでリンクをする方法（別タブで開く） <button type="button" onclick="window.open('URL', '_blank')">ボタン</button> 具体例 <button type="button" onclick="window.open('https://qiita.com/solidstate', '_blank')">Qiitaマイページ</button> 方法２ <a class="button" href="https://qiita.com/solidstate">Qiitaマイページ</a> .button { display: inline-block; color: #333; padding: 5px; border: 1px solid #ccc; background-color: #f2F2f2; text-decoration: none; }
- 投稿日：2021-12-05T20:30:36+09:00
初心者のためのpug入門
はじめに テンプレートエンジンのpugに触れる機会があったので、初心者の方でもわかりやすいようにまとめようと思います。 pug（パグ）とは pug(パグ)とは、HTMLを簡単に、かつ効率的に書くためのテンプレートエンジンです。 閉じタグの概念がなく、素のHTMLに比べて記述が少なくなるのが特徴です。 また、内部で定数を定義してループできたりもします。 ① 導入 pugを導入するには、 pug-cliをグローバルにインストール gulpなどのタスクランナーでコンパイル などの方法がありますが、今回は一番手軽なpug-cliを使用します。 pug-cliをglobalにインストールします。 $ npm install pug-cli -g or $ yarn global add pug-cli pugコマンドが使用できるようになっていればOKです。 $ pug --version // 実行結果 pug version: 2.0.4 pug-cli version: 1.0.0-alpha6 任意のディレクトリにpugファイルを作成し、記述していきます。 $ touch index.pug HTMLファイルに出力する際は $ pug index.pug を実行すると、同じディレクトリにHTMLファイルが出力されます。 ただし、そのままだと1行に圧縮されてHTMLファイルが出力されてしまいますので、—pretty オプションをつけるのがおすすめです。 $ pug index.pug —pretty pug-cliにはその他たくさんのoptionコマンドがありますので、公式を参考にしてみてください。 ② 基本文法 pugには閉じタグの概念がないので、タグに入れるテキスト等は半角スペースの後に記述します。 h1 見出し p ここに文章が入ります div ここはdivタグです button ボタンタグです HTMLに出力すると以下のようになります。 <h1>見出し</h1> <p>ここに文章が入ります</p> <div> ここはdivタグです <button>ボタンタグです</button> </div> idとclassを付けたい場合 idとclassを付けたい場合はタグの直後に記述します。 CSSやJavaScriptと同じように、idは#、classは. で表記します。 h1#title 見出し p.text ここに文章が入ります <h1 id="title">見出し</h1> <p class="text">ここに文章が入ります</p> 属性を指定したい場合 属性を指定したい場合も、直後に()で記述します。 a(href="#" target="_blank") リンク img(src="/pass/image.png" alt="画像1") <a href="#" target="_blank">リンク</a> <img src="/pass/image.png" alt="画像1"> 改行したい場合 pタグの中に長い文章を記述する際など、改行をしたい場合は | を使用します。 インデントをひとつ下げて | で繋ぐと改行されます。 p | テキスト <p> テキスト </p> コメントアウトしたい場合 コメントアウトの方法には、 HTMLファイルに出力されるコメント HTMLファイルに出力されないコメント の2種類の記述方法があります。 // HTMLファイルに出力されるコメント //- HTMLファイルに出力されないコメント ブロックコメントも可能です。 // ブロックコメントです。 HTMLファイルに出力されます。 //- ブロックコメントです。 HTMLファイルに出力されません。 ③ 応用文法(ループ文) pugファイル内でforやeach等のループ文を記述することが可能です。 for：特定の回数ループさせる for文の書き方はJavaScriptとほぼ同じです。 ul - for (let i = 0; i < 3; i++) li リスト #{i} <ul> <li>リスト 0</li> <li>リスト 1</li> <li>リスト 2</li> </ul> each：配列をループさせる pugファイル内で配列を定義し、ループで出力させます。 配列を定義する際は - の直後から記述します。 ul - const list = ['リスト1', 'リスト2', 'リスト3'] each item in list li #{item} <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> 連想配列を出力することも可能です。 連想配列を定義する際は -の後改行が必要になるので注意です。 dl - const list = [ { name: 'item1', text: 'あいうえお' }, { name: 'item2', text: 'かきくけこ' }, { name: 'item3', text: 'さしすせそ' } ] each item in list dt #{[item.name](http://item.name/)} dd #{item.text} <dl> <dt>item1</dt> <dd>あいうえお</dd> <dt>item2</dt> <dd>かきくけこ</dd> <dt>item3</dt> <dd>さしすせそ</dd> </dl> ④応用文法(mixin, include) include：別ファイルを呼びこむ includeを使用して別のpugファイルを呼び込むことも可能です。 ヘッダーやフッターなど、共通で使うものを別ファイルで切り出して使用することができます。 分割したファイルはファイル名の先頭にアンダースコア(_)をつけてコンパイルされないようにします。 // _header.pug header ヘッダーコンテンツ // index.pug include _header.pug main | メインコンテンツ <header>ヘッダーコンテンツ</header> <main>メインコンテンツ</main> mixin：関数を定義する 関数を定義して、pugファイル内で実行することも可能です。 mixin で関数を定義し、 +で実行します。 if文も記述することができます。 mixin listItems(items, active) ul each item in items if(item === active) li.isActive= item else li= item +listItems(['リスト1','リスト2', 'リスト3'], 'リスト3') <ul> <li>リスト1</li> <li>リスト2</li> <li class="isActive">リスト3</li> </ul> おわりに 以上がpugの基本的文法です。 色々便利そうですね。
- 投稿日：2021-12-05T19:06:53+09:00
Webの勉強はじめてみた その9 ～JavaScriptとCSS編 簡単なアニメーション～
N予備校の「プログラミング入門 Webアプリ」をアーカイブ動画とともに受講しています。 今回は第一章13節「はじめてのCSS」と14節「CSSを使ったプログラミング」を受講しました。 メモ 1. marginは要素の外側、paddingは要素の内側 2. CSSではclass属性を使うことが多い 3. 条件文はできるだけシンプルに 練習問題: JavaScriptとCSSでアニメーション <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> CSS を使ったプログラミング </title> <link rel="stylesheet" href="css-programming.css"> </head> <body> <h1 id="header" class="face">CSS を使ったプログラミング</h1> <script src="animation.js"></script> </body> </html> .face{ /*color: darkblue; */ color: red; } .back{ /*color: lightgray;*/ color: red; /*opacity: 0.4;*/ } //header 取得 let header = document.getElementById('header'); //角度 let degree = 0; //透明度 let opacity = 0; //加算フラグ let isPositive = true; //headerを回転させる function rotateHeader(){ //6°ずつ回転させる degree += 6; //裏を向いた瞬間にclassを変更する //361° と 1° は同じなので、360で割った余りが現在の角度になる。 degree %= 360; //表を向いているとき：0 以上 90 未満 か 270 以上 360 未満 /*if((0 <= degree && degree < 90) || (270 <= degree && degree < 360)){ //表 header.className = 'face'; }else{ //裏を向いているとき：90 以上 270 未満 header.className = 'back'; }*/ //↓↓ 条件をシンプルに if(90 <= degree && degree < 270){ header.className = 'back'; }else{ header.className = 'face'; } //回転 header.style.transform = 'rotateX(' + degree +'deg)'; //header.style.transform = 'rotate3d(1, 1, 1, ' + degree +'deg)'; //透明度の設定 if(isPositive){ opacity += 0.1; if(opacity >= 1){ //加算フラグを消す isPositive = false; } }else{ opacity -= 0.1; if(opacity <= 0){ //加算フラグを立てる isPositive = true; } } header.style.opacity = opacity; } //20ミリ秒ごとに実行してアニメーションさせる //setInterval(rotateHeader, 20); setInterval(rotateHeader, 100); 今回はh1タグ内の文字列を回転させる、というもの。 あと追加で透明度も変えてます。 degree %= 360 のあたり、自力では全然思いつかないので、ただすごいなぁと感心するばかりでした。 まとめ アニメーションって手段は色々あるけれど、どれも個人的にすごく感動を覚えます。 あとはもっと頭を柔らかくしていきたい。 そういえば次はCSS編です、と言いながらメインはがっつりJavaScriptでした。
- 投稿日：2021-12-05T18:37:40+09:00
【JavaScript】複数のaタグリンクを無効化する方法
こんにちは。ikuraです。 最近、寒くなってきたので１日に１１時間も布団にもぐってしまうようになってしまいました。（夏は８時間程度） 寒いのが好きではないので早く４月にならないかと思っております 余談はさておき、仕事でJavaScriptを触る機会がありましてオンライン画面のリンクを無効化する処理を書きました。 ネットで「JavaScript aタグリンク無効化」と調べると色々実装方法が出てきたのですが、動的にリンクを無効化する処理がネット上にあまりなかったため記事を書こうと思い立ちました。 pointerEventsの概要 私はaタグリンクを無効化するのに、「pointerEvents」を使いました。 poiterEventsの詳しい内容は、以下のリンクをご参照ください。 Pointer events - Web API | MDN pointer-eventsの本当の意味 - Qiita 「pointer-events」は、基本的にcssのプロパティとして使用されているためJavaScriptではあまり使われないようです。。 pointerEventsの実装方法 1.「getElementsByTagName('a')」でタグ名"a"を取得する。 2.取得したaタグの件数文for分を回す。 3.「.style.pointerEvents = 'none';」でaタグ要素を無効化する。 という流れになります。 aタグ要素を有効化する場合は、「auto」を使用します。 index.html <html lang="en"> <head> <script src="a_index.js"></script> </head> <body> <a href="https://qiita.com/">Qiitaへ１</a> <a href="https://qiita.com/">Qiitaへ２</a> <a href="https://qiita.com/">Qiitaへ３</a> <a href="https://qiita.com/">Qiitaへ４</a> <a href="https://qiita.com/">Qiitaへ５</a> <input type="button" value="ここ押すとリンクが無効化される" onclick="invalidLink()"> </body> </html> a_index.js function invalidLink() { let elements = document.getElementsByTagName('a'); for (let i = 0; i < elements.length; i++) { elements[i].style.pointerEvents = 'none'; } }
- 投稿日：2021-12-05T11:33:20+09:00
「教科書では教えてくれないHTML&CSS」読書録
HTMLやCSSを学んで理解は出来たが、どう書けば良いかが分からなかったので参考になりました。 忘れないように気になった部分の要約を残しておきます。 デザインを分割し、小さなパーツに分解する デザイン画像を元に大まかに次の2点で分割する。 横幅が変わるところ 背景の塗りつぶし方法が変わるところ その際、分割したパーツごとのHTML構造は二重構造にする。 <div class="分割したパーツ名"> <div class="〇〇-container"> </div> </div> 二重構造となったパーツに対して適用するスタイル <div class="〇〇-container">に適用するスタイル パーツの幅 パーツをビューポートの中央に配置するスタイル 上下左右の空きスペースを調整するスタイル <div class="分割したパーツ名">に適用するスタイル 背景色や背景画像 分割されたパーツを内容やレイアウトに合わせて更に分割する 更に単純なパーツごとに分けて、HTMLとCSSを書いていく。 そうすることで大きな問題を小さくて手のつけやすい目標に変えてしまう。 また、これにより各部分がモジュール化され使い回しがしやすくなる。 更新しやすいCSSの書き方 優先度を低く保つ 子孫セレクタなどで複数のセレクタを一度に使う際には、 数が多いほど優先度が高くなってしまう為、 子孫セレクタを使うときは使うセレクタの数を最小限に抑え、優先度を低く保つ。 例 <div class="block"> <ul class="list"> <li class="item">...</li> </ul> </div> 上記の<li class="item">にスタイルを適用したい場合のセレクタは次のリストのようになるが、 リストの上に行くほど良い書き方になる。 .item { } ◯ .list .item { } △ .block .list .item { } ☓ スタイルの位置を意識する あとから読み込まれたスタイルのほうが優先度が高くなるので、 より多くの要素に適用されるスタイルを上の方に、特定の要素だけに適用されるスタイルを下の方に書く。 セレクタの優先順位 1.HTMLタグのstyle属性 2.idセレクタ 3.classセレクタなど（2と4を除く多くのセレクタ） 4.タイプセレクタと疑似要素 5.全称セレクタ (*) レスポンシブデザインのための心得 ブロックボックスにむやみに幅を指定しない。 端末の画面サイズはまちまちなので、ブロックボックスの親要素の幅いっぱいに広がる特性を利用する。 画面サイズに合わせてレイアウトを切り替える必要があるときだけ、メディアクエリを使う。 フレックスボックスとグリッドレイアウトの使い分け ボックスを横一列に並べるときはフレックスボックス、複数行に並べたいときはグリッドレイアウト。 ボックスのサイズをガッチリ決めたいならグリッドレイアウト、サイズ自体は柔軟に対応したいならフレックスボックス。 フレックスボックスでは1つひとつのボックスのサイズは原則としてコンテンツの長さで決まる為、 ボックスのサイズが変わっても良いときに有利。 レスポンシブデザインに対応した画像のスタイル img { max-width: 100%; /* 親要素の幅に収まるようにする */ vertical-align: bottom; /* 画像の下に空くスペースを消す */ height: auto; /* 古いブラウザで縦横比を維持する */ } flexプロパティで使う設定は大体3パターンのみ flex: 伸長比 縮小比 ベース幅; flex: 0 0 子要素の幅px; 親要素の幅に関わらず、子要素の幅はベース幅で固定。 flex: 1 1 auto; 親要素に合わせてボックスが伸縮する。 flex: 0 1 auto; デフォルト値 親要素が狭いときは子要素も縮小、親要素が広くてもベース幅を維持して伸長しない。 ベース幅とは 親要素の幅に余裕がある時、子要素の幅は自身のコンテンツが収まる長さになる、この長さをベース幅という。
- 投稿日：2021-12-05T06:02:11+09:00
【CSS3】CSSカウンター(counter関数)
概要 「セクション1..2..3..」などの連番を実装したい場合に有効的である、カウンターをCSSで実現する方法を記載する。 この記事で理解できること CSSでのカウンター作成方法 CSSのcounter関数の使用方法 counter関数の関連プロパティ、関連要素 必要なCSSプロパティ プロパティ名 内容 書式 counter-reset カウンター(値を管理する変数)の初期値を設定する※このプロパティを指定したタグやclassが出てくるたびに値が初期化される counter-reset: {値を管理したい変数名} {初期値}; counter-increment 値の増加値を設定 counter-increment: {変数名} {増加数} content 表示形式を指定(counter関数はこのプロパティで使用) {付加値(前)} content: counter({変数名}) {付加値(後)} contentプロパティについて 「ポイント1:」や「第1章:」などと表示したい場合、{付加値(前・後)}と記載している箇所に値を指定することでカウントする値の前後(「ポイント」や「:」にあたる箇所)の表示を設定できる。 作成の流れ ① カウンター変数に初期値を設定(初期化) ② 値の増加数を指定 ③ 表示形式を指定 ★ カウンターはある要素の擬似要素(:beforeなど)を用いて使用することが多い。 ★ ①は実際にカウンター値を使用するタグ(要素)を囲っているタグ(要素)に指定する必要があります。 実際に例を見た方が理解できると思いますので、次へいきましょう。 実際に作成してみる ※bodyタグ・タグ内の要素以外は省略しています。 作成例① <body> <ul class="menu-list"> <li class="menu-item">メニューアイテム</li> <li class="menu-item">メニューアイテム</li> <li class="menu-item">メニューアイテム</li> </ul> </body> style.css /* liタグデフォルトの「・」を非表示にしておきたいので設定 */ li { list-style: none; } /* 今回ulタグに指定したclass */ .menu-list { counter-reset: number 0; /* ① カウンター変数に初期値を設定 : 今回は「number」という変数名で値を管理し、初期値を0に設定 */ } /* 今回liタグに指定したclassの擬似要素へ指定 */ .menu-item::before { counter-increment: number 1; /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */ content: counter(number) ' '; /* ③ 表示形式を指定 : counter関数の引数には①ので作成した変数を指定し、カウンター値の後ろにスペースを指定 */ } 作成例② <body> <ul class="menu-list"> <li class="menu-item">旅立ち</li> <li class="menu-item">出会い</li> <li class="menu-item">別れ</li> </ul> </body> /* liタグデフォルトの「・」を非表示にしておきたいので設定 */ li { list-style: none; } /* 今回ulタグに指定したclass */ .menu-list { counter-reset: number 0; /* ① カウンター変数に初期値を設定 : 今回は例として「number」という値を管理する変数名で初期値を0に設定 */ } /* 今回liタグに指定したclassの擬似要素へ指定 */ .menu-item::before { counter-increment: number 1; /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */ content: '第' counter(number) '章： '; /* ③ 表示形式を指定 : 今回はカウンター値の前後に付加値を設定 */ } counter関数のスタイル(style) counter関数にCSS側で用意されているスタイル(style)を指定することで、以下のようなスタイル設定を行うことができる。(作成例②の例を漢数字にしたい場合など) 参考資料 ： CSS Counter Styles Level 3 <!-- 作成例②と同じ --> <body> <ul class="menu-list"> <li class="menu-item">旅立ち</li> <li class="menu-item">出会い</li> <li class="menu-item">別れ</li> </ul> </body> /* liタグデフォルトの「・」を非表示にしておきたいので設定 */ li { list-style: none; } /* 今回ulタグに指定したclass */ .menu-list { counter-reset: number 0; /* ① カウンター変数に初期値を設定 : 今回は例として「number」という値を管理する変数名で初期値を0に設定 */ } /* 今回liタグに指定したclassの擬似要素へ指定 */ .menu-item::before { counter-increment: number 1; /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */ content: '第' counter(number, cjk-ideographic) '章： '; /* ③ 表示形式を指定 : counter関数の漢数字スタイルを指定 */ }
- 投稿日：2021-12-05T05:54:05+09:00
【CSS3】CSSカウンター(counter関数)
概要 「セクション1..2..3..」などの連番を実装したい場合に有効的である、カウンターをCSSで実現する方法を記載する。 この記事で理解できること CSSでのカウンター作成方法 CSSのcounter関数の使用方法 counter関数の関連プロパティ、関連要素 必要なCSSプロパティ プロパティ名 内容 書式 例 counter-reset カウンター(値を管理する変数)の初期値を設定する counter-reset: {値を管理したい変数名} {初期値}; counter-reset: number 0; counter-increment 値の増加値を設定 counter-increment: {変数名} {増加数} counter-increment: number 1; content 表示形式を指定(counter関数はこのプロパティで使用) {付加値(前)} content: counter({変数名}) {付加値(後)} content: counter(number) ' '; contentプロパティについて 「ポイント1:」や「第1章:」などと表示したい場合、{付加値(前・後)}と記載している箇所に値を指定することでカウントする値の前後(「ポイント」や「:」にあたる箇所)の表示を設定できる。 作成の流れ ① カウンター変数に初期値を設定(初期化) ② 値の増加数を指定 ③ 表示形式を指定 ★ カウンターはある要素の擬似要素(:beforeなど)を用いて使用することが多い。 ★ ①は実際にカウンター値を使用するタグ(要素)を囲っているタグ(要素)に指定する必要があります。 実際に例を見た方が理解できると思いますので、次へいきましょう。 実際に作成してみる ※bodyタグ・タグ内の要素以外は省略しています。 作成例① <body> <ul class="menu-list"> <li class="menu-item">メニューアイテム</li> <li class="menu-item">メニューアイテム</li> <li class="menu-item">メニューアイテム</li> </ul> </body> style.css /* liタグデフォルトの「・」を非表示にしておきたいので設定 */ li { list-style: none; } /* 今回ulタグに指定したclass */ .menu-list { counter-reset: number 0; /* ① カウンター変数に初期値を設定 : 今回は「number」という変数名で値を管理し、初期値を0に設定 */ } /* 今回liタグに指定したclassの擬似要素へ指定 */ .menu-item::before { counter-increment: number 1; /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */ content: counter(number) ' '; /* ③ 表示形式を指定 : counter関数の引数には①ので作成した変数を指定し、カウンター値の後ろにスペースを指定 */ } 作成例② <body> <ul class="menu-list"> <li class="menu-item">旅立ち</li> <li class="menu-item">出会い</li> <li class="menu-item">別れ</li> </ul> </body> /* liタグデフォルトの「・」を非表示にしておきたいので設定 */ li { list-style: none; } /* 今回ulタグに指定したclass */ .menu-list { counter-reset: number 0; /* ① カウンター変数に初期値を設定 : 今回は例として「number」という値を管理する変数名で初期値を0に設定 */ } /* 今回liタグに指定したclassの擬似要素へ指定 */ .menu-item::before { counter-increment: number 1; /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */ content: '第' counter(number) '章： '; /* ③ 表示形式を指定 : 今回はカウンター値の前後に付加値を設定 */ } counter関数のスタイル(style) counter関数にCSS側で用意されているスタイル(style)を指定することで、以下のようなスタイル設定を行うことができる。(作成例②の例を漢数字にしたい場合など) 参考資料 ： CSS Counter Styles Level 3 <!-- 作成例②と同じ --> <body> <ul class="menu-list"> <li class="menu-item">旅立ち</li> <li class="menu-item">出会い</li> <li class="menu-item">別れ</li> </ul> </body> /* liタグデフォルトの「・」を非表示にしておきたいので設定 */ li { list-style: none; } /* 今回ulタグに指定したclass */ .menu-list { counter-reset: number 0; /* ① カウンター変数に初期値を設定 : 今回は例として「number」という値を管理する変数名で初期値を0に設定 */ } /* 今回liタグに指定したclassの擬似要素へ指定 */ .menu-item::before { counter-increment: number 1; /* ② 値の増加数を指定 : 今回は1ずつ増やしたいのでnumberに1を指定 */ content: '第' counter(number, cjk-ideographic) '章： '; /* ③ 表示形式を指定 : counter関数の漢数字スタイルを指定 */ }