cssのIDやclassの先頭に数字を使う
cssのIDやclassの先頭に数字を用いることは出来ない。（num01のように、後ろにつけることはできる） 404ページのURLが/404/などの場合、ページと同じID/classを動的につける場合にそのページだけ処理を変えるなど行っていた。 ただし、下記のように数字をエンコードすると、css内でも数字を用いる事が出来るようになる。 エンコードを調べる：https://mothereff.in/ […]
css/sass
1/5ページ
imgをmargin: autoで中央寄せにする
- 2020.02.10
よく忘れるのでメモ。 画像はインライン要素のため、margin: autoが効かない。 display: block を行い、ブロック要素に変更する。
同一レベルの要素において「◯◯以降」を指定するスタイルシートセレクタ
「.A ~ .B」と ~ で繋ぐことで、クラスAと同じ階層で（親が一緒で）、以降に来るクラスBを全て指定する事ができる。 下記のような、現在値を基準として前後で要素を変えたいものに利用できる。 下記では、「.is-current を指定したliから後ろにあるliに対してスタイルをかける」ことが出来る。 ◆HTML <ul class="c-progress"> <li>2& […]
inputタグに表示するプレースホルダの位置を変更する
- 2019.05.31
- placeholder
スタイルシートでフォーム内にデフォルトで表示する「プレースホルダ」の位置を変更することが出来る。 下記例ではplaceholderを左から100pxずらして表示する。 hoge::placeholder { padding-left: 100px; }
position: absolute;した要素を中央位置に配置する
- 2019.01.31
- position: absolute;, 上下中央, 配置
よく忘れるのでメモ。 top: 50% と transform: translateY(-50%) を併用することで、上下中央に要素を配置できる。 ◆上下左右中央 div{ position: relative; .hoge{ position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50 […]
youtubeの埋め込みをレスポンシブにする
使うときにはいつも忘れているのでメモ。 ■指定の場所にyoutubeのリンクを持ったiframeがあれば、youtubeFrameというdivで囲む $(function(){ youtubeFrame(); } function youtubeFrame() { $('#hoge iframe[src^="https://www.youtube.com"]').wrap('<div cla […]
タイトルの左右に線を引くスタイルシート
タイトルで使われる左右に線のあるデザインをスタイルシートで行う。 .titleLine { display: flex; align-items: center; &:before, &:after { border-top: 1px solid; content: ""; flex-grow: 1; } &:before { margin-right: 15px; } & […]
画像に効果を設定するcss(ブレンドモード)
乗算やオーバーレイといった効果を画像に設定する。 background プロパティで複数の画像をカンマで区切ると、画像同士のブレンドも可能。 尚、IEには全般対応指定ないほか、Safariブラウザも効果タイプによっては対応していない。 body { background: #0bd url(beach-footprint.jpg) no-repeat; background-blend-mode: […]
テーブルのボーダーが表示されない場合の対応
- 2016.12.14
- Firefox, IE, table, table-cell
忘れやすいので注意。 position:relative;をtable要素またはdisplay:table-cellにかけると、IEとFirefoxで指定したボーダーが出ない。 [必須]などのアイコンをpositionで揃える場合などで使用すると思うので、その場合にはtableにposition:relativeをかけるのではなく、該当セルにdivを挟みdivに対してposition:relati […]
WP-PageNaviの設定＆カスタマイズ
- 2016.11.08
- WP-PageNavi
【よく使用する設定】 ・ 総ページ数用テキスト 空欄 ・ 現在のページ用テキスト %PAGE_NUMBER% ・ ページ用テキスト %PAGE_NUMBER% ・ 最初のページ用テキスト 空欄 ・ 最後のページ用テキスト 空欄 ・ 前のページ用テキスト < ・ 次のページ用テキスト > ・「前へ…」用テキスト 空欄 ・「次へ…」用テキスト 空欄 ページナビゲーション設定 ・ […]