はじめに Svelteで使えるCSSフレームワークを調べたのでまとめます。 sveltestrap HP：https://bestguy.github.io/sveltestrap/ GitHub：https://github.com/bestguy/sveltestrap Star：181 もとになったフレームワーク：BootStrap ※2020/01/13現在 Svelma HP:https://c0bra.github.io/svelma/ GitHub：https://github.com/c0bra/svelma Star：200 もとになったフレームワーク：Bulma ※2020/01/13現在 Svelte Material UI HP：https://sveltematerialui.com/ GitHub：https://github.com/hperrin/svelte-material-ui Star:546 もとになったフレームワーク：Material-ui ※2020/01/13現在 おわりに ざっと調べると紹介した3つが使えそうだなと思いました。 これも使えるよとかありましたらコメントで教えてください！
Svelteで使えるCSSフレームワークを調べたのでまとめます。
HP：https://bestguy.github.io/sveltestrap/ GitHub：https://github.com/bestguy/sveltestrap Star：181 もとになったフレームワーク：BootStrap ※2020/01/13現在
HP:https://c0bra.github.io/svelma/ GitHub：https://github.com/c0bra/svelma Star：200 もとになったフレームワーク：Bulma ※2020/01/13現在
HP：https://sveltematerialui.com/ GitHub：https://github.com/hperrin/svelte-material-ui Star:546 もとになったフレームワーク：Material-ui ※2020/01/13現在
ざっと調べると紹介した3つが使えそうだなと思いました。 これも使えるよとかありましたらコメントで教えてください！
という方に向けてざっくりCSSとPHPを解説して行きたいと思います。 まあCSSがCascading Style Sheetsの略で、表示に関する記述って言うのは誰でも分かると思うんですが、じゃあCSSの中身はどういう仕組みになってるの？という問いに対して答えられる人ってIT人口の何割なんだろうねって気がします。 HTMLに関してもPHP使うなら必修だと思うけど、pとかaとかimgとか、主要なタグさえ覚えればheadの中身とか理解しなくても使えてしまったりするので「今更HTMLとかなぁ～」って思ってる人こそ勉強してみると楽しいと思う。 あと分かってるとは思うけど、仕組みと言いつつ低レイヤーの話はしない（出来ない）のでCSガチ勢の方は帰ってどうぞ。 CSSの役割とは何ぞや これに関しては長々と解説するより実例を見てもらった方が早いでしょう。 みなれたQiitaのトップページはCSSを抜くとこんな感じになります。HTMLのお仕事はテキストとそれに付随するコンテンツを規定するだけなのでまあ当然ですね。 ここからCSSの魔法をかけて一気に現代的なサイト表示を作り上げていきます。 色やサイズ、位置の調整 これは簡単で、対象を指定して『プロパティ：パラメータ；』と書いていくだけで勝手に表示が変わっていきます。便利ですね。 まあこれだけだとざっくりし過ぎな気もするので簡単な例を書いておきます。これさえマスターすれば君も今日からフロントエンドエンジニアだ！（） body{ color:white; /*文字色の変更*/ } .huga{ float:left; /*要素を左から横に並べる*/ } .hoge{ padding :10px 30px ; /*要素の内側に指定幅の余白を取る*/ background-color: #FF0000; /*背景色の変更*/ color:#FFFFFF; position: relative; /*位置プロパティを『相対』に指定*/ top:29px; /*上側を指定幅ずらす*/ left:34px; /*左側を指定幅ずらす*/ } /*基本要素全てまとめようと思ったけど想像以上に面倒かったのでこれで許して ちなみにfloatとpaddingとmarginとposition辺りを使いこなせれば位置調整に困ることはないはず :hoverとか:actionとか使えばオサレな表示も思いのままゾイ 詳しくはググってどうぞ*/ 適用範囲の指定方法は。 これも非常に簡単でHTMLのタグ内でclass="(クラス名)"を宣言してCSS側で.(クラス名)と指定すればそれでOK。一応IDに被せるやり方もあるけど、JS使いに怒られるらしいのでやめた方が無難。QiitaのCSSもclassで書いてるのでまあ指定がない限りclassで書けば良いんじゃないかなって気はする。 ちなみに.(クラス名)の後に要素名を書けば指定範囲を要素だけに限定できるぞい。あとbodyはクラスでは無いので.を付けなくても良かったりする。 body { font-family: 'Arial'; /*フォントの指定*/ } .hoge h1{/*H1タグのみに範囲を指定*/ color:red; } このようにとってもとっても便利なCSSだけど、ただ１つ気をつけないといけない点があって実はどんなに雑に書いても動いたりする。 要素指定の重複はもちろんOKだし、書く順番もごちゃごちゃでOK、クラス名をタイポしてもエラーは吐きません。だからまあ………………CSSぐらい楽勝でしょってノリで書くと多分その先は地獄なんじゃないかなって思ったりもします。 PHPってHTMLの中に書けるのに.phpってどういう意味だってばよ？ まあ結論から言ってしまうと、HTMLとPHPを使って.htmlの設計図を記述するのが.phpです。コンテンツを表示する場合は、サーバー側が.phpを処理してクライアント側に.htmlを送信します。バックエンドですね。 文法の解説はここではしません。参考書の劣化コピーになりそうですし、何より面倒いので……………… 特徴を上げるとすれば良く出来た言語だと思います。WEB系の言語としては最近RUBYに食われつつある感じはありますが、RUBYって学習コスト高くない？ railsさえマスターすればOK！みたいな言い草で語られるけど、１つの技術に依存すれば需要が落ちた時買い叩かれるのは明白だし、いざ２つ目のスキルを考える段階でもRUBYとのマルチランゲージを考えると適切な言語が存在しない。強いて言えばPythonか？？？ ………………話が逸れましたね。 後は何の話をしましょうか。技術的な面と言っても自分は入門書を数冊読んだだけのレベルなのであんまり深い事は言えなかったりする。まあ動的型付けや配列サイズが不定なのって便利だねと思ったり、Javaとは一味違う方法でオブジェクト指向を実装するのも中々楽しいです。 という訳で最後に一言 みんな‼ PHPやろうぜ！
まあCSSがCascading Style Sheetsの略で、表示に関する記述って言うのは誰でも分かると思うんですが、じゃあCSSの中身はどういう仕組みになってるの？という問いに対して答えられる人ってIT人口の何割なんだろうねって気がします。
HTMLに関してもPHP使うなら必修だと思うけど、pとかaとかimgとか、主要なタグさえ覚えればheadの中身とか理解しなくても使えてしまったりするので「今更HTMLとかなぁ～」って思ってる人こそ勉強してみると楽しいと思う。
あと分かってるとは思うけど、仕組みと言いつつ低レイヤーの話はしない（出来ない）のでCSガチ勢の方は帰ってどうぞ。
これに関しては長々と解説するより実例を見てもらった方が早いでしょう。
みなれたQiitaのトップページはCSSを抜くとこんな感じになります。HTMLのお仕事はテキストとそれに付随するコンテンツを規定するだけなのでまあ当然ですね。
ここからCSSの魔法をかけて一気に現代的なサイト表示を作り上げていきます。
これは簡単で、対象を指定して『プロパティ：パラメータ；』と書いていくだけで勝手に表示が変わっていきます。便利ですね。
まあこれだけだとざっくりし過ぎな気もするので簡単な例を書いておきます。これさえマスターすれば君も今日からフロントエンドエンジニアだ！（）
body{ color:white; /*文字色の変更*/ } .huga{ float:left; /*要素を左から横に並べる*/ } .hoge{ padding :10px 30px ; /*要素の内側に指定幅の余白を取る*/ background-color: #FF0000; /*背景色の変更*/ color:#FFFFFF; position: relative; /*位置プロパティを『相対』に指定*/ top:29px; /*上側を指定幅ずらす*/ left:34px; /*左側を指定幅ずらす*/ } /*基本要素全てまとめようと思ったけど想像以上に面倒かったのでこれで許して ちなみにfloatとpaddingとmarginとposition辺りを使いこなせれば位置調整に困ることはないはず :hoverとか:actionとか使えばオサレな表示も思いのままゾイ 詳しくはググってどうぞ*/
これも非常に簡単でHTMLのタグ内でclass="(クラス名)"を宣言してCSS側で.(クラス名)と指定すればそれでOK。一応IDに被せるやり方もあるけど、JS使いに怒られるらしいのでやめた方が無難。QiitaのCSSもclassで書いてるのでまあ指定がない限りclassで書けば良いんじゃないかなって気はする。
ちなみに.(クラス名)の後に要素名を書けば指定範囲を要素だけに限定できるぞい。あとbodyはクラスでは無いので.を付けなくても良かったりする。
body { font-family: 'Arial'; /*フォントの指定*/ } .hoge h1{/*H1タグのみに範囲を指定*/ color:red; }
このようにとってもとっても便利なCSSだけど、ただ１つ気をつけないといけない点があって実はどんなに雑に書いても動いたりする。
要素指定の重複はもちろんOKだし、書く順番もごちゃごちゃでOK、クラス名をタイポしてもエラーは吐きません。だからまあ………………CSSぐらい楽勝でしょってノリで書くと多分その先は地獄なんじゃないかなって思ったりもします。
まあ結論から言ってしまうと、HTMLとPHPを使って.htmlの設計図を記述するのが.phpです。コンテンツを表示する場合は、サーバー側が.phpを処理してクライアント側に.htmlを送信します。バックエンドですね。
文法の解説はここではしません。参考書の劣化コピーになりそうですし、何より面倒いので………………
特徴を上げるとすれば良く出来た言語だと思います。WEB系の言語としては最近RUBYに食われつつある感じはありますが、RUBYって学習コスト高くない？
railsさえマスターすればOK！みたいな言い草で語られるけど、１つの技術に依存すれば需要が落ちた時買い叩かれるのは明白だし、いざ２つ目のスキルを考える段階でもRUBYとのマルチランゲージを考えると適切な言語が存在しない。強いて言えばPythonか？？？
………………話が逸れましたね。
後は何の話をしましょうか。技術的な面と言っても自分は入門書を数冊読んだだけのレベルなのであんまり深い事は言えなかったりする。まあ動的型付けや配列サイズが不定なのって便利だねと思ったり、Javaとは一味違う方法でオブジェクト指向を実装するのも中々楽しいです。
という訳で最後に一言
未経験からプログラミング学習をしている方に向けての記事です。 vue.jsでモーダルウインドウを作成した際、rgbaでalphaを0.5に設定しているのに、背景が透明にならない時があったため、同じように悩んでいる場合どのように解決すれば良いかまとめておきます。 確認方法 ①rgbaがちゃんと適用されていることはデベロッパーツールで確認できているか？ ②デベロッパツールでちゃんと適用されていない場合には、デベロッパーツール上でrgbaを指定してみて、改善されるか試してみてください ③デベロッパツールでちゃんと適用されている場合には、デベロッパーツール上でrgbaの指定を外してみて、どのように表示が変わるかを試してみましょう。 自走できるエンジニアを目指して メンターからは 「答え」ではなく、「答えまでたどり着く方法」を学ぶ とよく言われます。 未経験からプログラミングを学習されてる方は、時間に追われてついつい答えを求めがちですが（自分自身）、このことを念頭に質問すると良いと思います。
未経験からプログラミング学習をしている方に向けての記事です。 vue.jsでモーダルウインドウを作成した際、rgbaでalphaを0.5に設定しているのに、背景が透明にならない時があったため、同じように悩んでいる場合どのように解決すれば良いかまとめておきます。
①rgbaがちゃんと適用されていることはデベロッパーツールで確認できているか？ ②デベロッパツールでちゃんと適用されていない場合には、デベロッパーツール上でrgbaを指定してみて、改善されるか試してみてください ③デベロッパツールでちゃんと適用されている場合には、デベロッパーツール上でrgbaの指定を外してみて、どのように表示が変わるかを試してみましょう。
メンターからは
「答え」ではなく、「答えまでたどり着く方法」を学ぶ
とよく言われます。 未経験からプログラミングを学習されてる方は、時間に追われてついつい答えを求めがちですが（自分自身）、このことを念頭に質問すると良いと思います。
CSS設計とは HTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のこと。 構造化・命名規則などとも呼ばれたりする。 CSSのメンテナンス性や作業効率が向上する、 他のCSS編集者が理解しやすくなるといったメリットがある。 BEM Block：枠組みとなる要素。 Element：Blockの中に存在する子要素。 Modifier：BlockやElementを修飾するもの。 これら3つを用いて命名する手法。 block__element--modifierのようにblockとelementはアンダースコア2つで区切り、elementとmodifierはハイフン2つで区切る。 FLOCSS CSS設計指針。 Foundation：ベースを設定。 Layout：大枠のレイアウトに関する定義。 Component：再利用ができる最小限のパーツ。 Project：サイト固有のまとまりを定義してパターン化するパーツ。 Utility：ちょっとした調整のために使われる。 参考サイト https://qiita.com/tera_shin/items/af90aeba49f93c76bd9e https://haniwaman.com/flocss/#FLOCSS https://ics.media/entry/15166/ https://qiita.com/sueshin/items/dcbaf3d8a0adb6b087db
HTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のこと。 構造化・命名規則などとも呼ばれたりする。 CSSのメンテナンス性や作業効率が向上する、 他のCSS編集者が理解しやすくなるといったメリットがある。
Block：枠組みとなる要素。 Element：Blockの中に存在する子要素。 Modifier：BlockやElementを修飾するもの。 これら3つを用いて命名する手法。
block__element--modifierのようにblockとelementはアンダースコア2つで区切り、elementとmodifierはハイフン2つで区切る。
CSS設計指針。
Foundation：ベースを設定。 Layout：大枠のレイアウトに関する定義。 Component：再利用ができる最小限のパーツ。 Project：サイト固有のまとまりを定義してパターン化するパーツ。 Utility：ちょっとした調整のために使われる。
https://qiita.com/tera_shin/items/af90aeba49f93c76bd9e https://haniwaman.com/flocss/#FLOCSS https://ics.media/entry/15166/ https://qiita.com/sueshin/items/dcbaf3d8a0adb6b087db
iOS Safari で広告など Web サイト上の邪魔な要素を非表示にするアプリ AdFilter の紹介です。なお iOS ではユーザースタイルシート(CSS)は使えないため display: none することしかできません。 CSSセレクタチートシート: https://webliker.info/css-selector-cheat-sheet/ 方法 AdFilter をインストール AdFilter - 広告ブロック https://apps.apple.com/jp/app/adfilter-広告ブロック/id1042682195 設定 → Safari → コンテンツブロッカー から AdFilter を有効にする AdFilter を開き、下中央の「カスタム」をタップ 右上の＋をタップ タイプ→「要素の非表示」を選択 セレクターとターゲットを設定して保存 参考 有料ですが、Web Cleaner というアプリもあるようです。(2020/01/13現在 ¥120) こちらは要素を GUI で選択できるため簡単そうです。 https://lifehacking.jp/2017/06/web-cleaner/
iOS Safari で広告など Web サイト上の邪魔な要素を非表示にするアプリ AdFilter の紹介です。なお iOS ではユーザースタイルシート(CSS)は使えないため display: none することしかできません。
display: none
CSSセレクタチートシート: https://webliker.info/css-selector-cheat-sheet/
AdFilter をインストール
AdFilter - 広告ブロック https://apps.apple.com/jp/app/adfilter-広告ブロック/id1042682195
設定 → Safari → コンテンツブロッカー から AdFilter を有効にする
AdFilter を開き、下中央の「カスタム」をタップ
右上の＋をタップ
タイプ→「要素の非表示」を選択
セレクターとターゲットを設定して保存
有料ですが、Web Cleaner というアプリもあるようです。(2020/01/13現在 ¥120) こちらは要素を GUI で選択できるため簡単そうです。 https://lifehacking.jp/2017/06/web-cleaner/
環境 Laravel 6.5.0 Vue.js やりたいこと ::beforeとか::afterとかで任意の要素周辺を修飾できる疑似要素 Sassで使用する場合は必ず「&」を付加しないといけなかった やったこと ?文言の前に✬が付く hoge.sass .message font-weight: bold color: #ffffff background-color: #ff0000 &::before content: "✬" background-color: #ff0000 color: #000000 ❌コンパイルは通るが機能しない hoge.sass .message font-weight: bold color: #ffffff background-color: #ff0000 ::before content: "✬" background-color: #ff0000 color: #000000
Laravel 6.5.0 Vue.js
::beforeとか::afterとかで任意の要素周辺を修飾できる疑似要素 Sassで使用する場合は必ず「&」を付加しないといけなかった
?文言の前に✬が付く
.message font-weight: bold color: #ffffff background-color: #ff0000 &::before content: "✬" background-color: #ff0000 color: #000000
❌コンパイルは通るが機能しない
.message font-weight: bold color: #ffffff background-color: #ff0000 ::before content: "✬" background-color: #ff0000 color: #000000
Google の検索結果に戻ってきたとき、リンクの下に "他の人はこちらも検索" と表示されてリンクが動いてしまうのを防ぐ方法です。Chrome, Brave, Firefox, Safari に対応しています。ただしモバイル版では制約上不可能なようです。 ちなみに英語版では "People also search for" と表示されるようです。 Chrome, Brave 以下の拡張機能を追加するだけです。 No Search For - Chrome ウェブストア https://chrome.google.com/webstore/detail/no-search-for/gfilnngoaebchcnkmppbnijaakeccdjc ※ プライベートモードでも使用したい場合は拡張機能設定の「詳細」から「シークレットモードでの実行を許可する」のチェックを入れてください。 またはカスタム CSS を追加することもできます。 https://gist.githubusercontent.com/shge/cccac34a618662d0ea7c25a5b0a681ad/raw/2debb136650da023b398ef34ef3a356e93277176/hide_people_also_search_for.user.css .exp-outline, .rc > div:nth-child(3) { display: none !important; } Firefox まずはカスタム CSS を追加するための拡張機能を追加します。 Stylus - Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/styl-us/ 次に下のリンクから Install style をクリックするか、以下の CSS をコピーすると追加できます。 https://gist.githubusercontent.com/shge/cccac34a618662d0ea7c25a5b0a681ad/raw/2debb136650da023b398ef34ef3a356e93277176/hide_people_also_search_for.user.css .exp-outline, .rc > div:nth-child(3) { display: none !important; } Safari 以下の内容のファイルを拡張子 .css で作成し、Safari メニュー→環境設定→詳細→スタイルシートから選択します。 style.css div.srg > div.g > div > .exp-outline, div.srg > div.g > div > div.rc > div:nth-child(3) { display: none !important; } すべてのウェブサイトに適用されてしまいますがまったく同じclassを使っているところはないと思うのでおそらく大丈夫です。 iOS iOS Safari ではコンテンツブロッカーを使用して特定要素を非表示にすることはできますが、モバイル版 Google では "他の人はこちらも検索" の表示と同時にサイトのタイトルの下に表示される説明文が非表示 (display: none) になってしまうため、結局リンクは動いてしまいます。 現時点でカスタムCSSを適用することは Safari の制約上不可能なようです。 Android 以下の記事がヒットしましたが情報が古く、また Android 端末を所持していないため真偽はわかりません。 Opera Mobileのユーザースタイルシートでサイトの見栄えを変更 特集その4 参考 https://keikenchi.com/how-to-hide-search-other-people-also-here
Google の検索結果に戻ってきたとき、リンクの下に "他の人はこちらも検索" と表示されてリンクが動いてしまうのを防ぐ方法です。Chrome, Brave, Firefox, Safari に対応しています。ただしモバイル版では制約上不可能なようです。 ちなみに英語版では "People also search for" と表示されるようです。
以下の拡張機能を追加するだけです。 No Search For - Chrome ウェブストア https://chrome.google.com/webstore/detail/no-search-for/gfilnngoaebchcnkmppbnijaakeccdjc
※ プライベートモードでも使用したい場合は拡張機能設定の「詳細」から「シークレットモードでの実行を許可する」のチェックを入れてください。
またはカスタム CSS を追加することもできます。 https://gist.githubusercontent.com/shge/cccac34a618662d0ea7c25a5b0a681ad/raw/2debb136650da023b398ef34ef3a356e93277176/hide_people_also_search_for.user.css
.exp-outline, .rc > div:nth-child(3) { display: none !important; }
まずはカスタム CSS を追加するための拡張機能を追加します。
Stylus - Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/styl-us/
次に下のリンクから Install style をクリックするか、以下の CSS をコピーすると追加できます。
Install style
https://gist.githubusercontent.com/shge/cccac34a618662d0ea7c25a5b0a681ad/raw/2debb136650da023b398ef34ef3a356e93277176/hide_people_also_search_for.user.css
以下の内容のファイルを拡張子 .css で作成し、Safari メニュー→環境設定→詳細→スタイルシートから選択します。
.css
div.srg > div.g > div > .exp-outline, div.srg > div.g > div > div.rc > div:nth-child(3) { display: none !important; }
すべてのウェブサイトに適用されてしまいますがまったく同じclassを使っているところはないと思うのでおそらく大丈夫です。
iOS Safari ではコンテンツブロッカーを使用して特定要素を非表示にすることはできますが、モバイル版 Google では "他の人はこちらも検索" の表示と同時にサイトのタイトルの下に表示される説明文が非表示 (display: none) になってしまうため、結局リンクは動いてしまいます。 現時点でカスタムCSSを適用することは Safari の制約上不可能なようです。
以下の記事がヒットしましたが情報が古く、また Android 端末を所持していないため真偽はわかりません。 Opera Mobileのユーザースタイルシートでサイトの見栄えを変更 特集その4
https://keikenchi.com/how-to-hide-search-other-people-also-here
Google の検索結果に戻ってきたとき、リンクの下に "他の人はこちらも検索" と表示されてリンクが動いてしまうのを防ぐ方法です。Chrome, Brave, Firefox, Safari に対応しています。ただしモバイル版では制約上不可能なようです。 ちなみに英語版では "People also search for" と表示されるようです。 Chrome / Brave 以下の拡張機能を追加するだけです。 No Search For - Chrome ウェブストア https://chrome.google.com/webstore/detail/no-search-for/gfilnngoaebchcnkmppbnijaakeccdjc ※ プライベートモードでも使用したい場合は拡張機能設定の「詳細」から「シークレットモードでの実行を許可する」のチェックを入れてください。 またはカスタム CSS を追加することもできます。 https://gist.githubusercontent.com/shge/cccac34a618662d0ea7c25a5b0a681ad/raw/2debb136650da023b398ef34ef3a356e93277176/hide_people_also_search_for.user.css .exp-outline, .rc > div:nth-child(3) { display: none !important; } Firefox まずはカスタム CSS を追加するための拡張機能を追加します。 Stylus - Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/styl-us/ 次に下のリンクから Install style をクリックするか、以下の CSS をコピーすると追加できます。 https://gist.githubusercontent.com/shge/cccac34a618662d0ea7c25a5b0a681ad/raw/2debb136650da023b398ef34ef3a356e93277176/hide_people_also_search_for.user.css .exp-outline, .rc > div:nth-child(3) { display: none !important; } Safari 以下の内容のファイルを拡張子 .css で作成し、Safari メニュー→環境設定→詳細→スタイルシートから選択します。 style.css div.srg > div.g > div > .exp-outline, div.srg > div.g > div > div.rc > div:nth-child(3) { display: none !important; } すべてのウェブサイトに適用されてしまいますがまったく同じclassを使っているところはないと思うのでおそらく大丈夫です。 iOS iOS Safari ではコンテンツブロッカーを使用して特定要素を非表示にすることはできますが、モバイル版 Google では "他の人はこちらも検索" の表示と同時にサイトのタイトルの下に表示される説明文が非表示 (display: none) になってしまうため、結局リンクは動いてしまいます。 現時点でカスタムCSSを適用することは Safari の制約上不可能なようです。 Android 以下の記事がヒットしましたが情報が古く、また Android 端末を所持していないため真偽はわかりません。 Opera Mobileのユーザースタイルシートでサイトの見栄えを変更 特集その4 参考 https://keikenchi.com/how-to-hide-search-other-people-also-here
100日チャレンジの209日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 209日目は おはようございます209日目progateでjquery上級編、rubyをⅢまで技術書でwebサイトコーディング#100DayOfCode#駆け出しエンジニアと繋がりたい #早起きチャレンジ— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 12, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
209日目は
おはようございます209日目progateでjquery上級編、rubyをⅢまで技術書でwebサイトコーディング#100DayOfCode#駆け出しエンジニアと繋がりたい #早起きチャレンジ— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 12, 2020
おはようございます209日目progateでjquery上級編、rubyをⅢまで技術書でwebサイトコーディング#100DayOfCode#駆け出しエンジニアと繋がりたい #早起きチャレンジ
以下のサンプルソースは、JSON型データからテーブルを動的に生成し、指定した行数ずつ表示するページング機能を実装しています。「Tabulator」は使っていません。 jsontoTable.html <!DOCTYPE html> <html lang="ja"> <head> <title>サンプル</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <style> div#paging { text-align: center; /* スクロールに対してページングボックスの位置を固定 */ position: fixed; /* 位置を指定 */ bottom: 0; right:45%; } div#pagingbox{ background: #FFF; } th{ /* ヘッダ背景塗りつぶし */ background: #eee; } th,td { /* 枠線を1本線指定 */ border: solid 1px; width:auto; } table{ /* 枠線を1本線指定 */ border: solid 1px; border-collapse: collapse; white-space: nowrap; } footer{ position: fixed; width: 100%; background-color: #C0C0C0; padding: 15px 0; bottom: 0; /*下に固定*/ } </style> </head> <body> <!--テーブル生成位置--> <div id ='maintable'></div> <!--ページングボタン配置--> <footer> <div id="paging"> <table> <tr> <tb><button id="prevbtn" type="button"><</button></tb> <tb> <span id="currentpage">currentpage</span> / <span id="lastpage">lastpage</span> </tb> <tb><button id="nextbtn" type="button">></button></tb> </tr> </table> </div> </footer> <script> var json =[ //jsonサンプルデータ { "順位":1 ,"氏名":"王貞治" , "本数":868 } , { "順位":2 ,"氏名":"野村克也" ,"本数":657 } , { "順位":3 ,"氏名":"門田博光" ,"本数":567 } , { "順位":4 ,"氏名":"山本浩二" ,"本数":536 } , { "順位":5 ,"氏名":"清原和博" ,"本数":525 } ] // table要素を生成 var table = document.createElement('table'); // ヘッダーを作成 var tr = document.createElement('tr'); for (key in json[0]) { // th要素を生成 var th = document.createElement('th'); // th要素内にテキストを追加 th.textContent = key; // th要素をtr要素の子要素に追加 tr.appendChild(th); } // tr要素をtable要素の子要素に追加 table.appendChild(tr); // テーブル本体を作成 for (var i = 0; i < json.length; i++) { // tr要素を生成 var tr = document.createElement('tr'); // th・td部分のループ for (key in json[0]) { // td要素を生成 var td = document.createElement('td'); // td要素内にテキストを追加 td.textContent = json[i][key]; // td要素をtr要素の子要素に追加 tr.appendChild(td); } // tr要素をtable要素の子要素に追加 table.appendChild(tr); } // 生成したtable要素を追加する document.getElementById('maintable').appendChild(table); </script> <script>// ページング機能 jQuery(function($) { var page = 0; var displayrows = 30;// １ページ当たり表示する行の数 function draw() {// ページの表示 $('#lastpage').html(Math.ceil(($('tr').size()-1)/displayrows)); $('#currentpage').html(page + 1); $('tr').hide(); $('tr:first,tr:gt(' + page * displayrows + '):lt(' + displayrows + ')').show();// 変数を使用する場合は' + + 'を忘れずに } $('#prevbtn').click(function() {// １ページ後進 if (page > 0) { page--; draw(); } }); $('#nextbtn').click(function() {// １ページ前進 if (page < ($('tr').size() - 1) /displayrows - 1) { page++; draw(); } }); draw();//初回表示 }); </script> </body> </html> 結果 json =[ //jsonサンプルデータ { "順位":1 ,"氏名":"王貞治" , "本数":868 } , { "順位":2 ,"氏名":"野村克也" ,"本数":657 } , { "順位":3 ,"氏名":"門田博光" ,"本数":567 } , { "順位":4 ,"氏名":"山本浩二" ,"本数":536 } , { "順位":5 ,"氏名":"清原和博" ,"本数":525 } ] ⇓
以下のサンプルソースは、JSON型データからテーブルを動的に生成し、指定した行数ずつ表示するページング機能を実装しています。「Tabulator」は使っていません。
<!DOCTYPE html> <html lang="ja"> <head> <title>サンプル</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <style> div#paging { text-align: center; /* スクロールに対してページングボックスの位置を固定 */ position: fixed; /* 位置を指定 */ bottom: 0; right:45%; } div#pagingbox{ background: #FFF; } th{ /* ヘッダ背景塗りつぶし */ background: #eee; } th,td { /* 枠線を1本線指定 */ border: solid 1px; width:auto; } table{ /* 枠線を1本線指定 */ border: solid 1px; border-collapse: collapse; white-space: nowrap; } footer{ position: fixed; width: 100%; background-color: #C0C0C0; padding: 15px 0; bottom: 0; /*下に固定*/ } </style> </head> <body> <!--テーブル生成位置--> <div id ='maintable'></div> <!--ページングボタン配置--> <footer> <div id="paging"> <table> <tr> <tb><button id="prevbtn" type="button"><</button></tb> <tb> <span id="currentpage">currentpage</span> / <span id="lastpage">lastpage</span> </tb> <tb><button id="nextbtn" type="button">></button></tb> </tr> </table> </div> </footer> <script> var json =[ //jsonサンプルデータ { "順位":1 ,"氏名":"王貞治" , "本数":868 } , { "順位":2 ,"氏名":"野村克也" ,"本数":657 } , { "順位":3 ,"氏名":"門田博光" ,"本数":567 } , { "順位":4 ,"氏名":"山本浩二" ,"本数":536 } , { "順位":5 ,"氏名":"清原和博" ,"本数":525 } ] // table要素を生成 var table = document.createElement('table'); // ヘッダーを作成 var tr = document.createElement('tr'); for (key in json[0]) { // th要素を生成 var th = document.createElement('th'); // th要素内にテキストを追加 th.textContent = key; // th要素をtr要素の子要素に追加 tr.appendChild(th); } // tr要素をtable要素の子要素に追加 table.appendChild(tr); // テーブル本体を作成 for (var i = 0; i < json.length; i++) { // tr要素を生成 var tr = document.createElement('tr'); // th・td部分のループ for (key in json[0]) { // td要素を生成 var td = document.createElement('td'); // td要素内にテキストを追加 td.textContent = json[i][key]; // td要素をtr要素の子要素に追加 tr.appendChild(td); } // tr要素をtable要素の子要素に追加 table.appendChild(tr); } // 生成したtable要素を追加する document.getElementById('maintable').appendChild(table); </script> <script>// ページング機能 jQuery(function($) { var page = 0; var displayrows = 30;// １ページ当たり表示する行の数 function draw() {// ページの表示 $('#lastpage').html(Math.ceil(($('tr').size()-1)/displayrows)); $('#currentpage').html(page + 1); $('tr').hide(); $('tr:first,tr:gt(' + page * displayrows + '):lt(' + displayrows + ')').show();// 変数を使用する場合は' + + 'を忘れずに } $('#prevbtn').click(function() {// １ページ後進 if (page > 0) { page--; draw(); } }); $('#nextbtn').click(function() {// １ページ前進 if (page < ($('tr').size() - 1) /displayrows - 1) { page++; draw(); } }); draw();//初回表示 }); </script> </body> </html>
結果
json =[ //jsonサンプルデータ { "順位":1 ,"氏名":"王貞治" , "本数":868 } , { "順位":2 ,"氏名":"野村克也" ,"本数":657 } , { "順位":3 ,"氏名":"門田博光" ,"本数":567 } , { "順位":4 ,"氏名":"山本浩二" ,"本数":536 } , { "順位":5 ,"氏名":"清原和博" ,"本数":525 } ]
⇓
あっという間にHTMLとCSSの学習部分が終了。 テキスト通り言われるがままコードを書いただけ。とりあえず表示はされたのでうまくいったのかとは思う・・・ 何度も同じコードを打っていたら、なんとなく意味が分かってきた気がする。divがグループを括ってるとか、bodyとかfooterとか。。。 最後に確認テストがありました。コードを自分で書いて、ページの左上の方が広さ300px、高さが100pxの範囲を赤くするというもの。全くわからず。。。自分のレベルの低さに愕然。繰り返しコードを書いて、自分のものにしていきたいとおもいます。
あっという間にHTMLとCSSの学習部分が終了。 テキスト通り言われるがままコードを書いただけ。とりあえず表示はされたのでうまくいったのかとは思う・・・ 何度も同じコードを打っていたら、なんとなく意味が分かってきた気がする。divがグループを括ってるとか、bodyとかfooterとか。。。
最後に確認テストがありました。コードを自分で書いて、ページの左上の方が広さ300px、高さが100pxの範囲を赤くするというもの。全くわからず。。。自分のレベルの低さに愕然。繰り返しコードを書いて、自分のものにしていきたいとおもいます。
