CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分

ページのレイアウト、アニメーションをはじめ、エフェクトやフィルターなど、ここ数年でCSSでできる表現の幅がかなり広がりました。 Web制作に携わる人がチェックしておきたい、これからどんどん取り入れていきたいCSSのライブラリを紹介します。 Driveaway -GitHub デモページ レスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。CSSアニメーションを使ったインタラクションも豊富に用意されており、パネルが回転する「Flip」、パネルにフォーカスがあたる「Focus」、鼓動のように動く「Pulse」など、楽しませてくれます。

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

Transcript ϑϦʔϥϯεσβΠφʔͷ � ʮͭ͘ Δ͜ͱɺ ͸ͨΒ ͘ ͜ͱʯ ࣗݾ঺հ ͢Έͩ͋΍͔ ʢ֯ాҁՂʣ 8FCσβΠ ϯˍΠ ϥε τ Ϩʔλʔ େࡕࡏॅɺ ੍࡞ձࣾͰͷ8FCσβΠφʔΛܦͯ����೥ʹϑϦʔϥ ϯεʹɻ ओʹ-1΍αΠ τͷσβΠϯɺ ΠϥετΛ੍࡞͍ͯ͠·͢ɻ ෉ ͱ�ࡀͷஉͷࢠͱ ͏͕͗͞�ඖ͍·͢ɻ Ωϟ ϦΞ͚ͩ͸ ��೥ʹ ɾ ɾ ɾ ࠓ೔ͷ͓͠ͳ͕͖ σβΠϯΛ࡞Δ ʮཧ࿦ʯ ͱ ʮϏδϡΞϧʯ � ཧ࿦ฤ � ϏδϡΞϧฤ � σβΠϯͷઆ໌ฤ ϑϦʔϥϯεͱͯ͠ಇ͘ Θͨ͠ͷ৺ಘ 01 02 ࠓ೔ͷͶΒ͍ ࠓ೔ͷςʔϚ͸ ʮσβΠϯࡇʯ ɻ ʮσβΠϯ͸໰୊ղܾʯ ͜ͷ͜ͱ͹Λͣͬͱ؊ʹ໏͡ ͖͚ͯͨΕͲɺ ࠷ۙͲ͏΋ͬ͘͠ Γ͜ͳ͍ɻ ࠓ೔ͷͶΒ͍ ݟͨ໨͚͕ͩσβΠϯ͡Όͳ͍ɺ Ͱ΋σβΠϯͷத Ͱɺ ͖Ε͍ͳ৭ɺ ͖ͯ͢ͳϑ

こんにちはデザイナーの藤田です。 最近、節約のために毎晩の楽しみである晩酌のビールを発泡酒に変えました。 さて、そんな私は最近コーポレートサイトのリニューアルを担当させていただく機会が多く、その際にお客様にリニューアルの方向性として提示させていただく「参考サイト」のストックがたまってきたので、今回のブログでは「イケてるコーポレートサイト」をご紹介したいと思います。 イケてる国内のコーポレートサイトまとめ ハウスウェルネスフーズ株式会社 http://www.house-wf.co.jp/ コーポレートサイトならではの清潔感や見やすさを担保しつつも、ホワイトスペースを十分にとることで、今っぽいデザインになっています。 ヤンマー株式会社 https://www.yanmar.com/jp/ 企業の先進性をデザインで表現しており、今後このようなデザインがコーポレートサイトのスタンダードになるので

2016年10月27日 Wordpress CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 カスタムメニューの設置 アイキャッチ画像（サムネイル画像）を利用する 検索ワードをハイライト Twitterのユーザー名を自動的にリンクさせる デバイスによってコンテンツ変える 画像を挿入する際、P タグで囲まないようにする 「続きを読む」リンクをカスタマイズ ショートコードを作成 ショートコードをテンプレートファイル内で実行する 古い記事にメッセージを表示する RSSフィードに画像を追加 記事に含まれ

2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって

話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近

display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ

「なんじゃこりゃぁあ！！」 とりあえず、コレ見た時の第一声でした。本当は昨日日本から帰ってきたばかりだったので、セミナー旅行の報告記事書くつもりだったんですが、それより先にこの興奮を伝えるのが先かなと思ったので即刻共有記事〜！ 以前『ヤバイくらい簡単にプロフェッショナルなサイトが作れるStrikingly.com』の記事を書かせて貰いました、これはこれでWEBページを作る上ではこれ以上は無いんじゃないか位の楽さとクオリティでした。 しかし、今回はWEBページというよりは完全にWEBサイトを劇的に簡単に作れるという意味でのヤバさ、あとショッピングカート機能、ブログ、その他様々なページを作って運営することが出来る「Squarespace」をちょっと簡単にご紹介させて頂きましょう！ このサイト自体は僕の記憶が確かなら以前に見たことがある気がするんですが、それにしてもその時はこんなヤバさは感じて無

2017年7月14日 フリーランス, 便利ツール フリーランスとして働いている人は、なかなか他の人の働き方を知る機会がないのではないでしょうか？どんな風に時間管理してるんだろう？どんなツールを使ってるんだろう？などなど、気になるけど、聞くまでもないかな…なんて…。最近そのような、フリーランスの働き方についての質問メールをいくつか頂いたので、フリーランスのWebデザイナーである私の一日を追ってみました（自分で）。いつも業務に使っているWebサービスや便利なツールも紹介しています。ほとんどが無料サービスなので必見ですよ！ ↑私が10年以上利用している会計ソフト！ 5:30 起床 朝は早いです。逆立ちをして（！）目を覚まします。逆立ちなんて相当集中していないとできないので、一気に目が覚めます。 その後Macを開いてメールチェック。メールクライアントはMac付属のMail。すぐ返信するもの、後で返

2013年として最近のフリーアイコンを探すと、どこもかしこも「フラットアイコン」ばかりでしたが、一つここで総まとめしておきたいと思います。 フラットアイコンも、よーくみるとそれぞれ若干の違いや特徴があるんだなと、並べてみるまであまりわかりませんでしたが・・。というわけでして、無料アイコンをお探しの方はチェックしてみてください。 フラット無料アイコン ソーシャルメディアフラットアイコン。 ソーシャルメディア、ブラウザ系の無料フラットアイコン フラットUIアイコン iPhoneアイコン用PSDファイル 各種ファイル用のフラットアイコン1 各種ファイル用アイコン2 フラットアイコン Vol.1 フラットアイコン Vol.2 フラットアイコン Vol.3 フラットアイコン Vol.4 サークルバッチ型の無料アイコン いろんな形のソーシャルメディア用フラットアイコン WebサイトUI無料アイコン 各

数分でウェブサイトを制作する ブランドを確立。世界を制覇。 コードはなし 、デザインのスキルも必要ありません。

CSS3からDIV一個で出来る表現なんかも色々あるんですね。ちょっと前まで超面倒だったボックスのオシャンティーな線の装飾とかぼかしとかグラデになんやらかんやら。DIVボックス一つとっても色々な装飾効果をもたせられるなぁと思う今日この頃。 それこそ、ONE DIVのような一つのDIVで表現できるアイコンを作ってるサイトもあって、CSS3を突き詰めると色々知ることも出来て面白いなぁと思うわけです。 っていうわけで、ONE DIV程凝ったことはできませんが、今日はそんなDIV一個で使えそうなボックスの作り方をいくつかご紹介！擬似要素使ってちょっとちょめちょめしたら縫い付け効果のボックス出来たりと、以外と使えそうなものを選んだつもりなので、一度見てみてもらえると嬉しいです！ちなみに、IEチェックは9だけしてます。8とかはCSSPIE当たりで頑張ってなんとかする方向で…何か変なとこあったら直しますの

作成：2012/12/25 更新：2014/11/01 Webサービス > ちょこちょこっと触っただけで、プロっぽいサイトが無料で作れる 今回はブログじゃないサイトをドラッグ＆ドロップで簡単に作成出来る2012年までに話題となったサービスを用途ごとにまとめました。 使い方をどこよりも詳しく解説してあるサイトのURLもつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．まとめサイトを作る ２．ネットショップを作る ３．ホームページを作る ４．ポートフォリオサイトを作る ５．おしゃれなECサイトを作る ６．全部入り企業サイトを作る ７．コーポレートサイトを作る ８．レスポンシブ対応サイトを作る ９．HTML5サイトを作る １０．ビジネス用無料WordPressテーマ - レスポンシブ対応 １１．デザイナー向けポートフォリオページ １２．ブートストラッ

職種から探す営業・マーケティング・企画・広報事務・コンサル・専門職・その他システム開発・運用Web制作・Webデザインデザイン制作写真・動画・ナレーションライティング・ネーミング翻訳・通訳タスク・作業 すべてのカテゴリーカテゴリーから探すプログラミング・システム開発Web集客・マーケティングビジネス・コーポレートデータデザイン・Webデザイン音楽・ナレーション動画・アニメーション・写真ライティング・翻訳

【Web制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています】 どうもです。いきなりですが、私は毎年この年末から来年の3月末あたりまで、段階的に仕事周りが騒がしくなって来る時期だったりします。決算期の都合もあるんでしょうかねぇ。似たような状況の方も多いのではないかと思います。ほんと、最近依頼が多いです。 ところで、仕事の依頼があるって嬉しいことです。 普段あまり交流のなかった方から突然の依頼や、または、人づてで紹介を受けたりなど。紹介を受けるってことは「仕事ちゃんとしてくれるよ」ってのを認めてもらえた証拠だと思っています。本気でうれしいです。 と、ここで「依頼」についてちょっと掘り下げたいな～と思いました。本題に入る前に、少しだけ前置きにお付き合いくださいますと幸いです。 ・・・「依頼」っていろいろありますね。 「ハマる依頼」