[CSS]セレクタの便利な使い方も学べる、一枚の画像で写真を重ねたように見せるスタイルシートのテクニック
Demo 1 まずは、HTMLから。 HTML img要素をdiv要素で内包したシンプルなHTMLです。 divにclassを付与するのがポイントです。 <div class='stackone'> <img src="image.jpg" /> </div> デモでは下記の画像を使用しました。 Tinkerbell 画像のサイズ：200x130 [ad#ad-2] CSS CSSはステップごとに、説明します。 まずは、margin, paddingをリセットし、bodyの背景カラーをセットします。 * {margin: 0; padding: 0;} body {background: #ccd3d7;} 画像に少しスタイルを加えます。 画像の周りに写真のような縁取りをし、シャドウを加えます。 ※height, widthは画像のサイズに合わせて変更してください。 .stackone {
細部にこだわったUIエレメントをPhotoshopで作成するポイント
ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、
Macで、WiMAXを光ファイバー並のレスポンスタイムにするオモテ技
先日、引越しを機に光ファイバーを解約してWiMAXを導入することにしました。 自宅のネット回線と、カフェなどで作業するときの回線と、iPhoneのパケット通信をまとめてWiMAXにすれば通信費が大きく浮くと思ったからです。 早速、無料のTry WiMAX レンタルに申し込んだところ、YouTubeのHD動画もぎりぎりではありますが再生できるなど速度的に大きな問題は無さそうだったので本契約しました。 しかし、WiMAXをメインの回線として自宅で使っていると、光ファイバーの時に比べてレスポンスタイム（Webページが表示され始めるまでの速度）が遅いことが気になってきました。 そこでWiMAXのレスポンスタイムを改善する方法を探していたところ、費用0、作業時間10分弱でできる設定変更で光ファイバーとほとんど遜色ない速度まで改善する方法を見つけたので、設定方法をなるべく分かりやすくまとめてみました。
ホワイトスペース使ったウェブデザインの考え方
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか？ どんなふうに感じましたか？ この例では、Bのほうに大きな余白を与えました。 ４隅すべて同じぐらい
Adobe Shadowが便利！導入手順をまとめてみた！ (PIXEL LAB)
Adobe Shadowとは まだ、プレビューリリースですが、かなり即戦力なソフト「Adobe Shadow」が昨日公開されました。 ウェブサイトのスマホ対応は、なかなか手ごわいテーマですが、このソフトをつかえば、 Win、もしくはMacのChromeで表示しているウェブサイトを、iOSデバイスや、Androidデバイスにて、 同時に表示してくれます。いちいち、スマホにアドレス打ち込んだり、タップしなくてもOK！チラ見でOK！！ 検証作業のストレスが、圧倒的に軽減されます。 あと、ほかのサイトは、スマホ対応、どうしてるんだろうかといったとき、 Chromeでチェックすれば、デバイスでもすぐに表示されるので、他サイトの検証にも役立ちます。 ちょうどリアルタイムで、スマホ対応で泣いている僕に、希望の光をくれたこのソフトのために、 導入方法を紹介したいと思います。 ちなみに、デバッグ機能もあるの
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Ruby on Railsが簡単というのは嘘 - toyoshiの日記
WinユーザがRailsアプリをこれから公開しようと思った場合 Windowsで学習を開始するのは不可能なのでLinuxをいれる でもWindowsで進めようとしてmsysGitをいれたりするが結局半日無駄にする なぜかgemが最新じゃないと怒られる gemを単純に使っても後から困るのでrvmかrbenvが必要。使い方覚えないといけない やっとRails3.2導入。javascriptエンジンが入ってないので起動しない やっと起動 HTML書いてるのは情弱だけ => hamlを覚える js書いてるのは情弱だけ => coffee scriptを覚える css書いてるのは情弱だけ => scssを覚える テスト書いてないコードはレガシーコードっていわれる しかたないのでRspecいれる => Rspec覚える ユニットテストだけではしかたないといわれcapybaraもいれる => capyb
最近公開された表現力を高めるjQueryプラグインいろいろ
Adipoli jQuery Image Hov... / Sweet Tooltip a jQuery &... / FredHQ - Roundabout for ...他...全7件
既存WEBサイトからワイヤーフレームを生成し、デザインワークに役立てられうブックマークレット「Wirify」:phpspot開発日誌
既存WEBサイトからワイヤーフレームを生成し、デザインワークに役立てられうブックマークレット「Wirify」 2010年12月24日- Volkside | Introducing Wirify: The web as wireframes 既存WEBサイトからワイヤーフレームを生成し、デザインワークに役立てられうブックマークレット「Wirify」 専用ソフト等は一切必要なく、ブックマークレットに追加するとページをワイヤーフレーム化してくれます。 たとえば、New York Times は下図のようにワイヤーフレーム化できます。 既にレイアウトの仕方はWEBに出尽くしているはずなので、想像するサイトデザインに類似のサイトを見つけてワイヤーフレーム化し、そこからリデザインし、デザインを作るというような効果的な活用法が考えられますね。 当ブログもやってみると次のようにワイヤーフレームにすること
月額980円のさくらVPSを個人用に使い倒す - ゆーすけべー日記
Webサービスの運営用にVPSと呼ばれるバーチャル・プライベート・サーバを借りることは昨今よくあることだと思います。 VPSのサーバを借りればroot権限を持てることになるので、自由度が高いサーバ環境を構築することができます。 また、スペックによって価格が違っていて、低いスペックなものだと月額かなり低価格なものが存在します。 僕はその中でも月額980円のさくらVPSを借りていて、それを個人用に限って使っています。 これから紹介するような用途であれば980円でもかなりいけます。 ちなみに980円コースのスペックは2012年3月現在で以下のようなものです。 メモリ: 512MB HDD: 20GB CPU: 2Core(仮想) gitリモートレポジトリ 僕が現行で行っているWebサービスでもiPhoneアプリ開発でもバージョン管理は必要になってきて、 そのためのプライベートなレポジトリが欲しく
デザインでテクスチャを効果的に使う5つの実用的なテクニック
5 Awesome Techniques for Using Textures in Your Designs [ad#ad-2] 下記は各ポイントを意訳したものです。 背景としてのテクスチャ オーバーレイとしてのテクスチャ モックアップのためのテクスチャ イラストのためのテクスチャ テクスチャをテキストに当てはめる 背景としてのテクスチャ テクスチャを効果的に使うポイントの一つは、繊細です。テクスチャを使用する際は基本的には、コンテンツから気を散らさないようにします。 例をみてみましょう。ここにシンプルなアートワークがあります。 このテクスチャは釣り合いがとれていません。コンテンツから気を散らせ、カラーもマッチしていません。 このアートワークにマッチするようにテクスチャを変更します。 テクスチャのサイズを縮小し、カラーを調整し、微妙なグラデーションを適用しました。 背景としてのテクスチャ
JavaScriptのthisの扱いが難しすぎる件 - Islands in the byte stream (legacy)
[再々追記] (o.f = o.f)()の結果は右辺値・左辺値というルールで説明できるようです。コメント欄参照のこと。 [/再々追記] [再追記] これの解釈はどうすれば…。 [/再追記] [追記] ([o.f][0])() -> o.f は ([o.f, "a"][0])() とすると分かりやすいが、単にレシーバがArrayになっているだけらしい。 また (o.f)()と(tmp = o.f)の違いはブコメで指摘されているとおり、 o.f が (C++的な意味での)参照を返すと考えると理解できる。 [/追記] だれかこの現象を説明できる人はいませんか。私には難しすぎます。 In node: #!/usr/bin/env node var o = {}, tmp; o.f = function() { console.log(this.toString()) }; o.toString =
今月ダウンロードしたフリーフォントまとめ - かちびと.net
特にネタも無いのでダウンロードした フォントをまとめておきます。好みの テイストじゃなくてニーズに合わせて ダウンロードするので一貫性があまり 無いですが、その辺は適当にスルーし てください。 殆ど英語です。順不動。 Linden Hill 有名なRalewayを産んだフォントファウンダリと同じところのフォントです。数字が可愛い。ライセンスはOFL。 Linden Hill GOVERNOR レトロなフォントを排出するファウンダリの提供するフォントの一つ。可視性が高くて好きです。商用利用も無料。ライセンスはDLしたファイルに同梱されてます。 GOVERNOR Rex こちらはフリーフォントを中心に扱うファウンダリの提供するクールなフォント。商用でも無料ですけど、Webフォントで利用する場合はファウンダリへのリンクが必要です。 Rex Villa Didot こちらもレトロな感じ。多分使う機
Aaron Beall - Fireworks Guru - Panels
Path Panel 5.1.33 new Glyphs1.0.18 new Layer 1.0 new Export 1.0.6 Objects 1.0 Pattern & Texture 1.1 Text 2.0 Brush 1.0 Document1.7 updated Filters 1.3 updated Web 1.2 updated Group 1.0 Mask 1.0 Modify 2.1 updated 3D Rotate 1.2 updated Rename 1.0 Paths 2.2 updated Extrude Paths 2.0 Path Points 2.1 updated DOM Inspector 0.3.4 Object Panel 0.2.3 Selection Sets Panel 0.1.2 Fireworks! Panel 0.3.3 Arc T
Sublime Text
Effortlessly Split Panes and Navigate Between Code With the new Tab Multi-Select functionality, tabs become first-class citizens in the interface. A simple modifier when performing actions will split the interface to show multiple tabs at once. Works with the side bar, tab bar, Goto Anything and more! What’s New Sublime Text 4 is packed with new features and enhancements, including: GPU Rendering
Dreamweaverの全角・半角変換拡張機能 | バシャログ。
チャンピオンズリーグ決勝を見るために頑張って起きましたが、眠気のため後半途中で撃沈した sakai です。 お客様から原稿をもらったら、半角カナ、全角カナが入り混じり、数字も半角だったり全角だったり。機種依存文字も使われてたー！ なんてことがよくあるかと思います。 今回は Dreamweaver で全角・半角や機種依存文字を一括変換できる拡張機能をご紹介します。 こちら 全角・半角変換拡張機能 CS3 用とありますが、CS5.5 でも問題なく動作しました。 こんな感じでダイアログが出て、変換をすることができます。 これまでは秀丸のマクロを使って一括変換をして、それから Dreamweaver にコピーして… という手順を踏んでいましたが、この拡張機能さえあれば作業を Dreamweaver に一本化できるので、ありがたい！ 是非お試しください。
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
Dreamweaverの使い勝手をちょこっとだけ底上げしてくれる拡張機能5つ | バシャログ。
チーム内のももクロ旋風が留まるところを知りません。 まだメンバーの顔と名前覚えきってないんだけどそんなこと言えないhakoishiです。がんばります。 さて、本日はDreamweaverの使い勝手をちょこっとだけ底上げしてくれる拡張機能を5つほどご紹介します。 Zen Coding これはもう、いわずもがなですね。コーディング効率大幅アップ。 下記よりDreamweaver用のファイルを選択してDLしてください。 Downloads - zen-coding 閉じタグコメントを挿入 「コマンド」メニュー⇒「閉じタグコメントを挿入」で閉じタグコメントを自動で挿入してくれます。 ID・classも自動的に拾ってくれるので、構造のチェックにも便利。 コメントを生成して挿入するDreamweaver用の拡張機能を作成しました Dreamweaver CS5 Validator 「結果」パネル⇒「バ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebStorm指南書
ドット絵描く楽な方法見つけた！気がする