css基礎 レスポンシブデザインについて | Stronghold Archive
はじめまして、こんにちは。新メンバーのLanともうします。まだまだ、デザイン・技術ともに未熟なのですが勉強・復習もかね書かせていただきますのでよろしくおねがいいたします！ 早速ですが、今回のtips題名の通り・・・ 今更感漂います【レスポンシブデザイン】についてです。 私も、結構前からその存在は知ってはいたのですが、なんとなーくしか理解していませんでしたので、復習という意味も込めて執筆させていただきたいと思います！！ レスポンシブデザインとは、１つのファイルでどんなデバイスにも対応できる手段のことをいいます。 初めは、リキッドデザインと似ていると思いますが、違いはこちらになります。 なお、レスポンシブデザインについて分かりましたので早速構築方法に移りたいと思います。構築方法は、主に３種類です。 ①CSS3のMedia queryを使う 以前のmedia queryについての記事はこちら ②
要素サイズに応じてフォントサイズを自動調節してくれる「FlowType.JS」:phpspot開発日誌
FlowType.JS ? Responsive web typography at its finest: font-size and line-height based on element width. 要素サイズに応じてフォントサイズを自動調節してくれる「FlowType.JS」。 通常は要素の幅を変えると折り返し位置のみがかわりますが、こちらを使えばフォントサイズやline-heightを自動調節可能。 レスポンシブなサイトなどで使うことができそうです。最小・最大のフォントサイズを指定することもできるのえ大きすぎたり、小さくなりすぎたりといったことも防げます 文字の大きさの問題はこうしたもので簡単に解決できますね 関連エントリ リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 タッチができてレスポンシブなカルーセル実装jQuery
指定された大きさを満たすようにいい感じに画像を表示·imagefill.js MOONGIFT
imagefill.jsはJavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。 レスポンシブなWebサイトを構築する際に考えなければならないのが画像などのリソースです。サイズが変わってそのまま縮小すると見栄えがとても悪い場合があります。そこで遣ってみたいのがimagefill.jsです。 デモです。幅が広い場合はこのように表示されます。 幅が狭くなるとこんな感じに。高さは変わっていません。 このくらいの幅がちょうどいいかも知れません。 様々なサイズでのデモ。グリッドで並べたり、高さや幅を色々変えて表示が確認できます。 画面の幅を変更しました。グリッドがいい感じにぴったりと並びます。 さらに縮めてスマートフォンサイズにグリッドの数が変わり、さらに表示部分もダイナミックに変わっています。 imagefill.jsはレスポンシブに対応しており、画面幅を変更す
WordPressの「キャッシュプラグイン」に関するプロフェッショナルな方々のTwitter話が為になりすぎる
以前「ちょっと待て！素人がWordPressのキャッシュ系プラグインをわけわからずに使うと悲惨な目に遭うぞ！」という記事を書いたのですが、それを星野邦敏さんに拾って頂いて、WordPress界の名だたる方々がツイッターで話されていたのを拝見し、非常に濃く有意義な内容なのに基本はメンションなのでほとんど一般タイムラインに流れない会話内容です。 こんな会話がTwitterで終わるなんて勿体ない！ 皆さんが頭を悩ませるWordPressのキャッシュ系プラグインに関して正しい見識を知ることが出来ます。 こういったバックエンドに詳しいプロフェッショナルな方々の声が もっと聞けるといいんですが。 ※今回の記事は会話の主の@miya0001さんにご承諾いただき掲載しております。 事の発端は僕の「Wp Super Cache」を使用したらWordPressが ぶっ壊れた人がいるという記事より。 （以下、T
質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」
TOP > javascript , WebDesign > 質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」 WEBにとってUXはとても重要な要素の一つ。隅々までサイトを見ていただくためにはここがダメだと利便性が悪く、多くのユーザーに不快な思いを与えてしまいます。今日紹介するのはjQueryで質の高いUXを実現するためのjQueryプラグインを集めたエントリー「9 jQuery Plugins for Improving Website Navigation」です。 Intro.js jQueryを利用した様々な仕組みが紹介されています。クリエイティブであれば良いというものではありませんが、斬新な動きだったり、仕組みだったり、工夫を凝らしたプラグインが集められています。今日はそ
Bootstrap | Pixate
Pixate's mission is to reduce the complexity of creating apps and make that process accessible to anyone. Pixate Engine is our free dynamic user interface platform for mobile apps.'Pixate Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier mobile app development. Based on Twitter Bootstrap v2.3.1. Introduction Pixate Bootstrap is based on the popular Twitter Bootstra
140種類に対応！ あらゆる形式のファイルを変換できるウェブアプリ「CloudConvert」 | ライフハッカー・ジャパン
ファイルフォーマットの変換は、控えめに考えても決して楽しい作業ではありません。異なるシステムで作業を行っていると面倒くさいだけでなく、数多くのソフトウェアが必要になる場合も多々あります。そんな時にオススメなウェブアプリが「CloudConvert」。140種類ものファイル形式を変換できます。プロセス自体はとてもシンプル。変換したいファイルをアップロードすると、CloudConvertに変換可能なファイル形式が表示されます。ファイル形式を選択すると、変換されたファイルはDropboxまたはGoogle ドライブに直接保存されます。 ファイル形式の変換をさほど頻繁に行わないという方であれば、CloudConvertで変換作業は事足りるかもしれません。 関連記事：PDFを一発でmobiファイルに変換し、Kindleで読みやすくする「PDF4Kindle」 関連記事：iTunesに取り込めないファ
WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT
HTML iOS NotificationsはHTML/JavaScritp製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOSやAndroidなどのモバイルでは通知機能が便利に使われています。それはアプリに限らず便利に使えるはずです。そこで使ってみたいのがHTML iOS Notificationsです。 デスクトップ版。画面上部に通知が表示されています。しばらく経つと消えます。 複数出すこともできます。 レスポンシブに対応しています。 iPhoneで出す場合は画面幅いっぱいに広がるようです。 Webなので画像やメッセージ、クリックした時のアクションなどは自由に操作できます。スマートフォンに最適化されたWebサイトで使うとまるで本物のネイティブ風になるのではないでしょうか。 MOONGIFTはこう見る HTML iOS Notification
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
魅力的なプレゼン資料や企画書作成のコツ【参考スライドあり】
プレゼン資料・企画書作成の参考になる7つのスライド【パワポやKeynoteでも使える！】 まずは、企画書やプレゼン資料の参考になるスライドをご紹介します。 キレイな提案書を作るためのデザインの基礎知識 → キレイな提案書を作るためのデザインの基礎知識 「プレゼン資料・企画書は内容を伝えるためにあり、デザインはそれを達成するための手段だ」 と考える、筆者の考えが強く出たスライドです。 スライドの中では、フォントの種類や文字の装飾の多用などを避け、「本当に伝えたいことを伝えられるようにするシンプルなデザイン」を強調しています。 「シンプルであること」を目指しているので、難しい操作も必要なく、「良いデザインは、そもそもセンスがないと作れない」と諦めている人におすすめのスライドです。 しょぼいプレゼンをパワポのせいにするな! → しょぼいプレゼンをパワポのせいにするな! 「酷いプレゼンはパワポのせ
PHPレシピ3：スマートフォンとPCで振り分ける 1 [PHP] All About
PHPレシピ3：スマートフォンとPCで振り分ける 1今時のWebサイトは、スマートフォン（スマホ）への対応が必須です。スマホへの対応には、CSSで切り替える「レスポンシブWebデザイン」などの手法もありますが、ここではHTMLを切り替える方法で、しかもPHPを利用することでURLを変えずにデザインだけを変えるレシピを紹介します。 ※ 今回のレシピではiPhoneのみを対象にします。他のスマートフォンへの対応は、次回の連載で紹介します。 材料 ・readfile ・strpos ・$_SERVER ・$_REQUEST 作成時間 15分 作り方 PC用とスマホ用それぞれのHTMLを作成します。 index_pc.html <div style="background-color: #ff6f8d"> <p>PC向けです</p> </div> index_touch.html <div sty
![PHPレシピ3：スマートフォンとPCで振り分ける 1 [PHP] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/431e04353dea6d451f66fb58e78d3277805335aa/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F2%2F7%2F1%2F3%2F8%2Ftopimg_large.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
