2019年5月16日 CSS Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ ↑私が10年以上利用している会計ソフト！ CSS Shapesとは CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？ 通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロ
最近Netflixで化物語見直してるんですけどやっぱすごすぎる。 放送当時はちょうどフォトショ買いたてでロゴを真似してつくって遊んでいました。 で、今ならCSSだけで表現できるのでは、と思ったのでチャレンジしてみまみた。 完成サンプル 化物語のロゴについて 化物語ロゴのフォントは新宋体が使われています。 物語シリーズのロゴにはいくつかのパターンがありますが、基本は新宋体に傾斜をつけて、グラデーション光彩です。 webフォントで新宋体を使うこともできますが、今回のサンプルでは明朝体を使用しています。 HTML <div class="bmg-wrap"> <span class="kanji">化</span> <span class="kana">バ</span> <span class="kana">ケ</span> <span class="kana">モ</span> <span c
デザインには流行り廃りがある。Webデザインの世界においても同様だ。流行したデザインが必ずしも良いとは限らないが、デザインのトレンドを知っておくことで足並みをそろえることができるし、そこに新たな発見があるかもしれない。また、場合によってはWeb制作にうまく盛り込むことにより、効果的なサイトにできる可能性も高い。進化の進むWeb業界においては、トレンドを知っておくことは重要なことなのだ。今回は、2015年において多く取り入れられたWebデザインをいくつかピックアップしてみた。 スクロール型とボタン型を取り入れたハイブリッドなサイト。会社紹介がサックと読める使用になっている。数年前から取り入れられてきた手法であるが、まだまだ縦スクロール型のWebサイトは衰えを見せない。ページの設定には、主にボタンでページを移動して閲覧させる方法と、スクロールさせて1ページにまとめる方法とに分けられる。 1ペー
Webページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。 HTML5で作成する時の必要最小限のテンプレート スタイルの正常化・リセット グリッドをつくるスタイルシート CSS3アニメーション HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低限の配
Web関連およびアプリケーション、映像関係、静止画素材、自動処理、4K/8K/ハイビジョン素材関連などを扱っています。 誤字脱字等、お気づきの点がありましたら、お気軽にメールをください。 この目次にないアプリケーション等の使い方などに関してはその他のリファレンス／アプリケーション...のページを参照してください。
HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低
更新日: 2017年09月26日公開日: 2015年06月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方に
こんにちは、ブランディングチームのジョンです。 ぼくは10年近くコピーライターをやってきて、何社か経験もしてきました。Web制作を本業とする会社はLIGが初めてなのですが、この業界に身を置いてひとつ気づいたことがあります。それは、Web制作におけるコピーの価値の低さです。 ※あくまでもぼく自身の日々の中で感じたことなので、以下の内容は個人的な意見になります。 なぜ、そう感じたのか。 いくつか理由はありまして、ひとつは「コピーは原則としてクライアントにいただく」こと、もうひとつは「だからコピーライターがいない」こと、さいごに「コピーの賞はいまだにグラフィックとテレビCMが盛ん」なことです。 1. コピーは原則としてクライアントにいただく いま進めているWeb制作案件のお見積もりに、「コピーライティング費」は入っていますか？ 入っていないケースは意外と多いのではないでしょうか。 なぜか？ それ
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
自分が頻繁に活動しているSNSを挙げるなら、「Twitter」「Facebook」「Google+」の3つです。 世間一般でも、この3つが主流なんじゃないですかね。統計とか取ってないですけど、なんとなく、感覚的に。 さて、この3つのSNSではカバー写真とプロフィール写真を自分好みの画像に設定できます。 しかしながらサイズがバラバラ。それぞれのサービスで最適な画像サイズが違うので、設定するのに手間が掛かるというのが玉に瑕。 そんな面倒な作業が少しでも楽になるように、今日はそれぞれのサービスで設定できるカバー写真とプロフィール写真について、最適なサイズをまとめました。ぜひご参考にどうぞ。 ※当記事は2015/01/29時点での情報になります。 Facebook プロフィール写真 最適な画像サイズは、180 x 180ピクセルです。正方形でOK。 表示されるサイズは、PCで160 x 160ピク
「デジタル人材の育成」が企業の成長を加速させる。 e-Learningからハンズオン研修まで幅広く対応する法人向けサービス。
![Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ab30e2329cc1549a46525bef7d0686d8dca4b79/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fprog-8.com%2Fimages%2Fogp%2Fdefault.png)
同品質のJPEG画像と比較するとファイルサイズを約半分以下に縮小できる新しい画像形式が「BPG」で、FFmpegやJavaScriptだけで動くLinux「JSLinux」などを開発したFabrice Bellard氏が開発した画像形式です。ただサイズが軽いというだけではなく、グレイスケール・YCbCr＝4:2:0・4:2:2・4:4:4・RGB・YCgCo・CMYKなどの色空間をサポートし、アルファチャンネルや可逆圧縮にも対応しています。 BPG Image format http://bellard.org/bpg/ BPGが他の画像形式と比べてどれくらい優れているのかを比較できるのが以下のページ。2種類の画像形式で同程度のファイルサイズの画像を表示させており、「mozjpeg」とBPGとで同じ画像を比較すると、BPG画像の鮮明さが際立ちます。 BPG Image Comparison
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ども。ナカムラです。 今回はいつもの「やたら上位に食い込みたがるディレクターズマニュアルの記事」と比べるとかなり粒度細かめ。 実際の現場でディレクターがワイヤーを書くその前に「やらなければいけないこと」とその理由について解説してみたいと思います。 ちなみに、お題は「既存コンテンツありのリニューアル with Word Press 案件」と仮定してみます。 さて、ワイヤー書く前にディレクターって何やればいいんでしょうね？ とりあえずサーバー周りの情報整理 WordPressに限らず、どんな案件でもまぁ必須。なんかしらCMSを乗せる場合であれば間違いなく事前に確認しておかないと大怪我するアレですね。 とりあえずLAMP動くかどうか？とセキュリティ系の情報くらいは整理しときます。 この辺の情報は1枚のドキュメントにまとめといたほうが後で楽かもですね。 既存のページ調査 リニューアルであれば、まず
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
