複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
どうもこんばんは。 初老のデザイナーたあです。 簡潔に書きます。 タイトルを挟む1pxとかの横線を簡単に書くCSSを一生懸命考えてみたので忘備録。 こういうやつですね .title-border { display: flex; align-items: center; } .title-border:before, .title-border:after { border-top: 1px solid; content: ""; flex-grow: 1; } .title-border:before { margin-right: 1rem; } .title-border:after { margin-left: 1rem; } これを線を入れたいとこに入れるだけっす。 こんな感じで <div class="title-border">これ</div> 以上でした。 なお余白の取り方
聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
作成：2016/10/3 Web制作 > 効率よくレイアウトを作成できるように、あまり聞き慣れないけど、今後増えていくであろうプロパティや単位、仕様策定中の新しいプロパティなどについて非常に参考になる記事をチョイスさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 srcset属性 HTML5で策定されたsrcset属性をimageタグに使うと複数の画像をカンマ区切りで指定することができます。「ウィンドウサイズに応じて画像を切り替える」とのこと。必要な画像だけ読み込まれるのでパフォーマンスが向上しそうです。 <img src="foo.jpg" srcset="2.jpg 2x, 3.jpg 3x" alt=""> srcは未対応ブラウザのフォールバック、「x」はデバイスピクセル比（画素密度記述子）、「w」は横幅（幅記述子。○○px以下なら○○w）
Win8.1・Win10のIE11で、游書体(游明朝・游ゴシック)の余白がおかしい！どうする？ ｜ Tips Note by TAM
2016.09.26 Win8.1・Win10のIE11で、游書体(游明朝・游ゴシック)の余白がおかしい！どうする？ 案件で起きたことの覚書です。 案件でのテキスト周りのルールは、 テキストは明朝体で表示する テキストはシステムフォントで表示する（＝Webフォントは使わなくてよい） ボタン等は指示がない限りテキストで表示する だったので、font-familyを以下のように指定していました。 font-family: Century, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; システムフォントで表示するので、Windows8.1、Windows10、Macでは、游明朝が表示されることになります。 流し込みのテキストだとまったく気になりませんが、CSSで作
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
Bootstrapの代わりになるか？超軽量CSSフレームワーク「Spectre」を試してみた
あまりにも定番化しているので「とりあえずBootstrapで」というプロジェクトが多いと思いますが、シングルページのようなシンプルな案件ならもっとライトなフレームワークでもいいかもしれません。 フレームワークはプロジェクトの開発時間を大幅に短縮します。Bootstrapなどのフレームワークはとても人気があり、たくさんの機能を提供していますが、プロジェクトにはそこまで必要ない場合があります。この記事では、Spectreという新しいフレームワークに焦点をあてます。Spectreは軽くて、モダン、レスポンシブ、モバイルフレンドリーです。縮小化およびgzip圧縮された状態でのファイルサイズは約6.8キロバイトです。基本的なグリッドシステムのほか、タブ、モーダル、カードなど、有用でさまざまな構成要素もたくさんあります。 記事ではSpectreの概要を説明したあと、使い始めるのに役立つ簡単な解説をしま
表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法
レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、Flexboxを使わないやり方です。nth-child()とclearを使った方法、inline-blockを使った方法、さらに、flexboxを使った方法の3つをまとめてみました。 レイアウトの条件 レイアウトの条件を整理しておきます。 表示件数が変わる 表示件数が変わる場合でも同じHTMLとCSSでレイアウトする ブロックによって高さが異なる 画面サイズに合わせてカラム数を変える 上の条件だとli要素をfloatしてメディア・クエリで画面ごとに幅を指定すれば簡単にできそうです。ところが、ブロックの高さが変
Autoprefixerの対象ブラウザの選び方
AutoprefixerはCan I Use のブラウザ・サポート情報とStatCounterの全世界のブラウザ利用状況データを参照してBrowserslistの記述に当てはまるブラウザを抽出します。 対象ブラウザ一覧を簡単に確認する方法 Browserslistの記述を入力すると対象となるブラウザ一覧を表示してくれるBrowserl.ist という便利なサイトがあって、2016年9月7日現在、デフォルトの記述で対象になるブラウザは以下になります。 Mobile Browsers Chrome for Android 51 UC Browser for Android 9.9 Android Browser 4.4, 4.4.3-4.4.4 IE Mobile 11, 10 iOS Safari 9.3, 9.0-9.2 Opera Mini all Samsung Internet 4
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
CSSとJSでブレイクポイントがずれる時の処理を使いやすくする
前にCSSと同じpx数をブレイクポイントで指定するとjQueryでずれるという記事を書いたのですが、その中でIE9ではCSSを使ってウインドウサイズを合わせていました。 その処理を毎度ウインドウをリサイズする処理の度に書いていたのですが、タブレットのサイズも含めるとさすがに効率が悪いので使いやすくしました。 HTMLの生成と判定 まずはウインドウサイズ判別ようのHTMLを生成。そこのCSSを調べる指定を書きます。 JQuery $(function(){ var winMode; $('body').append('<div class="winSize"></div>');//bodyの直前に判別用のHTMLを生成 function winSize(){ var winSize1 = $('.winSize').css('display'); var winSize2 = $('.win
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD
CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目
意外と盲点だったCSS3の役立つ小技まとめ - コムテブログ
TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM
「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
dribbbleのぬるぬる動くメニューUIのアイデア10選
アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい
CSSコーディングテクニック : 詳細度、単位、flexbox、mixin | POSTD
(2016/7/15、記事を修正いたしました。) 最近、ビギナーからベテランのデベロッパに至るまで、CSSに手を焼く人を多く見かけます。そうした人たちの中には、CSSの機能を好まず、別の言語を使った方がいいのではないかと考えている人もいます。もともと、CSSのプロセッサもこうした考え方から生まれました。書くべきコードを少なくできることを期待して（ 以前の記事で ご紹介しているとおり、普通はそうではありません）CSSのフレームワークを使う人もいれば、CSSを完全に見限り、スタイルの指定にJavaScriptを使うという人もいます。 しかし、あなたが取り組んでいるパイプラインにCSSプロセッサをいつも取り入れる必要があるとは限りません。どんなプロジェクトであれ、開始の時点から、膨れ上がったフレームワークをデフォルトに取り込む必要はありません。また、CSSを使うところで、代わりにJavaScri
CSSでbr要素みたいに改行する方法
サンプルコード.br::before { content: "\A" ; white-space: pre ; }デモbrというclassを作成しました。下記は対象要素の直前に改行を挿入する例です。直後に挿入するには、::beforeではなく、::afterに指定します。 <!-- このコードは編集できます。 --> <!DOCTYPE html> <html> <head> <style> .br::before { content: "\A" ; white-space: pre ; } </style> </head> <body> <p>われわれは<span class="br">宇宙人</span>だ</p> </body> </html> 備考\Aとは？"\A"は、改行を示すコードです。スタイルシートのcontentプロパティにこの値を加えると、その場所に改行が挿入されます。ち
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
