デザインの引き出しを増やしておこう！最近のWebサイトで見かけるデザインの新しいテクニックのまとめ
新しいデザインを見かけるとワクワクしますよね！ 2017年も半年が過ぎ、さまざまな新しいデザインを見かけるようになりました。最近のWebサイトで見かけるデザインのテクニックとその使い方を紹介します。 3 Essential Design Trends, July 2017 3 Essential Design Trends, June 2017 3 Essential Design Trends, May 2017 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダウンページ ナビゲーション ボックスをデザイン要素として使う 垂直のライン 小さいテキストの要素 幾何学的なレイヤー ぼかしを使った画像 スクリーンいっぱいのヒーローイメージは後退 斜めを使ったレイアウト 分かりやすいアクションボタン ダウンページ ナビゲーション ナ
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
Bootstrap Zero
Browse Themes by Tag Preview all themes Resources for Bootstrap Useful links for additional Bootstrap themes, extras and code snippetsOfficial Bootstrap Bootply Playground Bootstrap 4 Upgrade BootstrapBay WrapBootstrap HTML5 Zero StartBootsrap Why Bootstrap? It's no surprise that Bootstrap is the most popular frontend framework. Web designers and developers can leverage Bootstrap to build responsi
バンクーバーのうぇぶ屋
高卒でバカなのに最高に楽しい僕の生き方と守りぬいてきたこと 199.7k件のビュー 自分のやりたい事を仕事にしてる僕らに見られる10個の特徴 125.3k件のビュー 今更聞けない？！WEBデザイナーなら最低限知っておきたい有名フォントの数々 108.3k件のビュー 現代における留学が無意味だと思う5つの理由と、目標とすべき5つのこと 83.4k件のビュー 『海外に住めば英語は出来るように成る』は本当か？５年間カナダに居座った僕が体感したTOEICとかの意味 81.9k件のビュー 英作文に時間をかけるな！英語圏のWEB制作現場でよく使われる英語表現テンプレート集！【メール編】 60.3k件のビュー 超かっこいいタイポグラフィを駆使した映像の数々！息をのむ程魅入った映像総まとめ 47.9k件のビュー チーム間のコミュニケーションを円滑にしたい時に試してみるべきツールやWEBサービス色々 46.
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
FlatなUIが美しいJSレスなUIライブラリ「TopCoat」:phpspot開発日誌
TopCoat FlatなUIが美しいJSレスなUIライブラリ「TopCoat」。 デスクトップ、モバイル対応でレスポンシブ、CSSで作られたUIライブラリです。 Bootstrapよりフラットなデザインが特徴でしょうか。Bootstrapのライバルとなるような物が出てきて、それぞれよい面を取り入れていってほしいですね 関連エントリ フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 BootstrapをベースとしたフリーのUIKit「Flat UI」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TECH PROjin