まだfloat使ってるの？ フォームのレイアウトはFlexboxで超簡単に実装できる
CSSレイアウトが捗るFlexbox、もう使っていますか？ ページ全体のレイアウトのような大掛かりなところよりも、今回紹介するフォームのような小さなところから試してみると便利さを実感できるかもしれません。 HTMLフォーム作成はWeb開発において避けては通れないものですが、その作業が楽しいことはまれなことです。幸いなことに、CSSのFlexboxを使えばこれまで困難だったことでも解決できることがあります。 Flexboxを使用せずに、フォームの一般的なコーディング方法を考えてみます。次のようなフィールドをHTMLでどのようにマークアップしますか？ たいてい次のようにマークアップしますね。 <div> <label for="name">name</label> <input id="name" name="name" type="text" /> </div> <div> <label f
CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。
簡単すぎてびっくり！CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介
Webデザインを行う際に、複数の閲覧デバイスを想定してデザインを行うのは今では当たり前になっています。オンラインでのWebページの閲覧の4分の3はモバイルなので、モバイルでも快適に閲覧できるように、デザインを考えていかなければなりません。 Webデザインで段組を行う手法はさまざまありますが、現時点で最も手っ取り早いのはCSSグリッドを利用する方法です。CSSグリッドは見た目の段組を想定してコーディングできるので、より直感的な段組を行うことができます。 そこで今回は、CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介していきます。何かと概念的なCSSグリッドですが、ここでレスポンシブ対応するにはどうすればよいか、まとめておきましょう。 CSSグリッドでレスポンシブデザインを実装しよう イメージ画像 floatやflexboxのような「1次元」レイアウトに対して、「2次元レイア
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
全ての人が知っておくべき 見やすい資料をつくるための9つの黄金テクニック - ひつじの雑記帳
スライドやポスターなどの資料作成において一番重要なものは「内容」です。しかし、それに並ぶくらい「デザイン・レイアウト」も重要となります。見づらいデザインのせいで、せっかく長時間かけて仕上げた資料が台無し...なんてことも十分にあり得ます。 あなたは読み手に優しい「見やすい資料」を作れているでしょうか？ 今回は、全ての人が知っておくべき見やすい資料をつくるための9つの黄金テクニックを紹介します。これから紹介することは資料作成だけでなく、Webデザインにも応用できるはずです。ブログやサイトを運営している方もぜひ参考にしてみてください。 スポンサードリンク 目線の動きを意識したZNの法則 矢印や番号を使うと尚良し 強弱をつけて読みやすくする 適度な余白・行間を持たせる 見えない線を常に意識する 彩度の高すぎる色彩は使わない 色が持つ意味を考えて使う 色が持つイメージの例 極端な大きさの文字を使っ
Webサイトの文言、それでいいの？ もっとよくするために、デザイナーができること。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。つばきファクトリーでは、りさまる推しです！ さて、みなさんがデザインを担当するWebサイトで、文言をつくるのは誰ですか？ Web業界では今のところ、「ディレクターがざっくりとした文言のアウトラインを考え、くわしい文言はお客さまに支給していただく」というやり方が一般的ですよね。 でもわたしは、この現状をいつもちょっと残念に感じています。サイトの目的を叶えるための機能を担う要素として、言葉もビジュアルと同じくらい大切で、機能する言葉を考えるのは、デザインと同じかそれ以上に専門的なスキルが必要なことだと思うんです。それをすべてのお客さまにお願いするのは無理がありますし、その結果として機能しない文言になってしまったら、それは制作側にとってもお客さまにとってもユーザーにとっても残念な結果ですよね。 デザイナーあるあるでいうなら、「仮の文言を使っていい感じにレイアウ
サイトのメインビジュアルに悩んだときに参考にしたい！11個のレイアウト手法 - Hatsuka
最近のwebサイトは、トップのスライドショーや、1画面にドーンとメインビジュアルがあるものが当たり前になってきています。 メインビジュアルを作るのが苦手な私ですが、ある程度レイアウトのセオリーを知っておくことで、少しは苦手意識が払拭できるのかなと思っています。 ということで今回は、11のレイアウト手法を元に、参考サイトを33個ピックアップしてみました。 1.反復 同じモチーフを繰り返し置くことで、強調させる手法です。 サイズや色を変えてたり、コマ撮りっぽくすることで、リズム感が出ます。 商品やロゴ、人物など、なにか強調したいものを見せたいときに使えます。 Life is electric SAKUZAN｜美濃焼のうつわ 作山窯 good design company 2.対比 2つ以上の要素を、同じ構図や分量で配置する手法。 情報に優劣をつけず等しく見せたいときに使えます。 webではメニ
クリエイティブな1ページレイアウトを集めた「50 Beautiful One-Page Websites」
TOP > Design , WebDesign > クリエイティブな1ページレイアウトを集めた「50 Beautiful One-Page Websites」 伝えたい情報を1Pにまとめた縦長の1ページレイアウト。メニューなどは存在しますが、基本的には上から読んでいくような構成でユーザービリティに優れた簡潔なWEB構成となっています。今回紹介するのはそんな1ページレイアウトの中でもクリエイティブなものを集めた「50 Beautiful One-Page Websites for Inspiration」です。 Nigel Evan Dennis, 2014 様々な業種業態の1ページで制作されたWEBページが全部で50集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Café Frida 背景と動きが印象的な1ページレイ
【レスポンシブ対応】複数のブロックに分かれたリストを１つにまとめる | バシャログ。
ここ最近、Huluでは「メジャー」、「ダイヤのＡ」と野球アニメを見続けている kouraku です。おかげ様で、今年の甲子園はいつも以上に楽しんでみることができました。 さてさて、フロントエンドではレスポンシブ対応が当たり前になってしまったので、毎回毎回「あれ、どうするんだっけ？」と悩まないようにちょっとずつメモ書きを残していこうと思います。ということで、今回は複数ブロックに分かれたリストを1つにまとめる方法をメモメモ。 ※ここでは、768px以下はSP用レイアウトとして扱います。 複数ブロックを1行1列に 例えば下図の様なことをやりたい場合。 ※ここでは、横並びのスタイルは float で当てます。inline-blockでもよいのですが、SP用の書き換えを少なくするため、ここでは float を採用しています。 上図の様に PC から SP へとスタイル変更するには、 floatしてい
レスポンシブな3カラム・レイアウトの変形パターンを考える
ウェブサイトで3つのアイテム（製品ラインとか製品の特長とか）をフィーチャーしたい場合、ふつうに3カラムのレイアウトを使いますよね？ですが、いくつかの条件を満たしつつレスポンシブに対応しようとすると結構難しかったりします。 2つでもなく、4つでもなく、どうしても3つのアイテムをフィーチャーしたい。 4カラムだとデスクトップサイズでも各アイテムが小さすぎるし、2カラムだとデカすぎる、みたいな。やっぱり、デスクトップサイズでは3カラムがちょうど良い場合もありますよね。 そんな時どういった対応ができるのか、ちょっと考えてみたいと思います。 レイアウトの条件 たとえば、以下のようなレイアウトの条件があったとします。 どの画面サイズでも表示を隠さない（コンテンツ・パリティ） アイテムの扱いは極力平等にしたい（コンテンツ・プライオリティ） あえて優先順位をつけるなら、左から1、2、3番の順 誘導用のキャ
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
明日また来てください、本物のExcel方眼紙をお見せしますよ - aike’s blog
「俺はェスァイ」 「SIって？」 「お客様のビジネスに最適なソリューションをインテグレートするんだ」 「でたっ、富士通っぽいことば！！」 「標準機能を組み合わせたパッケージは使いにくいからだよっ！！」 ドス、ドス、ドス、バッ 「この仕様書を作ったのは誰だあっ！！」 「Excelの文書がなにかございましたか」 「なぜセルをこんなに細かくした！！計算など必要のない連中がスプレッドシートを使うからだ。馬鹿どもにExcelを与えるな」 「ははっ」 「そんなことを言うからには、文字やフォームを任意のグリッドにレイアウトできて、顧客も当然のように文書ファイルを開けるソフトウェアがいろいろあるんだろうな」 「ぐぬう」 「Excel方眼紙は帳票デザインが大きな割合を占める日本の業態に即したものなんだ」 「とはいえ俺も一般的なExcel方眼紙が最良とは思わない」 「みなさん、明日またここに来てください、本物
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
ウェブデザインの基本原則からPhotoshopの実践的なテクニックまでが学べる無料のeBook -Pixel Perfect Precision
思わず、これ無料なの？！というくらいの充実した内容、そして美しいレイアウトで構成されたウェブデザインのテクニックが学べるeBookを紹介します。 ウェブデザイナーをはじめ、ディレクター・アートディレクターなどウェブデザインに携わる全ての人に役立つと思います。 iBookにも対応 内容は、簡単に言うとノンデザイナーズブック（Amazonで見る）のウェブに特化した感じで、完璧な精度のピクセルにどのようにデザインするかがテーマになっています。 ページ数は全部で165ページ、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の内容になっています。 テキストは英語ですが、各ページキャプチャ付きなので、デザインの知識が多少あれ
黄金比ってWebではどうなの？～三分割法と黄金比の話～｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは。毎日暑いですね…。猛暑日が続き、いよいよ夏バテがやってきそうです。夏はイベントも多く外に出たくなりやすいですが、外出の際はこまめに水分補給をしましょう！私はビール補給を毎日したいです。 さて、今日は美術やデザインを学ぶ中で一度は聞いたことはある『三分の一の法則(三分割法)』と『黄金比』について書こうと思います。皆さんはこの法則を意識してデザインをしたことがありますか？ 三分の一の法則とは？ まずは三分の一の法則について。 イラストや写真、文字などの要素を１つのエリアにレイアウトするとき、画面の中を分割するようなイメージでそれぞれの範囲に役割を与えると、受け手に情報が伝わりやすくなります。例えば、「写真のエリア」「タイトルのエリア」「説明のエリア」といったイメージです。このように3つの要素を配置する際に、三分の一を意識してあげると、全体的にまとまった印象になります。 上図のように
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
構図とレイアウト
新着記事