私が最も苦手としているウェブデザインについて。少しでも楽に綺麗なデザインを実現するためのメモです。
HTMLでの段組みは、フレックスボックスを利用する(floatは古い)
今さらなにを…。と言われそうですが、HTMLでの段組の組み方について。 以前は、float:leftなど、ボックスを回り込ませて段組みを作っていました。しかし、各ブロックの文字量によって、高さが変わってしまったり、一番右側に隙間ができてしま...
Webサイト作成スキルの、最適な学習カリキュラムについて考えた
スクールでWebサイト作成技術を教えていることもあって、Webサイト作成スキルの学習には、どんなカリキュラムが一番効果的なのか?ということはよく考えます。
WordPress&レスポンシブデザインで、map areaタグを使う方法
HTMLでは、画像内にリンクを作ることができます。クリッカブルマップやイメージマップと言われるものです。リンクの領域は画像内の座標で指定できます。デモはこちら。 ところが、最近のウェブサイトの主流はレスポンシブデザインです。画像が縮小してし...
デザイン初心者がまず知るべきこと
先日、初めて「デザイン概論」の講義を受けました。1.5時間ほどの講義で、必要なことがコンパクトにまとめられた素晴らしい講義でした。 黄金比、三分法、配色。この3つを知っておくだけでも、デザインの多くの部分を理解できます。講義のエッセンスを、...
スマホ時代のブログデザインへ 変更点と狙い
先週から、わかったブログのデザインを変更しました。 ウェブ業界は大きく変わりました。スマホからの流入がPCを上回るようになりました。 旧デザインは5年以上前に自前で作ったもので、スマホ対応はプラグインで行っていました。金属疲労的なことが色々...
一番簡単な、Googleモバイルフレンドリー対応の方法
2015/4/21 より、ウェブサイトがモバイル対応しているかどうかが、モバイル検索のランキングを決定する要素となります。 Google 検索 - モバイルでの検索がさらに便利に 私が運営しているサイトのアクセスを調べてみると、どのサイトも...
ソーシャルボタンの設置で気をつけるべきこと
Facebook Like Button / FindYourSearch ツ...
ブログの挿絵用のカッコイイ画像を無料で探せるサービス
Free Rainbow Party Parade Balloons Salt ...
Amazletのデザイン的な問題点と対策について
おそらく、ブログ界隈で最も利用されているであろう二大ブログパーツ「Amazlet...
シルエット写真の作り方
最近、プロフィール画像を自分のシルエット写真に変更しました。意外と良い感じなので...