skillup

技術ブログ

「 デザイン 」 一覧

no image

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

2018/11/11   -デザイン
 ,

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

no image

頻出CSSのまとめ

2018/08/26   -デザイン
 ,

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

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

no image

data- HTML5のカスタムデータについて

2018/03/28   -デザイン
 

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

パララックス系のギャラリー(中央ネタ)

2018/03/17   -デザイン
 ,

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

positionを使うときに注意すること

2018/03/17   -デザイン, 未分類
 

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …