これからのCSSレイアウトはFlexboxで決まり！FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ 対応ブラウザーCan I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に -webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。IE10 にも対応していますが、書き方が少し変わって
まず初めに、 サイトメーカーでは画像の縮小表示を行いますが、その際に適当な数値を入力すると、必ず画像が歪んで しまいます。 この「画像サイズ計算機」を使用すれば、縦・横のどちらか一辺の長さを入力して「計算」ボタンを押すだけで、 元画像の縦横比に合わせた最適なもう一辺の長さを、計算し表示します。
TL;DR テスト環境、本番と同じ環境にサイトを置いたときに確認しておきたいことってなんだろう。公開後のクレームやトラブルを防いだり、サイト公開・納品前にサイトの品質を上げるためにチェックしておきたいことをまとめました。大切だけど意外とチェックし忘れそうな内容を知りたいとき、過去の失敗をもとに作成したシートを公開します。 機能 要件定義をもとに指定の機能が実装済か確認します。 項目 解説
<head>タグ内にある、<link rel >ですが、近年<meta>より重要になりつつあるのようですので、SEOに効果がありそうなlink要素を探してみました。 link要素とは？ こんにちは、マメボーです。 本日は、link要素についてご説明します。 ブラウザーを右クリックして「ソースの表示」をクリックします。（IEの場合） これが我がページのソースでございます( ´∀`) 英語がごちゃごちゃ書いてますが、 これがHTMLで検索エンジンなどはこれを見ています。 みなさんが見ている部分は、 <body>から</body>の部分でここがデザイン部門です。 そして、上の方にある＜head＞から＜/head＞ここが本で言うと 表紙にあたる部分でソースを見ないと見えませんが非常に重要な部分なのです。 この部分は、<title>、<meta>、そして<link rel>で構成されています。 <t
PC・スマートフォンの両方のWebサイトを運営されている方は必見です。 中身は同じでも違うURLを使用している場合、検索エンジンに重複コンテンツ(同じ内容のページが複数あり偽装されていると思われるケース)とみなされてしまうことがあります。 これが検索結果の順位に影響する可能性もあるので、未然に防ぐためにも以下に挙げる項目にしたがって適切に処理しておくのがおすすめです。 PC用Webページで設定すること 検索エンジンにモバイルサイトを認識してもらうため、PC用Webページのheadタグ内に以下のように記述します。 <head> <link rel="canonical" href="PC用WebページのURL"> <link rel="alternate" media="handheld" href="スマートフォン用WebページのURL"> </head> ※「スマートフォン用Webペー
どうも。某サイトのクオリティにがっかりしてる松本です。 これからは自分らしく普段通り書いていこうと思いますので宜しくお願い致します。 さて、今回はPhotoShopの画質変換・圧縮についてです。 ニアレストネイバー法、バイリニア法、バイキュービック法でのリサイズと、保存時の圧縮率パーセンテージ別、更に写真の特徴なんかとを比較すると何か新しい発見があるかなぁとふと思いましたので検証してみます。そもそも、それ何？という方も、簡単な説目を書いておきますので合わせてご覧ください。 それと「プログレッシブ、プロファイル、カラーマネージメント」なんかが複合的に絡むとややこしいので割愛。 一番シンプルなアルゴリズムなんじゃないでしょうか？ 変更前の座標と、変更後の座標を、ピクセル単位で計算し移動させ、そのピクセルに対して変更前の色を割り当てる。 ドットをそのまま拡大、縮小する ような感覚で
こんにちは。LIGブログ編集部です。いつも「時間が足りない！」「忙しい」「寝たい……」と思っているWebデザイナーの皆さん、Photoshop作業の時間短縮をしていますか？ Photoshop作業の効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Webデザイナーさんならぜひ使ってほしい、Photoshop作業を効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、時短できる要素がないかぜひ確認してみてください。 1. ショートカットを使い倒そう 作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。 ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「Photoshopの効率化におすすめのシ
縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツールです。※2015.11.10 分割表示されないエラーに対処しました 使い方 画面の赤い点線で囲われたエリア部分に画像ファイルをドラッグ＆ドロップすると、画像の長さを計算して自動的に折り返すように複製して配置されます。 スライダーまたは数値を入力して画像の幅を調整、また画像の位置を個別にドラッグで動かして調整してください。 画面左下の印刷ボタン、またはブラウザのメニューから印刷を行ってください。 画面左下の×ボタンはページをリロードして表示をクリアします。その際、画像幅の設定値は保存されます。 対象ブラウザ Google Chrome 最新版 対応画像形式 jpg,gif,png,svg 紹介記事 WebNAUT
縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he
赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名 戻る 実例 画面サイズ： ウィンドウサイズ： 例文 <p>画面サイズ：<span id="ScrSize"></span></p> <p>ウィンドウサイズ：<span id="WinSize"></span></p> <script type="text/javascript"> //画面サイズの取得 getScreenSize(); //ウィンドウサイズの取得 getWindowSize(); //画面サイズを取得する function getScreenSize() { var s = "横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height; document.get
Photo by ぱくたそ こんにちは。イントリックスの中井です。 入社して３か月経ちましたが、つい最近も会議等で話についていけない！言いたいことが伝わらない！ということがありました。 特にWebの業界用語はカタカナが多いこともあり、どの言葉がどの範囲まで示す言葉なのか、わかりにくかったりしますよね。 自分の頭の中にあるイメージを関係者に伝える必要があるけど、自分の言い方では伝わらない！Web制作の人が何を言っているのかイマイチ理解できない！ そんな疑問やモヤモヤを抱いたことのあるWeb担当者へ向けて、今回Webサイトデザインにおける「トンマナ」について紹介したいと思います。 Webサイトのデザインで感じる印象・雰囲気のモト：トンマナとは？ Webサイトのデザインを見て受ける印象・雰囲気と言っても、「これとこれ似ているな～」と共通点を感じたり、「すごいシンプルだなぁ」と思ったり、時には「暑
どんな業態やサービスであってもホームページを持つことは当たり前になり、ビジネスだけでなく個人の利用も考えると、その役割は多岐にわたります。 そのため、一概にホームページと言っても目的に応じたコンテンツや指標を設定することが重要です。 理解が足りないことが原因で、ホームページを制作した結果、目的と内容が相違してしまったなんてことも少なくありません。 今後、新たにホームページを新設しようとお考えの方であれば、目的を理解することで、ホームページの成功はどこにあるのかが明確になり、運営する側や制作する側もブレることが無くなるでしょう。 今回は、ホームページのジャンルとジャンル別の指標についてまとめました。 ホームページのジャンルとジャンル別の指標 1.商品サイト http://kaming-diet.jp/campaign/rt11/ 新発売であったり商品の説明が必要なもの、商品をアピールしたい場
1年以上前の記事です。内容が古い可能性があります。 最近では、僕がWebディレクター職になったことと、新人にプログラミングもできるシステム系の人材が入ったことで当社でもWeb製作が分業化されつつあります。 （デザイナーはたくさんいるので問題なし） 中でも一番効率がいいのは3人体制だと思うわけです。 以下、下記記事の中に僕の言いたいことがだいたい書かれているので引用させていただきます。 □Web制作の分業化がもたらすもの | WWW WATCH 今回のリニューアルでは、主に社内のスタッフ 3名でプロジェクトを組みましたが、今回のリニューアルを担当させてもらって、今更ながら Web サイト制作の現場において、「分業化」という流れが作業の効率化と制作物のクオリティを両立させる上で今後重要なファクターになっていくであろうことを実感しました。 2005年の記事なんですけどね。 印刷会社のWeb部門は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く