Web制作
CSSのネスト（入れ子）の使い方｜Sassなしで書ける新常識を解説
CSSに標準搭載されたネスト（入れ子）の書き方を初心者向けに解説。Sass不要で.cssにそのまま書け、つまずきやすい「&」の使いどころや対応ブラウザ、Sassとの違いまでサンプルコード付きでまとめました。
Webデザイン42記事
Web制作
100vhがスマホで見切れる原因と解決法｜CSSのsvh・lvh・dvhの使い分け
height:100vhなのにスマホでボタンが見切れる…原因はアドレスバーの伸縮です。CSSの新単位svh・lvh・dvhの違いと使い分け、コピペで直せる書き方を、長年Web制作をしてきた管理人がやさしく解説します。
Web制作
Webサイトのフォント選び方｜Noto・Helveticaから学ぶ最適なフォント設計
Webサイトのフォント選びで迷ったことはありませんか？Noto FontsやHelveticaなど有名フォントの背景をもとに、フォントの思想と用途別の最適な選び方をわかりやすく解説します。
Web制作
Bootstrapで5カラムレイアウトを実現する方法（標準ユーティリティとカスタムCSS）
Bootstrapで5カラムレイアウトを作成する方法を紹介。12分割システムをカスタムCSSで調整し、レスポンシブ対応の5カラムレイアウトを実現します。
おもしろネタ
【画像】IBMが「街中に設置した広告」のアイデアが最高に洗練されていると話題
IBMが街中に設置した広告のアイデアが最高に洗練されているとツイッターで話題に。アイデアはもちろんですが、シンプルなデザインがまたお洒落でいい感じです。「広告」と聞くと「目障りで邪魔なもの」というイメージをもってしまいますが、こんな広告なら…
おもしろネタ
世界の都市を東京にしたら…！？「世界東京化計画」が面白い
「世界中の都市がもし東京にあったら」というテーマで製作された作品「世界東京化計画（Worldwide Tokyo-lization Project）」を紹介。これらの作品は、石井大五＋フューチャースケープ建築設計事務所がヴェネツィア・ビエン…
Web制作
Photoshop CCで起動時やファイルを開くと強制終了する時の解決方法
Photoshopが起動直後やファイルを開いた瞬間に落ちるときの直し方です。原因はGPUか壊れた環境設定に寄るので、環境設定のリセットとグラフィックプロセッサーの無効化から順に試します。ドライバー更新の手順まで解説。
Web制作
SVGの基本と活用法！リンク設定とカラー変更の方法を解説
SVGのリンクと色の設定を、今のブラウザに合わせて整理しました。リンクはhref属性、色はfillとstrokeで指定します。CSSからの変更、currentColorでの文字色追従、strokeの太さ調整まで実例つきで解説。
Web制作
フォント選びの参考に。Webデザインでもっとも人気が高いフリーフォントは？
Webでもっとも人気があるフリーフォントなど、Webの様々なトレンドについてAvocode 2016 Web Design Reportでまとめられていたのでご紹介。レポートは、PSDのプレビューや書き出しができるツール「Avocode」で…
Web制作
PhotoshopとIllustratorで使いこなす！作業効率を上げるショートカットキー
PhotoshopとIllustratorのデザイナー必見のショートカットキーを日本語でまとめた早見表を紹介。作業効率を飛躍的にアップさせるコツも解説します。