ドットインストール代表のライフハックブログ
やりたいこと なんかよく分からん説明で申し訳ないですが…。 つまりどういうことをやりたいかというと、WordPressのトップページや記事一覧ページなどで画像のサムネイルを表示するときに、画像をいい感じにリサイズして配置したい、ということです。 つまり…どういうことだってばよ…? 画像のリストがある状況 画像でリストを作る感じです。複数のliタグの中にそれぞれ大きさの異なる画像があるという状況。liの幅と高さは400x200pxとします。 そのままリサイズすると…? imgの横幅を400pxにリサイズするとします。例えば800x600pxの画像は400x300pxにリサイズされて、ちゃんと表示されます。 でも、800x300pxの画像だと、400x150pxにリサイズされて、50pxの余白ができちゃうわけですね。 これを解決したいなぁと。 画像が横長の場合 先ほどの800x300px
Bold Drop-Down Navigation Design for Website Layouts Featured Image credit to Oykun Yilmaz If you’ve been designing websites for a while then you must be familiar with dropdown navigation menus. This style of design was popular even a decade or two ago. Except way back when web designers needed to utilize JavaScript for dropdown effects. Now the latest CSS3 enhancements allow for easy coding of ht
週刊Webテク通信 2012年12月第3週号1位は、優れたユーザーインターフェースを作成するためのデザインパターン、気になるネタは、iOS向けGoogleマップアプリ、世界のApp Storeでトップ ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2012年12月10日~2012年12月16日の間に見つけた記事のベスト5です。 1. Design Patterns for Creating Exceptional User Interfaces on the Webhttp://speckyboy.com/2012/12/06/design-patterns-for-the-web/ Web上で優れたユーザーインターフェースを作成するためのデザインパターンについて解説しています。 以下の要
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to c
The quality and availability of WordPress e-commerce themes makes WordPress a serious choice as an online shop platform. In fact, WordPress has moved rapidly from being mainly a blogging platform and is now one of the top CMS systems for traditional websites. Lately,... Welcome to our Website Awards for best free WordPress themes. We are hosting this award to showcase the best websites to visit wh
最近はWEBでもたまに目にする黄金比という言葉、「1:1.618」からなる比率で、最も美しい比率と呼ばれており、このバランスでデザインされたものは非常に、調和が取れたものになるといわれていますが、今日紹介するのは黄金比を簡単にチェックできるシート「GOLDEN SECTION FINDER」です。 この製品は、黄金比を測定できるように黄金比の比率で書かれた長方形が書かれており、現実世界をそのファインダーを通してみる事で、黄金比を確認できるというものになっています。 詳しくは以下 日常の中で利用するということはあまり無いのかも知れませんが、黄金比に則った写真を取りたいというような方には気軽で良い製品なのではないでしょうか? 気になるお値段は10ドルとなっており、カラーバリエーションは全部で4つとなっておりますが、現状販売されているのはブルーとクリアーとなっています。「ODLCO: Golde
We have come up with a list of 16 free grid fonts that you can use in your designs and make them look stunning. Fonts always play a key role in any web design. This is not just about the arrangement of fonts rather it has taken a shape of an art with which designers can communicate with their audience. New fonts are added to the World Wide Web on a daily basis and with such a large number of fonts
DDN は 音楽 ・ 映像 に関する デジタル アート を中心に情報ミックスを配信中
ブラウザ標準のフォームUI(チェックボックスやセレクトボックス)のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります(ここでは擬似フォームUIと呼びます)。 本コラムでは主にスマートフォン向けにCSS3とJavaScript(jQuery)を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。 ※PCではGoogle Chromeのみ動作確認をしています。 第01回目の今回はCSS3を使った装飾と後ほどjQueryで
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
容量1万mAhの「cheero Power Plus」は、ライフハッカー読者からの支持も厚い大容量バッテリーです。これまで取り立ててレビューなどを行ったわけではありませんが、兄弟メディアであるタブロイドがテストレポートしてくれていたので、紹介します。以下、こちらの記事から転載します。 ヤバい。最近、スマホのバッテリーがヤバいくらい減ります。 わたしが使っている機種は初代DIGNO(ISW11K)。薄くて軽いのはいいんですが、購入から1年を迎えたいま、とにかくスタミナがもたなくなりました。 朝、家を出て地下鉄で通勤するあいだ、メールやニュースのチェックでスマホをフル稼働させると、職場につくころにはもうバッテリーの残りが60%以下という世界です...。 平日なら、職場で充電できるからそんなに問題ないです。でも休日に外出する時はヤバい。もちろん、モバイルバッテリーは持っているのですが、1個では足
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く