Layers CSS レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 Bootstrapみたく沢山コンポーネントは不用で、自分でサイトデザインしたいけど、レイアウト部分のレスポンシブ対応な軽量なフレームワークだけ使いたいという場合の１つの選択肢として。 このフレームワークを使って作られたデモ - レスポンシブ 関連エントリ モバイルファーストなレスポンシブCSSフレームワーク「Cardinal」 HTML/JS/CSSでAndroidアプリ風UIを作るフレームワーク「Fries」 CSSアニメーションでページを紙芝居の様に切り替えるデモ

デスクトップでの表示はもちろん、スマフォやタブレットでも、そして印刷してもかっこいいレイアウトのフォームを実装できるスタイルシートのフレームワークを紹介します。 将来的にはスクリプトを使って、機能を強化していくようですよ。 Grid Forms Grid Formsのデモ Grid Formsの使い方 Grid Formsのデモ 本格的なデモの前に、まずは簡単なデモから。 デモはChrome, Safari, Firefoxなどのモダンブラウザ、スマフォ・タブレットのブラウザでご覧ください。IEは9+で、IE8以下はレスポンシブ非対応ですが別スクリプトを併用することで対応可です。 Grid Formsはその名の通りグリッドをベースにしたフォームで、紙のようなレイアウトの美しいフォームを簡単に実装できます。 デモページでは、フォームのさまざまな要素が美しいグリッドできっちりレイアウトされてい

JB問い合わせフォーム Webサイトで使用できる問い合わせ受付フォーム HTMLファイルを変更するだけで、問い合わせ項目の変更ができます 問い合わせ受付メールを自動送信 必須項目チェック、メールアドレス書式チェック機能 外国語や絵文字の問い合わせも受け付けます スマホ・タブレット対応レスポンシブデザイン (Bootstrap5) 禁止ワード機能 sendmailが使えなくても、保存データをあとで閲覧できます PHP8対応 ダウンロード はじめに使用許諾契約をお読みください。 ダウンロードする (Ver.0.7.1, UTF-8, 2023-05) 使用許諾条件の概要 使用許諾条件 無料使用: 著作者表示を維持していただくと、無料で使用できます (第3条)。 プログラムをご自身でカスタマイズする用途などには向きません (内容非公開。第6条)。 動作確認環境 PHP 8 / 7 / 5 インス

WordPressで別のブログサイトを立ち上げたのだが、テーマを何にすべきか、色々と検索してみた。 写真の多いサイトなので、画像が目立つデザインを中心に探し、この”Pinboard”なるテーマを発見。 Pinterestライクな、正にピンボード風のデザインがなかなかかっこいい。 で、早速インストールしてみたのだが・・ あ、あれ・・？なんかイケてない・・。 というわけで、デフォルトの状態から、Pinboardのサンプルに近づけるためにやったことまとめ。 コンテンツをアップ 試しに、コンテンツを3エントリほどアップ。アイキャッチも設定してみる。 こんな感じ。ふむふむ。 トップページ、縦に１エントリずつ表示されているので、 「エントリ１」「エントリ２」「サイドバー」 の３列表示にしたい。 WordPressのダッシュボードから、外観→Theme Optionsをクリック。 下の方にスクロールし、

WordPressで作られたブログなどでスクロールして記事を読み終えた時に、その記事をシェアするボタン、記事へのコメント入力フォーム、メールニュースなどの告知を配置したパネルを下からアニメーションで表示するjQueryのプラグイン、いやWordPressのプラグインと言った方がいいのか、を紹介します。 デモページ：記事を読み終えたとこ パネルには左から、コメント、ソーシャルメディア、メールニュースが配置されており、これはカスタマイズできます。 jQuery Engageの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※WordPressなのでjquery.jsは既に利用していると思いますが、無ければ追加してください。 <script src="js/dist/jquery.engage.min.js" type="text/javasc

Drop-Down Navigation: Responsive and Touch-Friendly Osvaldas Valutis レスポンシブでクールなドロップダウンメニュー実装例 次のようなレスポンシブなドロップダウンメニューのデモです。デモページはこちら。 シンプルですがかなり良い感じに動いているみたいです。 そのまま使うのもいいですし、１から実装する際の参考にしてみてもよいかもしれませんね。 関連エントリ レスポンシブな画像ギャラリーが作成できるjQueryプラグイン HTMLメール用のレスポンシブテンプレート「Antwort」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 レスポンシブなパララックス効果付きサイトを作るフレームワーク「Coo

実装も簡単で超軽量、Responsiveデザインで画像のサイズが変わってもクリッカブルマップの座標を計算しなおすjQueryのプラグインを紹介します。 デモページ：幅480pxで表示 [ad#ad-2] RWD Image Mapsの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> HTML HTMLはクリッカブルマップを通常通り記述するだけです。 <img src="powerpuff-girls.fw.jpg" width="1024" height="768" usem

Add Shine - a jQuery Plugin 単色のエレメントを立体的に美しくできるjQueryプラグイン「Add Shine」。 次のような単色ベースで味気ないページを、このjQueryプラグインを使って初期化してみます すると、次のようにゴージャスなグラデーションで立体的に美しく、手のかかった風のサイトにすることが可能 $(element).addShine() のようにしてエレメントに輝きを与えるわけですね 関連エントリ Photoshopのグラデーションツールの操作感でCSSグラデーションを作れるツール テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 ストックしておくと楽できそうなPhotoshop用グラデーション392種類 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル

Macでウェブ制作に携わる人全員に伝えたい、Windows, Linux, Mac OS Xのさまざまなブラウザでの表示確認ができる無料のMac OS Xアプリを紹介します。 Boot CampやParallelsなどは必要なく動作します。 Sauce -App Store Sauce for Mac -Website Sauceは、約100種類のブラウザとOSの組み合わせでブラウザの表示確認ができるOS X用のアプリケーションで、簡単に起動・操作ができます。 Windows用のIE6/7/8/9/10をはじめChrome, Safari, Firefox, Opera、iPhone4/5/6, iPad4/5/6, Android4なども揃っています。

中心箇所を選定 画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。 HTML HTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。 <div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div> div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。 クロップする箇所を指定するには、classを追加します。 <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> 右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。 CSS まずは、ベースとなるスタイルシートです。 * { marg