The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
![【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/384feb49f19024293f218545a6a4175e78ec5e35/height=288;version=1;width=512/https%3A%2F%2Fblog.adobe.com%2Fdefault-meta-image.png%3Fwidth%3D1200%26format%3Dpjpg%26optimize%3Dmedium)
2014-10-08 Bootstrapでワンページ(シングルページ)レイアウトする時にスマホ時のグロナビのページ内遷移で広げていたトグルメニューを自動的に閉じるための一行 jQuery WebDev RWD Bootstrap Bootstrapのグローバルナビゲーションは、モバイル時にはデフォルトでは上からするするっと出て来ます。これは、ページ遷移があるときであれば、遷移に伴って勝手に閉じてくれるのですが、シングルページ(ワンページという呼び方で今後統一します)の時には、開きっぱなしになってしまいます。これだと、ユーザーがもういちどあの三本線を押して、自分で閉じなければならないという手間が生じてしまいます。 調べたところ、これを解決するにはたった一行のjQueryコードだけで事足りることが判明しました。 Hide Twitter Bootstrap nav collapse on
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
Photoshop形式のフリーpsd素材を集めた「Free PSD Files: Download 25 UI Design Photoshop PSD Resources」 制作時に非常に便利なソフトの一つとなっているPhotoshop。いろいろな加工や表現が可能で、時にはその表現の幅に驚かされることもあるのではないでしょうか?そんな中今回紹介するのは、Photoshop形式のフリーpsd素材を集めた「Free PSD Files: Download 25 UI Design Photoshop PSD Resources」です。 Bifold Flyer Mockup | Vectogravic いろいろなタイプのpsd形式の素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Brand-Fashion Store Template
ネット広告を活用されている方であれば、誰もが知っている「ランディングページ」という言葉。 ランディングページと言われると最初に思い浮ぶのは、縦長のページという方も多いのではないでしょうか。 ランディングページでは、LPOという言葉に代表されるよう各社のマーケターが試行錯誤を繰り返す一方で、「ランディングページに◯◯の法則を取り入れると効果的」であったり、「ボタンは◯◯色だとCTRが高くなる」などと、まことしやかにささやかれています。 その結果、どれが本当に効果的なのか分からなかったり、中には、鵜呑みにして制作を依頼したものの、どこか代わり映えしない、せっかく制作したのに結果に繋がっていない、という話をよく耳にします。 今回は、論より証拠として幅広い業種で年間100件以上ものランディングページ制作をこなす株式会社FREE WEB HOPEの代表取締役社長 相原氏に「効果の出るランディングペー
レスポンシブ対応の柔軟なグリッドをシンプルに、そして簡単に実装することを目的に制作されたひな形として利用できるスタイルシートを紹介します。 レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。 Ocssipital Ocssipital -GitHub 補足: Flexboxの各プロパティの使い方は、以前の記事が分かりやすいと思います。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Ocssipitalの特徴と使い方 基本のグリッド ビューポートごとにカラムのサイズを変更 カラム間の溝のサイズ、左右どちらにつけるかも可能 デスクトップでは表示、スマホでは非表示の設定も簡単 Ocssipitalの特徴と使い方 MITライセンスで、商用利用、修正、配布、サブライセンスも許可
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川(@maepon)さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く