CSS Houdiniを味見する | 株式会社カブク
ソフトウェアエンジニアの畠山です。この度 "CSS Houdini" が気になったので調べてみることにしました。 CSS Houdiniとは CSSは他のWeb技術と同様，標準化が日々進められていますが，標準化にはかなりの時間が掛かります。機能の提案がされてから，仕様をつくり，各ブラウザがそれを実装します。それから，古いバージョンのブラウザの影響を考えて，ようやく開発者は新しいCSSの機能を使用できるようになります。 CSS Houdiniは，CSSの拡張性のために誕生したタスクフォースです。標準化のプロセスを待たずにCSSの機能を拡張したい。開発者コミュニティで新しいCSSのプロパティを作れるようにしたい。そのために必要なAPIを提供すべく仕様を策定しているタスクフォースがCSS Houdiniなのです。 <br> Houdiniの現状 Houdiniのステータスは"Is Houdini
Controlling CSS Animations and Transitions with JavaScript | CSS-Tricks
The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I’ve had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutori
Grid Garden - A game for learning CSS grid layout
A game for learning CSS grid layout
【CSSフレームワーク】Bootstrap3のLP用テンプレートまとめ【全部無料】
こんにちは。Webデザインはあまり得意ではないケーです。（今月2回目） 先日のBootstrapのテンプレ記事をたくさんの方に見ていただきました。 www.weblog-life.net Bootstrapのテンプレといえば管理画面用テンプレートよりポートフォリオや商品ページなどで使える、LP（ランディングページ）のテンプレートがより需要があるんじゃないかと思います。 個人的にはこの手のテンプレは普段使うシーンが少ないのですが今後のためにまとめてみたいと思います。 Stylish Portfolio オフキャンバスナビゲーションとカスタムトグルメニュー。フッターのGoogleマップも印象的。 ライセンス MIT ライセンス デモ http://blackrockdigital.github.io/startbootstrap-stylish-portfolio/ ダウンロード https:
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法
主な手順 主な作成手順は、こんな感じです。 CSSをstyle.cssなどに貼り付ける CSSのclassを用いて文章を書く CSSさえ貼り付けてしまえば、あとは「吹き出しクラスを適用したpタグ」などで、書き込むだけです。それほど手間もかからないと思います。 作成方法 作成方法は以下です。 style.cssに貼り付ける 以下のCSSをstyle.cssにコピペします。 /******************************* * 左からの吹き出し ********************************/ .left_balloon { position: relative; background: #fff; border: 1px solid #777; margin: 10px; padding: 10px; border-radius: 15px; margin-
CSS で「吹き出し」をつくってみる | バシャログ。
こんにちは。mackyです！ 最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。 よかったら読んでみてください。 では、早速。 HTML HTMLはこの一行。 <div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div> CSS：スタンダードな角丸長方形 使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。 .baloon { width: 400px; padding: 10px; background: #FF3399; position: relative; color: #fff; border-radius: 5px; text-align: center; } .baloon:before { content: ""; position: absolu
各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR
div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。 キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。 デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/main.css"/> </head> <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
Private Presentation
Private content!This content has been marked as private by the uploader.
Web制作者のためのCSS設計の教科書
Web制作者のためのCSS設計の教科書 ( •́谷•̀)「CSSの本書いたよーヽ(=´▽`=)ﾉ」 ということで@hilokiさんから頂きました。ありがとうございます。 著者（@hiloki）について 前著も有名で、私から改めて紹介するまでもないかもしれませんが、カンファレンスや様々な勉強会でCSSについての講演を数多く行ってきており、 CSSが持つ弱点を理解し、設計の重要性を訴えてきた有識者の一人 です。 スライドを見ると分かる通り、CSSプリプロセッサの話に始まり、CSSの設計の話や、最近ではWeb Componentsを交えた話もされていて、CSSと戦ってきた傷跡が生生と感じられます（大袈裟）。今回の著書は得てきたナレッジの集大成といえるのではないでしょうか。 谷 拓樹 (著) 内容について 各章の概要をざっと振り返ってみます。 第1章 CSSにおける設計とは 第2章 CSSの基本を
CSSで2カラムを作ってみる - kojika17
CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい
コピペで使える！ CSSで凝った背景を作るサンプル集 | ライフハッカー・ジャパン
「CSS Gradients with background-blend-mode」はCSSの「background-blend-mode」を活用した背景サンプルをたくさん紹介しているサイトです。ウェブデザインをやっている方には非常に参考になるサンプルばかりです。 以下に使ってみた様子を載せておきます。 まずCSS Gradients with background-blend-modeにアクセスしましょう。 このように「background-blend-mode」を使ったサンプルが用意されています。CSSが表示されていますが、値を変更するとその場で適用された背景を閲覧できますよ。 サンプル集の下部には、実際に画像を使用した場合とのファイルサイズの違いが比較されています。CSSだけで実現するほうが圧倒的にファイルサイズが軽くなりますね。ウェブデザイナーの方はぜひ学習の参考に使ってみてくださ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
これはスゴイぞ！Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin