タグ ページレイアウト
人気順 10 users 50 users 100 users 500 users 1000 usersTailwind CSSの入門に! コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI
Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。 Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。 Preline UI Preli... 続きを読む
ドメインモデルからUIデザインとページレイアウトを行った話|yuki_sasaki|note
この記事は SmartHR Advent Calendar 2019 21日目の記事です。こんにちは。デザイナーの@tyoys00です。 初めてAdvent Calendarに参加します。これで私も立派なIT人材です。 UIデザインってなんだろう?突然ですが、デザイナーのみなさんUIデザインしてますか? してます? では、UIデザインってなにをデザインすることな... 続きを読む
[CSS]メディアクエリとは異なる、レスポンシブ対応のモジュール式コンポーネントの実装に適したコンテナクエリ | コリス
最近ではデザインもJavaScriptもモジュール式のコンポーネント化が進んでおり、HTMLとCSSでも徐々に浸透している流れですが、完全に対応できているとは言えない状況です。例えば、メディア クエリはページレイアウトではうまく機能しますが、モジュール式のコンポーネントを実装するのは難しくなっています。 レスポンシ... 続きを読む
段組みのCSS。
ページレイアウトに段組みはつきもの。Webデザインでは、CSSで段組みを行います。ちょっと前までは“よこ並び”も“段組み”もfloatプロパティひとつでまかなってました。けれど今は、シチュエーションごとにいろんなプロパティが用意されて、うまく使い分けることで、より効率よくページレイアウトができるようになってきました。そんなわけでここでは「段組みするためのCSS」を、従来(いにしえ)の方法から最新(... 続きを読む
Flexboxを使ったページのレイアウトから要素の配置まで、レスポンシブ対応のコードが生成できるツール -Flexible Boxes | コリス
Flexboxを使ったページレイアウト、要素の配置など、レスポンシブ対応のコードが結果を見ながら簡単に生成できるオンラインツールを紹介します。 Flexboxでどんなことができるんだろう、という勉強にもいいですね。 Fl ...記事の続きを読む 続きを読む
最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ | コリス
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェ... 続きを読む
商用利用無料、UIデザインに役立つSketch用の素材のまとめ | コリス
最近のWebデザインで利用されている基本的なグリッド、さまざまなページレイアウト、BootstrapやMaterial Designなど人気の高いフレームワークのUI要素やコンポーネントなど、UIデザインに役立つSket...記事の続きを読む 続きを読む
Webのページレイアウトやコンポーネントのレスポンシブ対応のさまざまなアイデア集 -Responsive Patterns | コリス
29種類のレイアウト、30種類のナビゲーション、画像・動画・地図・テーブル・フォーム・タブ・カルーセルなど、Webページで使用するさまざまなレイアウトやコンポーネントのレスポンシブ対応のパターンをまとめたサイトを紹介しま...記事の続きを読む 続きを読む
[CSS]Flexboxで実装されたグリッドをはじめ、基本となるコンポーネントやページレイアウトのまとめ | コリス
ベースとなる12カラムのグリッド、コンテンツとサイドバー、左寄せ・中央配置・右寄せ、ネストしたコンテンツ、天地揃え、ヘッダ・フッタ付きの3カラムのページレイアウトなど、それぞれをFlexboxを使って実装したレスポンシブ対応のスタイルシートを紹介します。 Responsive Grid with Flexbox Flexboxで実装された各コンポーネントやレイアウトは全てレスポンシブ対応で、デスク... 続きを読む
デザインの参考になる!落ち着いたカラースキームが使われているページレイアウトやUIのPSD素材のまとめ | コリス
サークルやダイヤモンドのエレメント、半透明のパネル、ソリッドなライン、同一色相のグラデーションなど、最近のWebトレンドを使い細部までしっかりと作り込まれたコーポレートサイト、ポートフォリオ、ランディングページなどのペー...記事の続きを読む 続きを読む
便利で簡単!Webサイトのプロトタイプが本当に数クリックで作成できてしまうPhotoshopの無料の機能拡張 -Velositey v2 | コリス
Webサイトのプロトタイプやワイヤーフレームなどに使えるページレイアウトを数クリックで作れてしまうPhotoshop CS6/CC/CC2014対応の機能拡張を紹介します。 今時のコンポーネントが数多く用意されているので、デザインの勉強にもいいですよ。 Velositey v2 Velositey v2とは Velositey v2のインストール Velositey v2の使い方 Velosite... 続きを読む
最近のウェブデザインのトレンドを取り入れたページレイアウトのPSD素材のまとめ | コリス
ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます! BrandaLoka - Creative Onepage PSD Template 斜めのグリッドを使い、ダイアモンド状のエレメントを使った美しいレイアウト。 Free P... 続きを読む
ページレイアウトから各種エレメントまで、勉強用にも最適なフラットなスタイルのPSD素材のまとめ -PSDchat | コリス
ページレイアウトをはじめ、よく使うさまざまなエレメントなど、フラットなスタイルのPhotoshop用のPSD素材をPSDchatから紹介します。 制作にすぐに利用するもよし、勉強用にじっくり見るのもよしの良質素材です。 素材の利用にあたっては個人でも商用でも無料で、クレジット表記は必要ありません。ただし、再販や再配布は禁止です。詳しくはダウンロードファイルの「readme.txt」をご覧ください。... 続きを読む
ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」:phpspot開発日誌
Create.js - A new kind of web editing interface ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」。 起動すると、コンテンツテキストが編集可能になり、ページ上のツールバーを使って太字などの文字修飾ができ、そのままSaveボタンで保存できるという非常に使いやすい編集ツールとして使えます CMS等に実装するといいのか... 続きを読む
サンプルだけでも見ておくべきHTML5のチュートリアル集:phpspot開発日誌
24 Useful HTML5 Tutorials and Examples サンプルだけでも見ておくべきHTML5のチュートリアル集。 ゲームやページレイアウトに関するHTML5のチュートリアル。結構色々な事ができるなというところで一度見ておくとよさそう。 覚えることが多くて大変ですね 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 これは必見のWEBデ... 続きを読む
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン | コリス
2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイトでは左に置くのが多いです。 Uncrunched 3カラム、広いヘッダ BloggerやWordPres... 続きを読む
海外のAmazonを有効活用して安く買い物をしよう! - 裏技shop DD
※ただし、税制は随時変わっていくためVAT分が引かれない場合もあります。 レイアウトが同じ 海外のアマゾン(Amazon.com)以外は、日本のアマゾンとページレイアウトが一緒なので、日本のアマゾンで買い物したことがある人なら、たとえその言語がわからなくても比較的容易に買い物ができます。 思ったより早い これは私の事例ですが、Amazon.esでとあるものを注文した際に3日で到着しました。海外通販... 続きを読む
ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 | HTML5でサイトをつくろう
ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 Category : HTML5でサイトをつくろう | 2011年09月14日 xhtmlとHTML5で簡単なページレイアウトを作成し、コーディングのタグ違い、新要素(タグ)の説明、アウトラインの説明してきましたが、今回が最終でCSSでレイアウトまでを作成させました。 【前回... 続きを読む
電子書籍で複雑なレイアウトを実現する「CSS Regions Module」仕様のドラフトが公開 - Publickey
電子書籍やWebページで、もっと複雑なページレイアウトを実現しようという新たな仕様「CSS Regions Module」の最初のドラフトがW3Cで公開されました。 IDPF(International Digital Publishing Forum)が策定中の電子書籍フォーマットの標準仕様であるEPUB3が牽引役となり、HTML5やCSS3などのWeb標準が電子書籍を作成するための重要な仕様に... 続きを読む
商用利用も無料、ウェブ用のエレメント・ページレイアウト・アイコンのPSD素材の配布サイト -design deck | コリス
ナビゲーション、ボタンなどのエレメントをはじめ、ページレイアウト、アイコンなど、商用でも無料で利用できるウェブデザイン用のPSD素材を配布しているサイトを紹介します。 design deck | Free PSD' [...] 続きを読む
WebサイトをiPhoneに対応させる -レスポンシブ・デザイン- - EC studio デザインブログ
このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン(Responsive Design)に関していまさらながら調べてみたの... 続きを読む
商用利用でも無料のページレイアウトのPSD素材-FreePSDTheme | コリス
Free Ambition PSD HTML版のデモ 余裕のあるスペースに画像を美しく配置したユニークな構造をもったテーマ。 ファイルのダウンロード 各テーマによってダウンロードできるものはPSDやファイル一式(HTML, CSS, JS)など異なります。 ※PSDのみのものは有料でファイル一式やWordPress用のファイル一式もあります。 PSDファイルはレイヤーが保持されたものとなっています... 続きを読む
Photoshopで作成するページレイアウトのチュートリアル集 | コリス
ウェブページのレイアウトを作成するPhotoshopのチュートリアルの紹介です。 チュートリアルでは、PSDファイルをダウンロードできるものもあります(チュートリアルにより無料or有料)。 続きを読む
ウノウラボ Unoh Labs: CSSの管理と記述法のコツ
前回はYUIの紹介でしたが、今回はCSSの管理と記述法について書きたいと思います。 CSSは、主なHTMLエディタなどでは標準で編集できますが、多人数での開発 やスタイルが多くなってくるほど管理が大変になっていきます。 アプリケーションソフトの管理機能もいいですが、CSSコーディング規約のようなものがあると、より把握が容易になるメリットがあります。 サイト基準設定、ページレイアウト、共通要素、個別... 続きを読む