skillup

技術ブログ

「 HTML+CSS 」 一覧

no image

tableでのヘッダー固定に関して

2019/09/29   -デザイン
 

超小ネタですが、tableのヘッダー固定に関して。 ソースは下記リンクに。 https://github.com/umanari145/css 注意したいポイントとして、 stickyを使うか、flo …

no image

object-fitによる画像比率を保ったセンタリング

2019/07/20   -デザイン
 

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

JavaScriptでのDom操作に関して

2019/06/30   -JavaScript
 , ,

画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。 ES6のクラス化 プログラムをモジュール化できるメリットは大きいです。特にスコープのコントロール …

no image

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

2019/04/28   -デザイン
 

画面系の小さい小ネタなど。 position:sticky ヘッダーに関して画面をスクロールすると、付いてくるヘッダーを「スティッキーヘッダー」と言います。 これ実装するには通常はJS+CSSで色々書 …

no image

チェック状態のradio,checkでの要素の表示、非表示

2019/03/31   -デザイン
 

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

BrowserSyncを使ったホットリロードに関して

2018/11/11   -デザイン
 ,

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

no image

頻出CSSのまとめ

2018/08/26   -デザイン
 ,

普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作) で、CSSでもよく出る …

no image

inputでの複雑な配列の持たせ方

2018/07/06   -未分類
 ,

長い間inputって基本的に文字だけで、配列を使うときもcheckbox系の値を入れるだけだと思っていたのですが、かなり複雑な配列も入れることができます。 [crayon-5ded6901259fc7 …

no image

CSSデザインネタリンク集

2018/06/11   -デザイン
 ,

デザインモックがないとき用のリンク集なもの 管理画面テンプレート 一般系 直接使うもよし、参考にするもよし 2016年最新 スタイリッシュな管理画面の無料&有料HTMLデザインテンプレート 19選 B …

no image

bulmaフレームワークに関して form編

2018/05/03   -デザイン
 

前回に続き、bulmaフレームワークのCSSのformがらみに関して。 ソースはこちら メモ的に。 controlはinput,select,textareaなどをwrappingする要素。通常だとあ …