100日チャレンジの206日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 206日目は おはようございます206日目息抜きにprogateでjqueryとcss上級編、あとRuby#100DaysOfCode #駆け出しエンジニアと繋がりたい #早起きチャレンジ— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 6, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
206日目は
おはようございます206日目息抜きにprogateでjqueryとcss上級編、あとRuby#100DaysOfCode #駆け出しエンジニアと繋がりたい #早起きチャレンジ— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 6, 2020
おはようございます206日目息抜きにprogateでjqueryとcss上級編、あとRuby#100DaysOfCode #駆け出しエンジニアと繋がりたい #早起きチャレンジ
after要素で「必須」って表示させたいのにCMSの影響なのかしらんけどUNICODEっぽく文字化けして困るとき～ content要素をUNICODEで書いて解決。 なお↓はよく使う‘必須’の文字。 content: "\5FC5 \9808" Content要素でUNICODE使いたいときはバックスラッシュを使おう。 UNICODE一覧はこちら http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/cjku_klist.html
after要素で「必須」って表示させたいのにCMSの影響なのかしらんけどUNICODEっぽく文字化けして困るとき～
content要素をUNICODEで書いて解決。 なお↓はよく使う‘必須’の文字。 content: "\5FC5 \9808"
content: "\5FC5 \9808"
Content要素でUNICODE使いたいときはバックスラッシュを使おう。
UNICODE一覧はこちら http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/cjku_klist.html
はじめに 社内制作でVRコンテンツを作成しました。 細かいコンテンツ作成などは置いておき、VRっぽいものを作るまでの流れが簡単だったので紹介します。 環境 OS : Windows 10 Pro エディター : VSCode 実装 1. A-Frameの読み込み <html> <head> <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script> </head> <body> </body> </html> 2. オブジェクトの配置 <html> <head> <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="0 1.17 -3.9" rotation="0 0 0" color="#ff0000"></a-box> </a-scene> </body> </html> この時点で下記のように出力されます。 ※PCで確認しているので、スマホなどで確認するとすでにジャイロセンサーなど取得して、空間上にオブジェを配置します。 画像にテクスチャーを張ったり、3Dオブジェクトを配置したりできるので、試してみてください。 詳細は↓↓公式サイト↓↓ https://aframe.io/ 3. A-Frame Inspector 値を変更して毎度、確認するのが面倒なので、A-Frame Inspectorを開いて（win:ctrl + alt + i）直接オブジェクトの配置やサイズ感を決めるとやりやすいかと思います。 ※端末のOSのバージョンによって、センサーの取得状況が違うため、要実機検証が必要です。 実際にA-Frameで作ったサイトは↓こちら↓ http://www.hol-on.co.jp/greetingsite/newyear/2020/??utm_source=qiita 以上
社内制作でVRコンテンツを作成しました。 細かいコンテンツ作成などは置いておき、VRっぽいものを作るまでの流れが簡単だったので紹介します。
OS : Windows 10 Pro エディター : VSCode
1. A-Frameの読み込み
<html> <head> <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script> </head> <body> </body> </html>
2. オブジェクトの配置
<html> <head> <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="0 1.17 -3.9" rotation="0 0 0" color="#ff0000"></a-box> </a-scene> </body> </html>
この時点で下記のように出力されます。 ※PCで確認しているので、スマホなどで確認するとすでにジャイロセンサーなど取得して、空間上にオブジェを配置します。
画像にテクスチャーを張ったり、3Dオブジェクトを配置したりできるので、試してみてください。 詳細は↓↓公式サイト↓↓ https://aframe.io/
3. A-Frame Inspector 値を変更して毎度、確認するのが面倒なので、A-Frame Inspectorを開いて（win:ctrl + alt + i）直接オブジェクトの配置やサイズ感を決めるとやりやすいかと思います。
ctrl + alt + i
※端末のOSのバージョンによって、センサーの取得状況が違うため、要実機検証が必要です。
実際にA-Frameで作ったサイトは↓こちら↓ http://www.hol-on.co.jp/greetingsite/newyear/2020/??utm_source=qiita
以上
悩み事と結論 CSSのFlexboxは便利ですが、下のようなことでお悩みになったことはありませんか？ レスポンシブデザインなため1列の要素数をピッタリ揃えられず、最終行の要素だけ幅が変わってしまう悩みです。 実はこの問題、HTMLだけで簡単に解決できます。 1列に並べたい最大個数だけ、末尾に下のようなadjuster要素を追加してください。 この例の場合1列は最大4個なので、末尾に4つ足しています。 <div class="root"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="adjuster"></div> <div class="adjuster"></div> <div class="adjuster"></div> <div class="adjuster"></div> </div> .item, .adjuster { flex-basis: calc(25% - 10px); // ←adjusterにも要素と同じ幅を持たせてください。 min-width: 200px; flex-grow: 1; // ←伸縮も指定してください。 flex-shrink: 0; margin-left: 10px; // ←同じ左右マージンを持たせてください。 } .item { height: 50px; margin-top: 50px; // ←上下マージンは要素のみに持たせてください。高さを持つと、余りが出た際にズレます。 } .adjuster { height: 0; // ←未指定で0なら省略できます。 } このCSSを当てると、最終行の余り幅をadjusterが吸収してくれます。 また、余った分については、adjusterの高さが0なので影響しません。 親のサイズもこの通り、余った分は影響しません。 画面幅が変わって1列の個数が変わってもこの通りです。
CSSのFlexboxは便利ですが、下のようなことでお悩みになったことはありませんか？
レスポンシブデザインなため1列の要素数をピッタリ揃えられず、最終行の要素だけ幅が変わってしまう悩みです。
実はこの問題、HTMLだけで簡単に解決できます。
1列に並べたい最大個数だけ、末尾に下のようなadjuster要素を追加してください。 この例の場合1列は最大4個なので、末尾に4つ足しています。
<div class="root"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="adjuster"></div> <div class="adjuster"></div> <div class="adjuster"></div> <div class="adjuster"></div> </div>
.item, .adjuster { flex-basis: calc(25% - 10px); // ←adjusterにも要素と同じ幅を持たせてください。 min-width: 200px; flex-grow: 1; // ←伸縮も指定してください。 flex-shrink: 0; margin-left: 10px; // ←同じ左右マージンを持たせてください。 } .item { height: 50px; margin-top: 50px; // ←上下マージンは要素のみに持たせてください。高さを持つと、余りが出た際にズレます。 } .adjuster { height: 0; // ←未指定で0なら省略できます。 }
このCSSを当てると、最終行の余り幅をadjusterが吸収してくれます。
また、余った分については、adjusterの高さが0なので影響しません。
親のサイズもこの通り、余った分は影響しません。
画面幅が変わって1列の個数が変わってもこの通りです。
導入 Sharepointの基本機能だけで業務サポートサイトを構築するので、ポイントや忘れがちな点を一覧化しておく。 目的別の見出しで並べていく。 ページのタイトル書き換え Javascript $(function() { var headerTitleElement = $("#DeltaPlaceHolderPageTitleInTitleArea>span>span>a"); headerTitleElement[0].innerHTML = "書換え後のタイトル名"; }); css なし JavaScriptでのGetパラメータ取得 Javascript var arg = new Object; url = location.search.substring(1).split('&'); for(i=0; url[i]; i++) { var k = url[i].split('='); arg[k[0]] = k[1]; } var id = arg.user_id; css なし 文字列リンクを画像リンクに差し替える Javascript $(function() { var ele = $("#scriptWPQ3 tbody td:nth-of-type(6)"); ele[0].innerHTML = '<img src="/sites/jphgt4743/SiteAssets/document_download.png">'; ele[1].innerHTML = '<img src="/sites/jphgt4743/SiteAssets/document_download.png">'; }); css #scriptWPQ3 tbody td:nth-of-type(6) img { width: 23px; }
Sharepointの基本機能だけで業務サポートサイトを構築するので、ポイントや忘れがちな点を一覧化しておく。 目的別の見出しで並べていく。
$(function() { var headerTitleElement = $("#DeltaPlaceHolderPageTitleInTitleArea>span>span>a"); headerTitleElement[0].innerHTML = "書換え後のタイトル名"; });
なし
var arg = new Object; url = location.search.substring(1).split('&'); for(i=0; url[i]; i++) { var k = url[i].split('='); arg[k[0]] = k[1]; } var id = arg.user_id;
$(function() { var ele = $("#scriptWPQ3 tbody td:nth-of-type(6)"); ele[0].innerHTML = '<img src="/sites/jphgt4743/SiteAssets/document_download.png">'; ele[1].innerHTML = '<img src="/sites/jphgt4743/SiteAssets/document_download.png">'; });
#scriptWPQ3 tbody td:nth-of-type(6) img { width: 23px; }
