CSSで2カラムを作ってみる - kojika17
CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい
[JS]ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるスクリプト -Stackbox
demo: video YouTubeの動画もさまざまなアニメーションで表示できます。 Stackboxの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjqury.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../build/css/stackbox-docs.min.css"> </head> <body> ... <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../build/js/stackbox-docs.min.js"></script> </body> Step 2: HTML まずは、モーダ
商用利用無料！再生紙のようなやさしい感じのざらっとした紙のテクスチャ素材 -Rice Paper Textures
Seamless Rice Paper Textures ダウンロードできる素材のフォーマットは、2種類。 .png (すぐに使う用） .pat (Photoshopのパターン素材) どちらもシームレスに、継ぎ目無く利用できます。 紙は全部で12種類、どれもいい感じの風合いです。
片手間のJavaScriptから脱出するためにこれからのWebエンジニアが理解すべきこと - Qiita
はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプリのクラッシュと比べて、あまり多いとは思いません。むしろ、一昔前に比べてかなり改善しているという認識です。iOSのバージョンが古いとかでなければ、現状でも十分ユーザビリティの改善につながっているでしょう。 しかし、この問題の結構大部分を占めているのは個人的に
WordPressショートコード共有！過去記事リンクをデザインしてSEO対策とPVアップ
ブログ内での過去記事リンクは、訪問者にも役立つし内部リンクとしてSEO対策にもなります。今回はURLのみで簡単にサムネイル付きリンクを生成できる高機能ショートコードを紹介します。 ゆめぴょんです。こんちはっ(^^)/ 内部リンクは関連記事を読者に紹介するだけでなく、SEO対策としても注目されています。その理由は外部リンクによるSEO効果が、以前より弱くなっているからです。 内部リンクの種類や方法については、下記事にまとめていますので参考にしてください。今回は下記事で紹介しなかった、記事内での過去記事リンクについてです。 ちなみに上の過去記事リンクは下のように書いてるだけです。自動でサムネイル画像もつけて、記事下・サイドバーの人気記事一覧には重複表示されなくなります。記事直下に過去記事一覧も表示されます。 [html] ［nlink u=”http://wispyon.com/navigat
スキマ時間で新しいスキルを学べるLynda.com
たいていの人はなにか得意なことがあるはずです。しかしそこにもう一つスキルを付け加えることができると、二つのスキルの相互作用でさらに飛躍できます。 たとえばプログラミングはいくらか知っているけれども、そこに簡単なデザインスキルを付け足せたらアプリの開発がスムーズになる。あるいは写真ツールの扱いに加えて動画編集を学べばコンテンツに幅ができるといったようにです。 そして多くの場合、この「もう一つのスキル」は入り口のハードルさえ乗り越えることができるなら、すぐに自分で深めてゆけます。忙しい日常のなかに、この最初のハードルを越える仕組みを取り入れることができるかが鍵といえます。 自分も動画編集やCreative Cloud Photoshopのスキルといったように、中途半端にはできるものの、まとまった知識を手に入れたいと思っている分野がたくさんあります。 そこで最近登録して愛用しているのが Lynd
インスタグラムの新たな使い方！タグ付け機能を活用した、IKEAの斬新なオンラインカタログ | PR EDGE
Case: Instagram Website 総合家具ブランド・IKEAでは年に1度、若手デザイナーを起用した「PS コレクション」を発表しています。今年は『Always on the move』というコンセプトのもと、都会に住む若い世代をターゲットにした斬新で遊び心溢れる作品の数々を製作しました。 今回はその「PS コレクション 2014」のプロモーションの一環として、インスタグラムのタグ付け機能を活用したデジタルカタログを作りました。 IKEAアカウントのメインページには、『テーブル』『収納』『テキスタイル』など、家具の種類別に写真が掲載されています。気になるカテゴリを選んでタップすると、そのカテゴリに属する商品の写真が表示されます。 例えば『テーブル』をタップすると、様々なテーブルの写真が表示されます。そのひとつひとつに商品名がタグ付けされており、さらに商品毎にアカウントページが用
UIの学習のために生まれたUI | UXデザイン会社Standardのブログ
UIには本来のサービスが成り立つ上で必要な機能に基づいた必須UIの他に、その必要機能についてユーザーに学んでもらうための学習用UIというものが存在します。本来であればサービスに必要なのは必須UIのみだったはずですが、リリース後やリリース前の段階においてユーザビリティテストを行なった結果があまり良くないのであれば改善をすることになります。しかし、UIのどこに課題があるのかの分析と改善には時間がかかり、実装などでも工数が発生することも考えると、より少ない手間で解決する方法が望まれます。今回は、このようなユーザビリティ上の課題を解決するために生まれた学習用UIのパターンをご紹介します。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 使い方を学習するためのUIパターン もし新規のユーザーがサービスのコア機能の使い方がわからなければ、サービス自体を利用してくれな
【保存版】作りたいイメージ別！ランディングページ 「デザインの指南書」 | LISKUL
どうすれば「リッチな」印象のページになる？ ランディングページの製作時、デザインを「こんな印象のページにしたい」というのはあっても、いざ「どんな配色で」「どんなフォントで」「どの程度の派手さで」を決めるとなると、一体どうやったら自社のターゲットに適したデザインに仕上がるのか分からない！ ということはありませんか？ 今回は、「可愛らしい」「真面目で冷静な」「先進的な」「信頼感のある」といったイメージ・印象ごとに、適した配色・フォント等デザインを実際のサイトを例に出してご紹介します。 あなたの「こんな印象を与えたい」という思いをデザインにするとこうなる！ というのを具体的にまとめていますので、デザインの方針を立てる上での参考にしてください。 ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
