CSS

フォームのデザインのまとめ。

2017.12.19 / Labs

フォーム内のテキストフィールドなどのパーツデザインのカスタマイズのまとめです。
サンプルはこちら

 

デザインは基本的にCSSのみで行なっています。セレクトボックスの下向き矢印のみSVG画像を使用しています。
フォームのHTMLはこちら。

CSSはこちら。ラジオボタン、チェックボックスでは本来のパーツを非表示にして、<span>タグで独自のパーツを作成しています。

CKEditorで画像サイズの指定を変更。

2015.01.12 / Notes

CKEditorの編集画面で画像を挿入すると、デフォルトでは画像のサイズをStyle属性にて指定されます。

通常の使用では特に影響はありませんが、レスポンシブデザインの場合、画面サイズに合わせて画像が縮小表示するように、CSSで次のように記述することがあります。

ですがStyle属性でサイズを指定してある場合そちらの方が優先されますので、CSSの設定では期待通りに画像を表示することができません。

 

CKEditorで編集の際にStyle属性ではなく、従来のwidth、height属性で画像サイズを指定するには、CKEditorの「Enhanced Image」というプラグインをインストールすることで実現することができます。
このプラグインを有効にするためには、次の依存するプラグインも併せてインストールする必要があります。

「Dialog」「Clipboard」については標準で入っていますので、残りの2つを「ckeditor/plugins」ディレクトリに入れます。
その上で設定ファイル「ckeditor/config.js」内に次の一行を追加します。

DrupalでCKEditorを利用している場合、環境設定のCKEditorの設定にある「高度なオプション」に上記を記述することもできます。

CSSでテキストの一行目だけを一文字分出したいとき。

2014.07.27 / Notes

CSSで注釈などのテキストの一行目だけを、一文字分出したいときのメモです。

テキスト全体を「padding-left」で一文字分下げて、「text-indent」にて一行目のテキストのみ一文字分、前にずらしています。表示は次のようになります。

 

※注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。

CSS3のTransitionでダイナミックなページ遷移。

2012.04.22 / Labs

CSS3のTransitionによるアニメーションで、Flashのような動きのあるダイナミックなページ遷移のサンプルです。

 

実はこれは「impress.js」というプレゼンテーション用のスクリプトを拝見してとても興味を持ったので、理解する目的で自分なりに作成してみたものです。

 

CSS3のアニメーションには「jQuery Transit」というプラグインを使わせてもらっています。
サンプルはこちら

 

仕組み的には拡大・縮小と回転を取り入れて、ページ(コンテンツ)の移動の際にアニメーションを行います。キーボードはスペースキーでページを送り、また方向キーでそれぞれ進む/戻るを設定しています。
HTMLでは、外側のコンテナと内側のボックス、さらにその中に各コンテンツを並べています。

CSSでは各コンテンツのサイズを座標を指定しています。

JavaScriptは外部ファイルに記述しています。
コードの大部分は、各要素の座標を管理するためのものです。

習作用のためシンプルな構成ですが、これだけのコードでもCSS3を使ったダイナミックなコンテンツが可能になります。現在はIEがCSS3のアニメーションに対応していないのが残念ですが、今後は思い切ったデザインのサイトも増えていくように思います。

Drupalのctools利用で、ドロップダウンボタンの表示不具合を調整。

2012.03.17 / Notes

Viewsのインターフェイスを担っているctools(Chaos tool suite)で、日本語環境で利用の際に、ドロップダウンボタンの三角矢印の表示を調整する際のメモです。標準のままでは三角矢印が横に伸びていますが、正常な状態に戻します。
ctools
あくまで見た目だけの問題ですが、頻繁に目にする部分なので、どうしても気になってしまいます・・・。
調整するには、ctoolsモジュールに含まれるスタイルシートを直接変更します。
下記のCSSファイルの45行目あたりの「ctools-twisty」セレクタに「width」のパラメータを一行追加します。
/sites/all/modules/ctools/css/dropbutton.css

気になる方はぜひお試しください。