Webサイトの定番レイアウトパターン6選【サイドバーデザインも！】
Webサイトのレイアウトの種類はたくさんありますが、定番のレイアウトはだいたい決まっています。昔から2カラム、固定サイドバー、固定ヘッダーなどがよく使われていて、最近は1カラムを採用するサイトが増えてきました。 そこで今回は、Webデザイナーがサイトのレイアウトを考える上で、最低限押さえておきたい代表的な6つのパターンについて、それぞれの特徴とメリット・デメリットを解説します。 目次 すっきり見せられる1カラムデザイン 回遊率を上げやすい2カラムデザイン 3カラムデザインなら情報量を増やせる 画像メインのサイトに！カード型デザイン 見せたいコンテンツが決まっているときは固定サイドバー 固定ヘッダーで直帰率を改善 まとめ すっきり見せられる1カラムデザイン 画像引用元：http://pas-pol.jp/ 1カラムはサイドバーのないレイアウトです。スマートフォンサイトではサイドバーを配置しに
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
Advanced Custom Fieldsの使い方
目次 中々の大作になってしまったので目次付けときます。 ↓目次を表示する まえがき KoToRiは最近まで「Custom Field Template」を愛用していました。 使い方を詳しく説明した記事も書きました。詳しく書き過ぎて見てくれた人にコメントで注意もされました笑 Custom Field Templateの使い方[WordPress] でも最近『Advanced Custom Fields』に乗り換えました。 理由はいろいろあるのですが一番の理由は編集画面に表示されるフィールドが見やすいからです。 管理画面をなるべく使いやすくカスタマイズするという事に重きを置くようになったのです。今更ですが。 でも調べていくうちに『Advanced Custom Fields』の柔軟性にビビりました。 みなさん、このプラグインが無料なのは凄いことです！ なので『Advanced Custom F
gulp 日本語リファレンス | js STUDIO
このサイトについて gulpの日本語リファレンスです。 gulpのGitHub内のドキュメント(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 はじめに gulpをグローバル上にインストール $ npm install --global gulp プロジェクトのdevDependenciesにgulpをインストール $ npm install --save-dev gulp プロジェクトのルートフォルダにgulpfile.jsを作成 var gulp = require('gulp'); gulp.task('default', function() { // デフォルトのタスクのコードをここに書きます }); gulpを実行 $ gulp デ
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
『失格人間ハイジ』を生き方に悩んでいるすべての人に読んで欲しい - ゆとりずむ
こんにちは、らくからちゃです。 この間、ぶらっとネットサーフィンをしていたらこんな記事を見つけました。 100億の中には、諸々の関連事業の売上も含まれているようですが、結構前から愛用していたアプリがちゃんと利益を出せるようになっているのは中々嬉しい話です。でも、それより嬉しかったのは、はてブのコメント欄。 『失格人間ハイジ』がちゃんと評価されてる(´Д⊂ｸﾞｽﾝ 私、この作品がすごーく好きで、いつも更新を楽しみにしているのですが、comico内での評価はほぼずっと鳴かず飛ばずなんですね(´・ω・｀)。 [まとめ買い] ReLIFE（comico） 作者: 夜宵草 メディア: Kindle版 この商品を含むブログを見る なんかは、アニメ化まで決まったというのに、こっちは未だ書籍化の話すらなく・・・。もしかして、読んでいるのは私くらいなのかな？とちょっとしょんぼりしていたのですが、これほどまで
日本の伝統色 和色大辞典 - Japanese Traditional Color Names
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
【VIP】webディレクターだけど、初心者に役立つサイト教える てんこもり。
1: 以下、＼(^o^)／でVIPがお送りします 投稿日：2015/02/06(金) 17:42:31.05 ID:flJZIImcH 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
【Guide】スマホサイトの作成・基本編
こんにちは（・∀・） スマホサイトを作ると言ってもいろいろとあります。 例えば、既にあるWebサイトをPCサイト・スマホサイトに対応させる、一からPCサイト・スマホサイトを作る、PCサイトはすでにあるので、スマホサイトを別に作ってPCサイトとJavaScriptなどを利用して振り分けるなどなど... ここではHTML5+CSS3を使って、一からPCサイト・スマホサイト(iPhone・Android)を作る方法についてご紹介していきたいと思います。 HTML5でスマホサイトを作るときの基本 HTML5でページを作成していきます。HTML5についての詳しい解説はHTML5・ページ作成の基本をご覧ください。 今回はPCサイト・スマホサイトを一つのHTMLで作りますのでPCサイトも考慮してHTMLを組んでいきます。 なお、スマホサイトの横幅はリキッドレイアウトで指定して可変レイアウトにします。スマ
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
英作文に時間をかけるな！英語圏のWEB制作現場でよく使われる英語表現テンプレート集！【オフィス編】 | バンクーバーのうぇぶ屋
例えば、カナダで郵便番号と言えば『V6E 1G6』のように、6桁の文字と数字で表現するんですが、電話で『郵便番号を教えてください。』とか言われる場面に遭遇する事はよくある。ましてや英語初心者の内は特に『V』と『B』の区別なんて付かない場合も多いですよね。 その時の話を例に取ってみます。 例えば、『V6G 2V3』を説明する場合、 V as in Victor, Six, G as in Golf, Two, V as in Victor, Three. （V6G 2V3） といった具合ですね。 オフィスで使用頻度が高い表現色々 では、続いて体感的にオフィスで使用頻度が高いなーと思うからご紹介していきます。 メールの返信が遅れた場合はシンプルに最初にこの表現です。”the”を忘れない様に。 メールの返事が遅れてすいませんでした。 Sorry for the late reply. Make
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ごりゅご.com
Webアクセシビリティが無視されすぎで気にくわない。
トップページ - ソフトウェアテスト・第三者検証ならウェブレッジ
Loading...
https://cssnite.jp/lp/lp27/CSSNiteLP27-s6-matsuda.pdf
Webサイトの横幅まとめ - ULTRAZONE