メインビジュアル、キービジュアル、タイトルバナーとか呼ぶのでしょうか。 WEBサイトのメインになるイメージ画像のデザイン集。メインイジュアル制作の参考に。 サイトイメージを端的に表現したもの、コンバーションに直結しそうなものを中心に集めてみました。
position:sticky;とは 一般的にスクロールに応じた要素の固定といえばposition:fixed;を使ったり、jQuery(JavaScript)などを使用してスクロール位置を取得してアレコレするイメージですよね。 そんなときはposition:sticky;を使ってみましょう。CSSのみでスクロールに応じて固定・固定解除ができるようになります。relativeとfixedの中間のような値です。 ブラウザ対応状況 残念ながらIE・Edge・Operaは非対応 ブラウザ対応状況はCan I useから確認すると、IEとEdgeとOpera Miniは全滅、Chromeはバージョン56から、Androidは5.0から対応。モダンブラウザに絞れる案件なら普通に使えそうなCSSですね。 デモ・ソースコード 言葉で説明しづらいのでサンプルページを作成してみました。まずはこちらをご確認く
WordPressのテーマファイルも目を離すと、便利になり、とんでもなく進化しています。企業サイトやプロダクトのランディングページ、ポートフォリオ、個人ブログなど向けに制作されたWordPressのテーマファイルを紹介します。 WordPressは、11/14にメジャーアップデートとなる4.9のリリースが予定されています。おそらく5.0ではGutenbergが実装されるので、それへの足掛けとなるのでしょうか。 Sydney デモページ ビジネス向けのWordPressのテーマファイル。レスポンシブ対応で、ヘッダやコンテンツやナビゲーションなどのレイアウトは多くのカスタマイズが用意されています。ランディングページ用のコンポーネントは組み合わせて利用できます。 Hestia デモページ ランディングページをはじめ、Eコマース、ブログなど、多目的用のWordPressのテーマファイル。Mater
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね! ↑私が10年以上利用している会計ソフト! 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
Web、アプリを制作する上で無くてはならないワイヤーフレーム作成ですが、普段どのようにして作っているでしょうか。紙にそのまま手書きしたり、ドローソフトを使って作ることもできますが、専用のツールを使えば効率的に作ることができるのでオススメです。 最近では、無料のツールも沢山あり、手軽に使えて便利な反面、どのツールを使うか決められないという方も多いのではないでしょうか。 今回は、ワイヤーフレーム作成ツールの中から無料で使えるものをまとめてご紹介します。 これまでワイヤーフレーム作成に時間がかかりすぎていた方、良いツールをお探しの方はぜひ参考にしてみてください。 無料で使えるワイヤーフレーム作成ツール10選 1.Justinmind Prototyper http://www.justinmind.com/ インストールして使用するタイプのツールです。分かりやすい操作方法で誰にでも使える設計とな
[ + expand ]美しいフォントとはフォントの種類ゴシック体 vs 明朝体Web フォント総称ファミリーfont-family の設定例フォントのサイズフォントの色フォントの文字間隔フォントの行間まとめ関連記事美しいフォントとは 昔から Windows のユーザでしたが、初めて Mac のフォントを見たときの衝撃は今でも忘れられません。Windows と比べて Mac のフォントの美しさは際立っていました。その美しいフォントは "ヒラギノ" と呼ばれ、Mac の中心的なフォントのひとつで、これ以上に美しい日本語のフォントは見たことがありません。 Windows と Mac ではフォントのレンダリング方法が異なるため、今日に至っても Windows のフォントが美しくない問題は解決されていません。しかし、Windows は Vista 以降から "メイリオ" と呼ばれるフォントが収録さ
Whether you’re designing a social application, a music player, a content editor or need a detailed map, Zondicons has every icon you will need. Icons that you can trust for the job. Icons play a necessary role on the user interface. They help bring meaning, provide comfort and familiarity, but also create a voice. It’s important that they are non-intrusive enough to not take away from the core exp
今回は見出し(h1〜h6タグ)のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
Is this content up to date? Your content is due for an audit — please review.
どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか? CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です(例:data-tooltip="…")。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えないそうで、.whole(全体)、.half(1/2)、.three-quarters(3/4)のように直感で分かるような人間に優しいclass名にしているそうです。また、.twelve、.sevenといったclass名でも使えるそうです。この辺りは好みとは思うのですが、始めて使いはじめる、という場合はとっかかりやすい気はしますね。ライセンスはMIT。 Pills
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
最近DMM英会話をしている人のツイキャスを見るのが趣味のうららです。 LIGMOのセブヤンとナッツがツイキャス配信を始めたのですが、上司が苦戦しながら勉強している姿を見るとニヤニヤしますね。コメントでチャチャを入れるのが日課となりつつあります。みなさんもぜひチェックしてみてくださいね。 平日は毎日放送するよ!録画もしてるのでぜひ〜♡ 【平日20:00〜20:30】『TOEIC255点の挑戦 #セブヤン英語』@sebu_yan 【平日20:30〜21:00】『ナッツの #チャライングリッシュ 』 @nuts612 pic.twitter.com/QyVTuwWAvF — さえりぐ (@saeligood) 2015, 6月 25 さて、私は最近とあるランディングページ制作に関わりました。 (ちなみに、ランディングページとは1枚で商品やサービスを訴求するウェブページのことで、「LP」とも言いま
Result jQuery//最初以外を隠す $('#faq .answer').not(':first').hide(); //クリックイベント $('#faq .question').click(function() { //スライドの処理 if($(this).next('.answer').is(':visible')) { $(this).next('.answer').slideUp(300); } else { $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300); } });css.question { padding:5px; font-weight:bold; font-family:Arial; font-size:14px; border:1px solid #ddd; ba
今まで出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックを紹介します。 Solved by Flexbox Solved by Flexbox -GitHub 各コードの対応ブラウザは、Flexboxを使用しているため下記の通りです。 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ コードのライセンスはMITライセンスです。 「clearfix」「overflow: hidden」から卒業 高さが分からないフッタを常に最下部に表示 高さが分からない要素を天地左右の中央に配置 レスポンシブ対応の3カラムをシンプルなコードで実装 Flexboxを使った柔軟なグリッド 入力フィールドとボタンの高さを揃えて、くっつけて配置 「clearfix」
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く