どうも7noteです。CSSで水玉模様を作ります。 背景パターンを画像で作るのもいいですが、CSSで再現することもできます。 規則性のある水玉模様の背景 style.css body { background-image: radial-gradient(#7bded9 20%, transparent 20%), radial-gradient(#7bded9 20%, transparent 20%); background-size: 40px 40px; background-position: 0 0, 20px 20px; } 結果 ランダム風に見える水玉模様の背景 style.css body { background-image: radial-gradient(290px 300px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(800px 780px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(1000px 990px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(750px 750px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%); background-size: 1230px 1280px, 810px 910px, 1470px 990px, 1200px 1700px, 1520px 1200px, 1100px 1300px; background-position: -300px -550px, -200px 100px, 50px 510px, -200px -550px, -180px -250px, 130px -150px; } 結果 複数のバラバラのサイズの丸い背景を重ねて作ります。 重なった部分が綺麗に見えるように色は16進数ではなくrgbaで書くことで重なり部分が綺麗に見えます。 ※スクロールしたらこんなかんじ 色もバラバラに変えても綺麗ですね。 まとめ 水玉模様はcanvasやjsを使った方法もあるようです。 適材適所で画像にしたり、CSSで作ったり使い分けるのがいいかなと思います。 アニメーションと組み合わせて水玉模様をふわふわさせたり、回転させたりしても面白いサイトができるかもしれませんね！ 参考：https://www.esz.co.jp/blog/2766.html おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
背景パターンを画像で作るのもいいですが、CSSで再現することもできます。
body { background-image: radial-gradient(#7bded9 20%, transparent 20%), radial-gradient(#7bded9 20%, transparent 20%); background-size: 40px 40px; background-position: 0 0, 20px 20px; }
結果
body { background-image: radial-gradient(290px 300px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(800px 780px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(1000px 990px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(750px 750px , rgba(123,222,217, 0.5) 20%, transparent 20%), radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%); background-size: 1230px 1280px, 810px 910px, 1470px 990px, 1200px 1700px, 1520px 1200px, 1100px 1300px; background-position: -300px -550px, -200px 100px, 50px 510px, -200px -550px, -180px -250px, 130px -150px; }
複数のバラバラのサイズの丸い背景を重ねて作ります。 重なった部分が綺麗に見えるように色は16進数ではなくrgbaで書くことで重なり部分が綺麗に見えます。
※スクロールしたらこんなかんじ
色もバラバラに変えても綺麗ですね。
水玉模様はcanvasやjsを使った方法もあるようです。 適材適所で画像にしたり、CSSで作ったり使い分けるのがいいかなと思います。
アニメーションと組み合わせて水玉模様をふわふわさせたり、回転させたりしても面白いサイトができるかもしれませんね！
参考：https://www.esz.co.jp/blog/2766.html
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
目的 z-index使用時に、重なり順が想定と違っていた 重なりの仕組みについて整理する スタックコンテキスト スタック(stack)は積み上げる、コンテキスト(context)は文脈という意味 positionをstatic以外、かつz-indexを指定した場合に生成される集まりのとこ z-indexを使用することで、同じスタックコンテキストの要素同士の重なり順を指定できる 実例 CSSとHTMLはこんな感じ（色や位置の記述は割愛） <div class="squares"> <div class="square square-red">z-index:2</div> <div class="square square-green"> z-index:3 <div class="square square-blue">z-index:1</div> </div> </div> .squares { position: relative; } .square { position: absolute; width: 10rem; height: 10rem; } .square--red { z-index: 2; } .square--blue { z-index: 1; } .square--green { z-index: 3; } ・z-indexが1の要素が、一番上に表示されている ・これは、z-indexが3の親要素が起点となっているから ・各要素の重なり順序は下表のようになっている 色 z-index スタックコンテキスト 重なり順 赤 2 root root→赤(z-index:2) 青 1 緑 緑(z-index:3)→青(z-index:1) 緑 3 root root→緑(z-index:3) 青はz-index:3の緑を起点としているため、一番上に表示される まとめ z-indexを使用するときは、起点に注意しよう
CSSとHTMLはこんな感じ（色や位置の記述は割愛）
<div class="squares"> <div class="square square-red">z-index:2</div> <div class="square square-green"> z-index:3 <div class="square square-blue">z-index:1</div> </div> </div>
.squares { position: relative; } .square { position: absolute; width: 10rem; height: 10rem; } .square--red { z-index: 2; } .square--blue { z-index: 1; } .square--green { z-index: 3; }
・z-indexが1の要素が、一番上に表示されている ・これは、z-indexが3の親要素が起点となっているから ・各要素の重なり順序は下表のようになっている
青はz-index:3の緑を起点としているため、一番上に表示される
z-indexを使用するときは、起点に注意しよう
やりたいのは上に説明文があって、残りを画像で埋めたい、みたいなケースです。 Flexible Box Layout を使います。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <style> body { margin: 0; } #content { display: flex; position: absolute; flex-direction: column; margin: 10px; width: 95vw; height: 95vh; } #content>p:last-of-type { flex: 1; min-height: 100px; } .image { height: 100%; max-width: 100%; } </style> </head> <body> <div id="content"> <h1>Flexible Box Layoutのサンプル</h1> <ul> <li>hogehoge</li> <li>fugafuga</li> </ul> <p><img src="computer_desktop_document.png" class="image"></p> </div> </body> </html>
やりたいのは上に説明文があって、残りを画像で埋めたい、みたいなケースです。
Flexible Box Layout を使います。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <style> body { margin: 0; } #content { display: flex; position: absolute; flex-direction: column; margin: 10px; width: 95vw; height: 95vh; } #content>p:last-of-type { flex: 1; min-height: 100px; } .image { height: 100%; max-width: 100%; } </style> </head> <body> <div id="content"> <h1>Flexible Box Layoutのサンプル</h1> <ul> <li>hogehoge</li> <li>fugafuga</li> </ul> <p><img src="computer_desktop_document.png" class="image"></p> </div> </body> </html>
MS Wordを開きたくない！ という思いから、Terminalでレポート執筆が出来ないか考えてみました。 やりたいこと MarkDown記法で執筆してPDF出力する 最低限のCSS適用（MD単体では中央揃えが出来ない） Gitで管理したい（リモートリポジトリの活用でHDDの突然死に備える）（GitHubの草を生やせる） MS Wordを開かない（Emacsキーバインドを設定するのが面倒なので）（UbuntuにはMS Wordが存在しないので） 導入ツール markdown-pdf git 環境 Ubuntu 20.04 LTS node 12.18.4 注意 md -> PDF変換ツールはいくつかありますが、導入が簡単でエラーで1時間溶かしたなんて言えない変換が高速かつTerminalで完結出来るという理由からmarkdown-pdfを導入しています。 数式などを用いる場合はPandoc（対応フォーマットが豊富で、LaTeXにも対応しています）、ヘッダー・フッターを用いたい場合はVSCodeの拡張機能などがおすすめです。 やり方 git、及びNode.jsが導入できている前提で話します。 1. markdown-pdfの導入 sudo npm install -g markdown-pdf --unsafe-perm ここでめっちゃ詰まったのですが、GitHubのIssuesに回答がありました。 2. 作業リポジトリの設定 言うまでもありませんが mkdir report cd report git init それでもって出力したPDFを.gitignoreに設定しておくと便利 vim .gitignore .gitignore *.pdf 3.スタイルシートの設定 vim style.css style.css h1{ text-align: center; font-size: 18px; line-height: 18px; margin-top: 0px; } /*表題用*/ h2{ text-align: right; font-size: 14px; } /*名前用*/ p{ font-size: 10.5px; text-indent: 1em; }/*本文用*/ 言うまでもありませんが、お好みで調節してください。 これで一通り設定は終わりです。 report.md # title ## name content markdown-pdf report.md -s style.css のように入力するとこのようなPDFが出力されます。 4.aliasの設定 いちいち-s style.cssオプションを設定するのは面倒ですし、そもそもmarkdown-pdfという名称が長いのでaliasを設定します。 vim ~/.bash_profile ~/.bashrc alias m2p='markdown-pdf -s style.css' source ~/.bashrc で再読込みしてあげれば m2p report.md でPDF変換が出来るようになります。 終わりに レポートが大量に課されていて大変ではありますが、他の人にも是非Terminalでレポート執筆を完結していただきたいという強い思いから、この時期に書かせていただきました。Wordとは決別して快適なレポート執筆ライフを満喫しましょう！
MS Wordを開きたくない！ という思いから、Terminalでレポート執筆が出来ないか考えてみました。
Ubuntu 20.04 LTS node 12.18.4
md -> PDF変換ツールはいくつかありますが、導入が簡単でエラーで1時間溶かしたなんて言えない変換が高速かつTerminalで完結出来るという理由からmarkdown-pdfを導入しています。 数式などを用いる場合はPandoc（対応フォーマットが豊富で、LaTeXにも対応しています）、ヘッダー・フッターを用いたい場合はVSCodeの拡張機能などがおすすめです。
git、及びNode.jsが導入できている前提で話します。
sudo npm install -g markdown-pdf --unsafe-perm
ここでめっちゃ詰まったのですが、GitHubのIssuesに回答がありました。
言うまでもありませんが
mkdir report cd report git init
それでもって出力したPDFを.gitignoreに設定しておくと便利
vim .gitignore
*.pdf
vim style.css
h1{ text-align: center; font-size: 18px; line-height: 18px; margin-top: 0px; } /*表題用*/ h2{ text-align: right; font-size: 14px; } /*名前用*/ p{ font-size: 10.5px; text-indent: 1em; }/*本文用*/
言うまでもありませんが、お好みで調節してください。
これで一通り設定は終わりです。
# title ## name content
markdown-pdf report.md -s style.css
のように入力するとこのようなPDFが出力されます。
いちいち-s style.cssオプションを設定するのは面倒ですし、そもそもmarkdown-pdfという名称が長いのでaliasを設定します。
-s style.css
vim ~/.bash_profile
alias m2p='markdown-pdf -s style.css'
source ~/.bashrc
で再読込みしてあげれば
m2p report.md
でPDF変換が出来るようになります。
レポートが大量に課されていて大変ではありますが、他の人にも是非Terminalでレポート執筆を完結していただきたいという強い思いから、この時期に書かせていただきました。Wordとは決別して快適なレポート執筆ライフを満喫しましょう！
優良な企業のHPによくみられるヘッダーのテンプレート 今回ご紹介するテンプレの内容、特徴。 ヘッダーがposition:fixed；で固定されている。 企業様の名前やロゴ、ナビメニューが両端に表示されている。 ナビメニューに触れた時アクションが起こる。 主にこのような特徴があると思います。思い当たる節はございませんか？ 上記のような構成のコードを紹介いたします。 HTML <header> <img src="images/dualslogo.png" alt="logo" class="dualslogo"> <ul> <li>HOME</li> <li>WORKS</li> <li>ABOUT</li> <li>CONTACT</li> </ul> </header> CSS header { position: fixed; width: 100%; display: flex; justify-content: space-between; } ul { display: flex; list-style: none; } li { color: white; transition: all 0.3s; cursor: pointer; //padding,marginなどの調節 } li:hover { 色が変わったりすると良いかもしれません。 } ＊個人的な意見ですが全体的にパステルカラーを使うと綺麗に見えます。
今回ご紹介するテンプレの内容、特徴。
主にこのような特徴があると思います。思い当たる節はございませんか？ 上記のような構成のコードを紹介いたします。
HTML <header> <img src="images/dualslogo.png" alt="logo" class="dualslogo"> <ul> <li>HOME</li> <li>WORKS</li> <li>ABOUT</li> <li>CONTACT</li> </ul> </header> CSS header { position: fixed; width: 100%; display: flex; justify-content: space-between; } ul { display: flex; list-style: none; } li { color: white; transition: all 0.3s; cursor: pointer; //padding,marginなどの調節 } li:hover { 色が変わったりすると良いかもしれません。 }
＊個人的な意見ですが全体的にパステルカラーを使うと綺麗に見えます。
