CSS

placeholder の色を変更

CSS

input タグの placeholder の文字色が濃く、うすい色にするのは、 CSS でどのように指定するんだっけ?とよく忘れてしまうので、 書き留めておきます。 placeholder 疑似クラスを使うのです。 input::-webkit-input-placeholder{ color: #cccccc; } input:-m…

PDF帳票、HTMLで準備するWebページをテンプレートにする発想

wkhtmltopdf を使用して、Python pdfkit で、URL指定からPDF生成という流れ。wkhtmltopdf は、OS環境に合わせて以下からダウンロードしてインストール https://wkhtmltopdf.org/downloads.html参考は、過去の投稿、、、 Java→Python Pdfkit実行→PDF受け…

Wicket ModalWindow Full size で height も Page の高さサイズに合わせる。

何度も過去、以下を書いたが、Wicket ModalWindow 内の height の調整が抜けていた。。 Wicket full size ModalWindow - Oboe吹きプログラマの黙示録Wicket ModalWindow full screen - Oboe吹きプログラマの黙示録heightの調整、先に答えになる JS (jQuery)…

Bootstrap 使用と併用するサイド(横)に設置するメニューナビゲーション

Webページデザインとして、サイド(横)に折りたたみするメニューをCSSだけで書いたことがある。 CSSだけでサイド開閉メニュー - Oboe吹きプログラマの黙示録 でもこれには、次の欠点がある。 ・メニュー開いた時に、スライドする方法の為にブラウ…

flex による均等な3分割レイアウト

CSS

他にも応用がきくので、コピペの為にメモ。 <div class="container-parent"> <div class="container">A</div> <div class="container">B</div> <div class="container">C</div> </div> <ul class="container-parent"> <li class="container">A</li> <li class="container">B</li> <li class="container">C</li> </ul> calc で計算して width を指定する。(レ…

Wicket Bootstrap navbar と pagenation

Wicket で、Bootstrap を採用して navbar と Wicket の DataView で描画するページング を Bootstrap の Pagenation にするようにした時、 デザイン作業中は問題ないのですが、 z-index の指定をしないと、 navbar のドロップメニューが Pagenation の下に隠…

wkhtmltopdf で任意に改ページを挿入する

wkhtmltopdf でPDFに変換する https://wkhtmltopdf.org/ <div style="page-break-after:always;"></div> あるいは、罫線で <hr style="page-break-after:always;"/> 改ページしたい箇所に書き込んでおく。md(Markdownファイル)から PDF を作成するのに、pandoc や Prince とか使わずに、 一旦、HTMLに変換してPDFを作るつもりで、wkhtmlt</hr>…

Wicket full size ModalWindow

昔、Wicket の ModalWindow の caption を非表示にする css を書いたり、 Wicketモーダルウィンドウの外観を変更する - Oboe吹きプログラマの黙示録 CSS の記述で、画面いっぱいの ModalWindow 表示を書いたことがありました。 Wicket ModalWindow full scre…

jQuery ui Datepicker 年月プルダウンにした時の調整

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 Bootstrap用の Pagenation

昨日の投稿、WicketのPagingNavigatorで、先頭(first)と末尾(last)を表示させない方法 - Oboe吹きプログラマの黙示録 に続いて、Wicket で、Bootstrap用の PagingNavigator を作りました。 ↓ 以下のような描画になります。(色は別にCSSで指定) まず、Bo…

ページ中央配置のHTML

CSS

コンテンツをページの中央配置する方法はいくつかあると思うが 代表的な方法を2つメモ。 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 で配布される bg-* の色見本

CSS

BootStrap 4.1.3 で配布されるcss の bg-* の色見本どこかにあるのかも知れないけど、探すのが面倒だから。。。 ( 流行り、廃りでもう BootStrap 使うというのは減少してるかな?所詮、CSS書けない人の為!のコンセプトみたいだし。。) bg-* color …

jsTree のコンテキストメニューにアイコンを設定

jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録 に続き、CSS疑似要素で、フォントアイコンを書く - Oboe吹きプログラマの黙示録 を書いたことを利用して、コンテキストメニューにアイコンを設定します。 今回も、Fontello - ico…

CSS疑似要素で、フォントアイコンを書く

CSS

ブラウザ表示で期待するHTML <i class="plus-icon">&#xecf2;</i> フォントアイコンで必要な基本的なCSSは書いてあるとする。 失敗するパターン。。。 .plus-icon::before{ content: "&#xecf2;"; } これはダメである 挿入する疑似要素がそのままの文字列が出てしまい、フォント…

jQuery UI ダイアログの背景色を変更するメモ

Wicket ばかり書いていると、Wicket の ModalWindow が便利で、jQuery UI の Dialog を書く機会が減り、 jQuery UI ダイアログの背景色を変更するの、どうやるんだっけ? と少し気分が落ちる。。。(面倒くさいなあ!みたいな。。)jQuery UI ダイアログの背…

float 属性を指定しない横並び配置のデザイン

CSS

横に要素を並べる書き方は一般的に、CSS float 属性指定で良く以下のように書く。HTMLソース <div class="content"> <ul> <li><div>aaaa</div></li> <li><div>bbbb</div></li> <li><div>cccc</div></li> </ul> </div> CSSソース .content ul{ width: 600px; } .content ul:after{ content: ""; display: block; clear: both; } .content li{ list-style-type:…

CSSだけでサイド開閉メニュー

CSS

jQuery を使用しないで、CSSだけでサイド開閉メニューのサンプルメモ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 で

メモ。 スライドしてループするデザインの作り方を紹介しているのを見つけたのでリンクのメモです。 jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法 | BlackFlag

フェードイン、フェードアウトするメッセージ(改編)

昔、フェードイン、フェードアウトするメッセージの jQuery を書いた。 見直すと中央寄せが中途半端でできていない。書き直す。CSSソース @CHARSET "UTF-8"; /** * fadeinmsg.css */ div#fadeMessageModal{ display: none; position: fixed; width: 100%;…

input type="radio" のラベル、チェックされてる時のスタイル属性

CSS

メモ input[type=radio]:checked + label{ background-color: #ff00ff; color: #ffffff; } のように書く。

Wicket ModalWindow full screen

Wicket ModalWindow full screen と言うと、ちょっと言い過ぎだけど、つまりブラウザで開いたページ表示一杯の 幅、高さで ModalWindow しかも caption なしの ModalWindow に見えない ModalWindow を出したくなった。昔、captionが無い~フレーム枠が存在し…

jQuery UI の datepicker trigger を画像でなくてフォントアイコンで指定

jQuery UI の datepicker を使ってるWebサイトで、わざわざアイコンのボタンによる picker 呼出しをするデザインがなんか釈然としない。https://jqueryui.com/datepicker/#icon-triggerにあるようなカレンダーアイコンをクリックで呼び出すもの。これより入…

css だけでドロップメニュー(横)

CSS

水平方向に並べたメニューのドロップを書いたので、 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>

css だけでドロップメニュー

CSS

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疑似要素で。

CSS

今更。。。 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 で @CHARSET記述は不要である

JavaFX の CSS を書いていると、ついHTMLのCSS を書いていた時の癖で @CHARSET "UTF-8"; を書いてしまう。でも、これを書いてしまうと、com.sun.javafx.css.parser.CSSParser は、CSS parseエラーになり思いとおりの スタイルが適用されなくなる。doc…

cssで書くメニューの例。。

メモ。。。 今さらだけど、以下で紹介された方法も使おう。 JSを使わずにCSSだけで作るドロワーメニュー – Web制作会社トライム

input タグ type="number" のスピンボタンを非表示

CSS

input タグ type="number" のスピンボタンを非表示にするCSSChrome と Safari input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } IE input[type="number"]{ -…

textarea 横スクロール

CSS

HTML textarea の wrap 属性って気が付けば wrap="off" は、もう使用しないんですね。横スクロールが自動で出るように wrap="off" を使うのではなく、 wrap="soft" と指定する。 もしくはCSSで、 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の日付を含まないカウント)…