A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team
3月29 #JSオジサンで Source Map について話してきました JSオジサンという名前からしてダメそうな感じのイベントでLTしてきました。 内容については azu さんのまとめ(→ JSオジサンで現在のJavaScript ASTについて発表してきた )を見ると良いと思います。 LT5分なのに時間オーバーしたあげく枠のおかわりまでしてすみませんでした…。 おっさんたちが集まってわいわいLTするゆるふわイベントだと思って、 最近ちょっと触った Source Map の話でもするかーと思って申し込んだら予想外にガチ勢が多くいたため、こりゃもうちょっと資料ちゃんとしないと駄目かなと思ってページ増やしたら時間足りなくなってしまいました。 楽しいイベントだったので次回以降もあるならば、予定があえば参加していきたいです。 発表資料 カテゴリなしの他の記事
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
【2015/07/22追記】 現時点の最新版(ver 44.0.2403.89)で確認したところ、表題の問題は解消されておりました。 まだこの問題が確認される場合はChromeが最新版になっていない可能性がありますので、一度ご確認ください。
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
CSSを使ってボックスを画面全体に表示させたいとき、通常は［height:100%;］と指定するだけなのですが、なぜか思いどおりの高さにならず、1時間近くもハマってしまいました。 ウェブ制作者ならば誰もが一度は陥るであろうこの問題の解決策を、個人的な備忘録も兼ねて紹介します。 例えば以下のような html があったとします。 <html> <head> <title>ボックスを［height:100%;］で画面全体に表示させる方法。</title> <body> <div id="main"> <h1>親要素の高さに合わせる</h1> 親要素の高さに合わせるには親要素に具体的な高さが設定されている必要がある。 </div> </body> </html> ここで <div id="main">〜</div> の高さをウィンドウのサイズに合わせたいとき。 一見すると body 要素の高さがウ
ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。 そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 グラデーションを重ねる 単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。 HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。 .hero { height: 100vh; background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat; }
絶対に必要となることを挙げると HTMLの知識 CSSの知識(特にfloatについて理解している) 既存のテンプレートファイルはだいたい読める 既存のテンプレートファイルにHTMLを書き加えられる レスポンシブウェブデザインの仕組みを理解している HTMLとCSSを習得しようという気持ち これらを持ち合わせていない人は手を出さない方がいいと思います。 STINGER5を3カラムにするということ自体の難易度は、ゼロからWEBサイトを作るのと大差ないレベルです。HTMLとCSSの知識とレスポンシブウェブデザインの理解が必須となります。 僕はSTINGER5のPHPは元のまま生かしてますけど、HTMLは一旦消してから書き足してるので、そういうことができないとここまで大がかりなことはできないと思っておいてください。 あと、出来れば子テーマを作って作業していくことをおすすめします。そうしておけばST
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
コーディングを自身でやることは少なくなってきたけれど、勘が廃れないように今でも時々デザインしたり、コーディングしたりってのも大事にしてます。たまにデザインやコーディングをするのは気分転換にもなるし、新しいテクニックを知っておくことだってまだまだ大切だと思うし。 今の僕は、作る仕事はできる限り任せる立場だと思うので、あくまでもやり過ぎない程度に、って考えてますけど。というわけで、最近覚えたスニペットまとめ。 レスポンシブでサイトを作ることが増えています。 予算やスケジュール、または技術的な問題など、レスポンシブで構築するのが難しいケースもありますが、今の僕はできる限りレスポンシブ優先で考えたいと思っています。 ワンソースで考えたほうが運用は効率的だと思うから。 Writing Modeは僕にとってレスポンシブデビューだったサイトで、今思うと「こうしておけばよかった」ってところはいっぱいありま
14. bootstrap/ ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── dist/ ├── fonts/ ├── grunt/ ├── js/ ├── less/ └── package.json 15. less/ ├── .csscomb.json ├── .csslintrc ├── alerts.less ├── badges.less ├── bootstrap.less ├── breadcrumbs.less ├── button-groups.less ├── buttons.less ├── carousel.less ├── close.less ├── code.less ├── component-animations.less ├── dropdowns.less ├── forms
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit
こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継承をおさらい。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位です。 em(エム) 文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。 まずはpxとemをおさらい pxとemについてのわかりやすい説明はこ
1,293 文字 2014/02/28 更新日 css カテゴリー 21 フィードバック Warning: time() expects exactly 0 parameters, 1 given in /home/ho2/hayashikejinan.com/public_html/wp-content/themes/hayashikejinan.com/inc/sns.php on line 31 0 tweets 0 likes 0 plus 10 bookmarks アイコンフォント、便利ですよねほんと。もう使わずにはいられない体になってます。 近頃はソーシャルアイコンも充実の一途を辿り。 しかしながら、ソーシャルボタンでもよく使われるはてなブックマークは日本人が対象。 アイコンフォントに含まれているわけもなく、自力でどうにかしてみよう！ということで。 考え得れた手段 自分で作って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
