CSS
input タグの placeholder の文字色が濃く、うすい色にするのは、 CSS でどのように指定するんだっけ？とよく忘れてしまうので、 書き留めておきます。 placeholder 疑似クラスを使うのです。 input::-webkit-input-placeholder{ color: #cccccc; } input:-m…
wkhtmltopdf を使用して、Python pdfkit で、URL指定からＰＤＦ生成という流れ。wkhtmltopdf は、ＯＳ環境に合わせて以下からダウンロードしてインストール https://wkhtmltopdf.org/downloads.html参考は、過去の投稿、、、 Java→Python Pdfkit実行→PDF受け…
何度も過去、以下を書いたが、Wicket ModalWindow 内の height の調整が抜けていた。。 Wicket full size ModalWindow - Oboe吹きプログラマの黙示録Wicket ModalWindow full screen - Oboe吹きプログラマの黙示録heightの調整、先に答えになる JS (jQuery）…
Ｗｅｂページデザインとして、サイド（横）に折りたたみするメニューをＣＳＳだけで書いたことがある。 ＣＳＳだけでサイド開閉メニュー - Oboe吹きプログラマの黙示録 でもこれには、次の欠点がある。 ・メニュー開いた時に、スライドする方法の為にブラウ…
他にも応用がきくので、コピペの為にメモ。 <div class="container-parent"> <div class="container">Ａ</div> <div class="container">Ｂ</div> <div class="container">Ｃ</div> </div> <ul class="container-parent"> <li class="container">Ａ</li> <li class="container">Ｂ</li> <li class="container">Ｃ</li> </ul> calc で計算して width を指定する。（レ…
Wicket で、Bootstrap を採用して navbar と Wicket の DataView で描画するページング を Bootstrap の Pagenation にするようにした時、 デザイン作業中は問題ないのですが、 z-index の指定をしないと、 navbar のドロップメニューが Pagenation の下に隠…
wkhtmltopdf でＰＤＦに変換する https://wkhtmltopdf.org/ <div style="page-break-after:always;"></div> あるいは、罫線で <hr style="page-break-after:always;"/> 改ページしたい箇所に書き込んでおく。md（Markdownファイル）から PDF を作成するのに、pandoc や Prince とか使わずに、 一旦、HTMLに変換してＰＤＦを作るつもりで、wkhtmlt</hr>…
昔、Wicket の ModalWindow の caption を非表示にする css を書いたり、 Wicketモーダルウィンドウの外観を変更する - Oboe吹きプログラマの黙示録 CSS の記述で、画面いっぱいの ModalWindow 表示を書いたことがありました。 Wicket ModalWindow full scre…
Datepicker は jQuery ui 以外にも沢山あるのでまだ、jQuery ui を使うなんてという批判はさておき、 使い慣れてもいるので。。。 年月セレクタをプルダウンにした時、、 jquery-ui-1.12.1.min.js と、 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> で、以下のようにdatepicker を設定して表示した時、…
昨日の投稿、WicketのPagingNavigatorで、先頭(first)と末尾(last)を表示させない方法 - Oboe吹きプログラマの黙示録 に続いて、Wicket で、Bootstrap用の PagingNavigator を作りました。 ↓ 以下のような描画になります。（色は別にＣＳＳで指定） まず、Bo…
コンテンツをページの中央配置する方法はいくつかあると思うが 代表的な方法を２つメモ。 position: absolute と margin: auto を指定する方法 HTML <body> <div class="center-content box"> <h3>Center</h3> </div> </body> CSS body{ margin: 0; padding: 0; box-sizing: border-box; font-size: calc(16px + 0.2vw); -…
BootStrap 4.1.3 で配布されるｃｓｓ の bg-＊ の色見本どこかにあるのかも知れないけど、探すのが面倒だから。。。 （ 流行り、廃りでもう BootStrap 使うというのは減少してるかな？所詮、ＣＳＳ書けない人の為！のコンセプトみたいだし。。） bg-* color …
jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録 に続き、CSS疑似要素で、フォントアイコンを書く - Oboe吹きプログラマの黙示録 を書いたことを利用して、コンテキストメニューにアイコンを設定します。 今回も、Fontello - ico…
ブラウザ表示で期待するＨＴＭＬ <i class="plus-icon"></i> フォントアイコンで必要な基本的なＣＳＳは書いてあるとする。 失敗するパターン。。。 .plus-icon::before{ content: ""; } これはダメである 挿入する疑似要素がそのままの文字列が出てしまい、フォント…
Wicket ばかり書いていると、Wicket の ModalWindow が便利で、jQuery UI の Dialog を書く機会が減り、 jQuery UI ダイアログの背景色を変更するの、どうやるんだっけ？ と少し気分が落ちる。。。（面倒くさいなあ！みたいな。。）jQuery UI ダイアログの背…
横に要素を並べる書き方は一般的に、CSS float 属性指定で良く以下のように書く。HTMLソース <div class="content"> <ul> <li><div>aaaa</div></li> <li><div>bbbb</div></li> <li><div>cccc</div></li> </ul> </div> ＣＳＳソース .content ul{ width: 600px; } .content ul:after{ content: ""; display: block; clear: both; } .content li{ list-style-type:…
jQuery を使用しないで、ＣＳＳだけでサイド開閉メニューのサンプルメモHTML サンプル <link rel="stylesheet" type="text/css" href="home.css"> <link rel="stylesheet" type="text/css" href="sidemenu.css"> </head> <body> <input id="menuopen-input" type="checkbox"> <nav id="menu-nav"> <ul> <li><span><b>メニュー</b></span><span></span></li></ul></nav></body>
メモ。 スライドしてループするデザインの作り方を紹介しているのを見つけたのでリンクのメモです。 jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法 | BlackFlag
昔、フェードイン、フェードアウトするメッセージの jQuery を書いた。 見直すと中央寄せが中途半端でできていない。書き直す。ＣＳＳソース @CHARSET "UTF-8"; /** * fadeinmsg.css */ div#fadeMessageModal{ display: none; position: fixed; width: 100%;…
メモ input[type=radio]:checked + label{ background-color: #ff00ff; color: #ffffff; } のように書く。
Wicket ModalWindow full screen と言うと、ちょっと言い過ぎだけど、つまりブラウザで開いたページ表示一杯の 幅、高さで ModalWindow しかも caption なしの ModalWindow に見えない ModalWindow を出したくなった。昔、captionが無い～フレーム枠が存在し…
jQuery UI の datepicker を使ってるWebサイトで、わざわざアイコンのボタンによる picker 呼出しをするデザインがなんか釈然としない。https://jqueryui.com/datepicker/#icon-triggerにあるようなカレンダーアイコンをクリックで呼び出すもの。これより入…
水平方向に並べたメニューのドロップを書いたので、 oboe2uran.hatenablog.comでは、縦にならべたメニューの横に表示するメニューサンプル <ul class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a></li> </ul> </li> <li><span>menu</span> <ul> <li></li></ul></li></ul>
html サンプル <ul class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a></li> </ul> </li> <li><span>menu</span> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub…</a></li></ul></li></ul>
今更。。。 css float属性の解除は、after疑似要素を使うのがいい。 <ul class="foo"> <li>a</li> <li>b</li> <li>c</li> </ul> <ul> <li>d</li> <li>e</li> <li>f</li> </ul> に対して、 .foo:after{ content: ""; display: block; clear: both; } .foo li{ float: left; list-style: none; width: 50px; border: 1px solid #808080; }
JavaFX の CSS を書いていると、ついＨＴＭＬのCSS を書いていた時の癖で @CHARSET "UTF-8"; を書いてしまう。でも、これを書いてしまうと、com.sun.javafx.css.parser.CSSParser は、ＣＳＳ parseエラーになり思いとおりの スタイルが適用されなくなる。doc…
メモ。。。 今さらだけど、以下で紹介された方法も使おう。 JSを使わずにCSSだけで作るドロワーメニュー – Web制作会社トライム
input タグ type="number" のスピンボタンを非表示にするＣＳＳChrome と Safari input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } IE input[type="number"]{ -…
HTML textarea の wrap 属性って気が付けば wrap="off" は、もう使用しないんですね。横スクロールが自動で出るように wrap="off" を使うのではなく、 wrap="soft" と指定する。 もしくはＣＳＳで、 textarea{ resize: none; white-space: pre; overflow-wra…
横長カレンダーを書く jQuery ソース・・・メモ。 moment.js http://momentjs.com/ を使うことにした。jQuery は、2.x系で書いた。moment-with-locales.js を使う。 /* datetext = yyyy/MM/dd 日付 * predays = 前方日数(datetextの日付を含まないカウント）…
