skillup

技術ブログ

「 デザイン 」 一覧

no image

checkboxのカスタマイズ

2017/10/15   -デザイン
 

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 ソース まずはソースを。 html [crayon-5a63af44d5 …

no image

ワンポイント画像系のcssでの実装

2017/10/09   -デザイン
 

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 list-style list系ならばもっとも簡単に実装。 html [crayon-5a63af44d6eaa5604 …

no image

backgroundやbox系のプロパティ

2017/10/09   -デザイン
 

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで 背景画像の位置 background-postion いわゆるどの位置で画像を表記するか。 …

no image

lessサンプル

2017/10/08   -デザイン
 

lessのサンプル lessファイル構成 header,footer sytle 変数 lib 関数 common headerなどの共通部分を@importで読み込む共通モジュール top ページ自 …

no image

lessについて(CSSライブラリ)

2017/10/08   -デザイン
 ,

lessって? CSSの保守性を向上させるライブラリ。これを使うことでcssが圧倒的に便利になる。 スコープが使える 階層を作ることで他の部分への影響を抑えることができる。これはかなり大きい。 変数が …

no image

css小ネタ

2017/10/08   -デザイン
 ,

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …

no image

テンプレートエンジンTwigについて

2017/09/09   -PHP, デザイン
 

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 インストール composer.jsonに下 …

no image

compassについて

2017/09/09   -デザイン
 

sassをベースにしたフレームワークがcompassです。 compassとは? sassの記法をベースにCSSファイルの作成が可能 cssだけではなく、jsやimageファイルなどのディレクトリ情報 …

no image

sassについて

2017/09/09   -デザイン
 

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 sassとは 一言でいうとCSSをプログラミングのように書ける言語です。具体的には下記のようなことができます。 変数 …

no image

ドロップダウンリスト

2017/07/26   -デザイン
 

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …