こんにちは、めぐたんです。 今回もコーディングの効率アップに欠かせないプラグイン「Emmet」の使い方をご紹介します。HTMLに引き続き、CSSの入力も効率化してみましょう！ 関連記事 Emmetって何？という方は、前回の記事をご覧ください。Emmetのインストール方法やHTMLの省略記法、便利なカスタマイズについて書いています。 Emmetでマークアップを効率化しよう（HTML&カスタマイズ編） Emmetでマークアップを効率化しよう（CSS編）←本記事 基本の使い方（CSS編） では、まずはどんな風に効率化してくれるのか簡単な例を見てみます。Emmetの使い方自体はHTMLもCSSも同じで、省略記法を記述してTabキーで展開！です。 例えばこんなCSSを書きたいとき。 display:block; font-weight:bold; width:100px; margin:30px a

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; を適宜指定する。 フォ

株式会社つみき UI/UX事業終了のお知らせ 拝啓　時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com

【引用】Directus Inc.　2014年　企業から配信されるメールのスマートフォンにおける受信状況アンケート調査報告 全体の約3割の人がメールの閲覧において「スマートフォンファースト」であることが分かりました。主にPCで見ている人も加えると9割以上の人がメールをPCとスマホの両方で見ています。一方で「パソコンのみで見ている」と答えた人の割合も増加しました。 いずれにしても企業がPC向けメールを配信する際には、PC・スマホ両方で閲覧されることを想定することはもはや当たり前の状況と言えそうです。 『パソコンでもスマートフォンでもどちらでも見やすく表示させたいけど、パソコン用のメールとスマートフォン用のメールを2本制作し続けることは運用コスト的に難しい。』という時には「レスポンシブhtmlメール」がひとつの対策としてオススメです。弊社でも昨今制作の依頼が増加しているレスポンシブhtmlメー

最近のメール事情 メール閲覧環境の多様化 2015年にエクスペリアンジャパンが出した『BtoC市場におけるメールマガジン受信デバイスの利用実態レポート』には、以下のように記されています。 スマートフォンやタブレットなどのモバイル端末の加速度的な普及や高速データ通信LTEの普及は、メールマガジンの受信環境にも劇的な変化をもたらしました。今やモバイル端末でのHTMLメールの受信・閲覧は当たり前になったと言えるでしょう。 このように、HTMLメールはPCだけでなくモバイル端末でも閲覧されるように変化してきています。 メールの閲覧環境は、以下の3つのタイプに分類することができます。 デスクトップ（Outlook, etc.） モバイル（iPhoneのネイティブアプリ, etc.） Webメール（Yahoo!メール, Gmail, etc.） さらに、Yahoo!メールやGmailに関しては、スマー

仕事でHTMLメールを作る機会があったんですが、メーラーは種類が多く、各メーラーによって実装状況にかなり差があるので、多くのユーザー環境で正しく表示されるHTMLメールを作ろうと思うとなかなか面倒でした。 しかもレスポンシブとなると、通常のwebページでいうクロスブラウザ対応の比ではないほど気を使うことに。。 なので、やったことをここにメモしておきます。 後々、会社のブログで記事にするつもりだけど。 基本的なつくりかた レスポンシブという言葉の響きで、なんかモダンな作りができそうだなーと思ってしまうけど、結局は下記のような昔ながらの作り方をしなくちゃいけないです。 tableレイアウトでコーディング。 これでやらないとOutlookでまともに表示できない。 インラインスタイルでCSSを記述。 <style>タグに対応していないメーラーが多いため。 また、前述のとおり各メーラーで動作に差異が

れこです。 Hamee Advent Calendar 2015 2日目の記事です。 「明日使えるフロントエンドと作業効率化の備忘録」とか銘打っておきながら、 フロントエンドの記事を書くのはものすごく久々な気がします。 フォームやinput周りを扱っていると、毎回小さな機能を作るたびググって毎回使用するライブラリや実装が揺れてしまうので、 2015/11/24現在での決定版を調べてまとめて備忘録にします。 まえおき 当記事で紹介するライブラリ、コードを全部まとめたデモを作りました。 記事と内容を読みつつ、具体的なコードはデモをご参照ください。 記事内にはコードはほとんど書きません 。デモがあるのと、READMEの内容をコピー&ペーストしてもすぐ情報が古くなるためです。 また、ライブラリを採用する場合には以下の採用基準で選んでいます 使いやすい、拡張しやすい（一部妥協有り） Githubでホ

Bruno Profile Work 制作の方針について Brunoが生み出すWebサイトは、文章や写真を活かすためのデザインをご提供します。訪問者へアピールするためのコンテンツがメイン。この意識のもと、適切な見せ方を追求しながら制作しております。 制作料金 基本WordPressサイトの制作となりますが、ご希望に合わせてHTMLの静的サイトの制作ももちろんお請けさせていただきます。また、デザインだけやコーディングだけといった制作工程単位でのご依頼も対応しております。 よくある質問 BrunoのWebサイト制作では、できるだけクライアント様にご不安を与えることなく、お問い合わせ時から制作完了時、その後の運用までサポートさせていただいておりますが、その際によく頂くご質問についてご紹介致します。

パネルをホバーすると画像だけがズームするエフェクト、最近のWebサイトでよく見かけますよね。 実装方法はいろいろありますが、JavaScriptを使わず、シンプルなHTMLで実装するCSSのテクニックを紹介します。 Zooming Background Images 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私はクライアントに、下記のサイトで使っているエフェクトを使いたい、と頼まれました。 Fitbit このエフェクトはパネルをホバーすると、背景画像をズームさせ、クリック・タップすると詳細情報にリンクします。ポートフォリオなどのサイトでよく見かけ、ビジュアル面と情報の詳細を見せる両方で効果的です。 実装には多くの方法があります このエフェクトを実現するには、多くの異なる方法があります。 一つの選択肢として、jQueryのプ

ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク

Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.

CSSアニメーションを使って実装された、レスポンシブや省スペース用の検索フォーム、フル画面に表示させる検索フォームなど、デザインや実装のアイデアが面白い検索フォームを紹介します。

Mozillaは11月10日（現地時間）、Webブラウザ「Firefox」提供10周年を記念して、特別版アップデート（バージョン33.1のマイナーアップデート）と、開発者専用ブラウザ「Firefox Developer Edition」のリリースを発表した。 ▼ITmedia News Firefox生誕10周年──「忘れるボタン」追加アップデートと開発者版ブラウザ » 公式ページにある動画で、その凄さが垣間見れます。 早速インストールし、少し触ってみたところ・・・す、すごーい！(・∀・) あらゆるところが強力です。インブラウザデザインを強力に支援する、正に開発者のためのブラウザ！ さすが純正・専用設計だけあって、スムーズ・高機能・レスポンス良好、もう至れり尽くせり。 レスポンシブデザインビューの幅と、CSSのメディアクエリの当該箇所が直感的に分かりやすくハイライトされ、確認・変更の工数が

2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー

:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。 :target疑似クラスを使ったスタイルシートのテクニックと注意点を紹介します。 The :target Trick :target以外の便利な疑似クラス・疑似要素については、下記のページを参考に。 使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 :target疑似クラスを使って、コンテンツを表示・非表示 :target疑似クラスを使って、ナビゲーションをスライドアウト :target

TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ

CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな