skillup

技術ブログ

「 HTML+CSS 」 一覧

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-5d063de62b66f4 …

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する要素。通常だとあ …

no image

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

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

レスポンシブサイト作成に関して

2018/03/30   -デザイン
 ,

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

2018/03/28   -デザイン
 

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-5d063d …