スポンサードリンク
カテゴリー:"開発"

jQuery UI を導入してみよう

jQuery UI top

jQueryのプロジェクトの一つでWebサイト用UIのフレームワークである jQuery UI を試してみることになったので、導入までの覚え書きです。

続きを読む »

Bootstrapを使ってWebページにタブUIを実装しよう

Bootstrap top

Bootstrapを導入する目的の一つに、「タブUIが簡単に実装できそう」というのがありまして、いそいそとサンプルコードをコピペしてみたのですが・・・。

続きを読む »

Bootstrapを導入してみよう

Bootstrap top

言わずと知れたWebサイト用UIのフレームワークである Bootstrap を使ってみよう! という話になったので、導入の覚え書きです。

続きを読む »

CSSを使ってボックス要素の角を丸くしよう

ボックス要素の四隅が
丸くなるのです

ボックス要素の角を丸くするためのCSSの覚え書きです。

続きを読む »

レスポンシブWebデザインで画面の幅より大きい画像を縮小しよう

ようやく当ブログもレスポンシブデザインになったのですが、スマートフォンだと横幅が370pxくらいの扱いになっちゃうんですよね。

それの何が問題かというと、横幅400pxで用意してた各エントリーの画像がスマホのブラウザで表示すると、横にはみ出してしまうんです。

なにか良い方法はないものかとWebで検索していたら、CSSにナイスな指定の方法があるではないですか!

指定の内容としては、「画像の最大サイズは画面の幅まで」としてやるわけです。具体的には・・・

こんな感じになります。

これで横幅400px以下の画面において、横幅400px以上の画像は画面の幅までのサイズに縮小されます。

またそれ以下のサイズの画像については、そのままのサイズで表示されます。

うん。これでOK!

参照リンク
 ・レスポンシブでPC向け画像をスマートフォンに対応させるあれこれ | Creator Clip
 ・【HTML5】 レスポンシブデザイン 画像のサイズを可変に設定 - HTML5, jQuery役立つ情報ブログ|天下一Web道会

レスポンシブWebデザインでレイアウト変更の画面サイズ設定で悩む

レスポンシブWebデザインにおけるデザインの切り替えは、画面の横幅(ピクセル)によって行われるわけですが、どこを基準に切り替えるかというのがなかなかに悩ましいんです。

続きを読む »

システムが対応してなくてもレスポンシブなWebデザインはできる!

ただし、条件がありまして、

  1. CSSの編集ができる
  2. 読み込むCSSファイルを変更もしくは追加することができる

このどちらかが可能である必要があります。また、CSSについての知識も必要です。

続きを読む »

CSSの float:left; の入れ子に挑戦してみた

ちょっとばかりブログのレイアウトを変更しようと思いまして、CSSのによる float:left; の入れ子(段組の中の段組)に挑戦してみました。

何がやりたかったというと、こういうデザインにしたかったわけですよ。

メインコンテンツ
メインコンテンツ
メインコンテンツ
メインコンテンツ
メインコンテンツ
メインコンテンツ
メインコンテンツ
メインコンテンツ
メインコンテンツ
メインコンテンツ
メインコンテンツ

サイドバー上段

サイドバー
下段左

サイドバー
下段左

サイドバー
下段左

サイドバー
下段右

サイドバー
下段右

サイドバー
下段右

サイドバー
下段右

サイドバー
下段右

サイドバー
下段右

続きを読む »

Webページの入力欄のオートコンプリートをOFFにしよう

社内のWebアプリで 「検索入力欄のオートコンプリートが鬱陶しい!」 と言われたので、機能を OFF にする方法を探したらちゃんとあるじゃないですか。というわけでメモメモです φ(..)。

方法は HTML の FORMタグか各 INPUTタグに属性 autocomplete="off" を指定することで、オートコンプリートを OFF にすることができます。

と FORMタグに指定した場合は、そのフォーム内の INPUTタグの全てでオートコンプリートが OFF になります。

個別の INPUTタグごとにオートコンプリートを OFF にしたい場合は、FORMタグではなく個々の INPUTタグに直接属性を指定します。

上記の例だと、キーワード1ではオートコンプリートが無効ですが、キーワード2ではオートコンプリートが有効になります。

ただしこの属性は、全ての Webブラウザで有効というわけではないようなので、そこは割り切りが必要かもです。

参照リンク
 ・オートコンプリートとは 【 auto-complete 】 - 意味/解説/説明/定義 : IT用語辞典
 ・HTML5/フォーム/form要素 オートコンプリートを指定する - TAG index Webサイト
 ・IE11 では “autocomplete=off” が無視される場合がある | Hebikuzure's Tech Memo
 ・各ブラウザのオートコンプリート機能が働くパターンのまとめ and デモ at HouseTect, JavaScriptな情報をあなたに

blockquoteタグ内に引用元を示すにはciteタグを使おう

他のサイトから文章を引用するときには blockquoteタグを使うわけですが、その中で引用元を示すには citeタグを使うといいらしいと今更ながらに知ったのでメモメモです φ(..)。

使い方としては以下のソースのような感じになります。

これでスッキリ!

スポンサードリンク

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER


  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク