[B! CSS3] tyosuke2011のブックマーク

tyosuke2011 id:tyosuke2011

CSS3に関するtyosuke2011のブックマーク (58)

A Complete Guide to Flexbox | CSS-Tricks
display This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. .container { display: flex; /* or inline-flex */ } Note that CSS columns have no effect on a flex container. flex-direction This establishes the main-axis, thus defining the direction flex it ems are placed in the flex container. Flexbox is (aside from optional
tyosuke2011 2023/11/19
web制作

CSS3
リンク
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
tyosuke2011 2023/05/25
CSS

web

CSS3

webデザイン

web制作

HTML

あとで読む

webdesign
リンク
Specificity Calculator
A visual way to understand CSS specificity. Change the selectors or paste in your own. Specificity Calculator was built by Keegan Street. The specificity calculator JavaScript module is available on GitHub or via npm install specificity. Specificity Calculator is built for CSS Selectors Level 4. Care has been taken to ensure results are accurate. If you find a defect, please report it.
tyosuke2011 2023/05/17
CSS

webservice

CSS3

webサービス
リンク
Hamburgers
Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa
tyosuke2011 2023/05/08
class

CSS

CSS3
リンク
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
tyosuke2011 2021/03/18
CSS

framework

CSS3

UI

webdesign

web制作

design

Yahoo

webデザイン

Bootstrap
リンク
PHPで開発する最新スタートアップWEBサービスの裏側を公開します
リリースしたばかりの最新WEBサービスの使用技術ついてご紹介したいと思います︵最新ではありますが最先端技術ではありません︶。スカウトミー https://scoutme.biz IT エンジニア専門のスカウト転職サービスです。求人票の掲載も人材紹介も一切なく、登録エンジニアは採用企業自らが直接送るスカウトメールをひたすら待ちます。 ※今は転職を考えていないという人も登録可能ですので、自分の価値を確かめる為にも是非！開発チーム構成エンジニア‥1名デザイナー‥1名ディレクター兼デザインアドバイザー‥1名開発期間 2017年2月にキックオフし、9月現在、スタート時の機能は一通り実装終えました。特に残業をしたり無理をするようなことはありませんでしたので、開発実期間は8ヶ月程度といったところです。採用技術典型的なLAMP nginx︵画像サーバ兼リバースプロキシ︶ Apache +
tyosuke2011 2017/10/29
apache

.jp

biz

CSS3

Bootstrap
リンク
[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ
div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering horizontally and vertically in CSS float, transf orm, position, display:flex;などを使ったテクニックが紹介されており、ページの実装に合わせて、実装方法を決めるとよいでしょう。デモではsection要素がコンテナに、div要素が中央に配置されています。
tyosuke2011 2017/07/31
CSS

CSS3

レスポンシブ

Flexbox

あとで読む
リンク
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング　Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
tyosuke2011 2017/07/11
CSS

demo

CSS3

*TIPS

あとで読む
リンク
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に﹁width: calc(100% - 50px);﹂と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができるサポートブラウザ minmax()の基本的な使い方
tyosuke2011 2017/06/14
design

css3

Media Queries

レスポンシブ

CSS
リンク
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー﹁border-radius﹂。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！無難で王道！正円の円弧を使った角丸 border-radius は﹁border﹂とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
tyosuke2011 2017/06/08
CSS

background

角丸

CSS3

design
リンク
もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）
HTMLを書くときのベースとなる﹁書き出し﹂。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう︵もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください︶。ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやす
tyosuke2011 2017/04/25
com

CSS

CSS3

ajax

*あとで読む
リンク
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。ブックマークしておいて、PDFや画像をダウンロードして、すぐに確認できるようにしておくと便利ですね。
tyosuke2011 2016/11/15
CSS

Bootstrap

es6

ES

CSS3
リンク
７日間でWindows 10 アプリ開発者になる方法 - Visual Studio 日本チームブログ - MSDN Blogs
Visual Studio のインストール前に、システム要件を満たしているか確認してください。必要なシステム要件はエディションによって異なります。 Visual Studio 2015 のインストール時に、インストールの場所や種類を選択する画面が表示されます。・インストールする場所をデフォルトから変更したい場合には、ここで任意のインストール場所を指定します。・インストールの種類は、「標準」と「カスタム」の 2 択となります。今回は、「カスタム」を選択してみましょう。 [次へ] ボタンで「機能の選択」を行います。今回は、「ユニバーサル Windows アプリ開発ツール」チェックボックスにチェックを入れて [次へ] ボタンでインストールを進めます。インストールが終了すると、画面上に「セットアップが完了しました。」メッセージが表示されます。 2 日目言語とテンプレート UW
tyosuke2011 2016/10/26
C++

.net

c#

CSS

CSS3
リンク
CSSのみで実装するシンプルなドロップダウンメニュー - NxWorld
JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。はじめに以下で紹介しているドロップダウンメニューは、全て下記のようなHTMLとベースとなるCSSが指定してあります。 <ul> <li><a href="#">nav</a></li> <li> <a href="#">nav</a> <ul> <li><a href="#">sub nav</a></li> <li><a href="#">sub nav</a></li> <li><a href=
tyosuke2011 2016/10/25
CSS

css3

ドロップダウンメニュ

あとで読む

ドロップダウン
リンク
CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ - Yukihy Life
最近よく見る、スマホのときに横スクロールをするメニュー。作り方をメモしたいと思います！実装図・メリットカスタマイズレスポンシブ︵PC+スマホ︶スマホその他のカスタマイズ色の変更メニューの横幅・縦幅の変更最後に実装図・メリットイメージとしては、PCでは一般的なメニューになり、画面の横幅が狭くなると、こんな感じで横スクロールをするようになるメニューです。ちなみに、同じコードをはてなブログのスマホの方に入れると、こんな感じになります︵動きは上と同じです︶。このメニューのメリットとしては、トグルメニューのようにタップしなくても、はじめから数個のカテゴリが見えている Javascriptを使っていないので、回線が不安定なところでも比較的表示が崩れにくいはてなブログ以外でも使える逆にデメリットは、スクロールできるのか気付かれないかもしれない狭い範囲での操作となるの
tyosuke2011 2016/10/25
CSS

Class

css3

スクロール

あとで読む
リンク
めしおのアフィリエイト教材レビューブログ
独立開業・起業、転売、ネットビジネス、アフィリエイト、投資、YouTuber、TikToker、VTuberなどなど、世の中にはいろいろな仕事や稼ぐ方法がありますが、一攫千金を現実的に、ある程度高い確率で実現できるのは何 […]
tyosuke2011 2016/10/13
CASE

CSS

CSS3

jQuery

*jQuery
リンク
スマートフォンサイト制作よくあるトラブルと解決方法・回避方法
8/18におこなわれたCSS Nite in OSAKA, Vol.32での発表用スライドです。4/27のCSS Nite in OSAKA, Vol.29で使用したスライドをベースに、若干の追記・修正をした内容となっています。
tyosuke2011 2016/10/13
android

web制作

iOS

CSS3

スマートフォン
リンク
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。また、タイトルでは﹁スマートフォンサイト制作時﹂としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
tyosuke2011 2016/10/13
CSS

CSS3

webデザイン

web制作

スマートフォン
リンク
プラグインやチュートリアル 25
いずれもメニューを実装する際に便利なプラグインやチュートリアルで、もちろんPCサイトでも問題なく使えますが、レスポンシブwebデザインやスマートフォンサイトといったサイトを制作する際には特に便利なものです。サイドからスライドしてくるものやウィンドウサイズが狭まるとセレクタやアコーディオンに変化するものなど、見せ方も様々なタイプがあります。ずらっと並んではいますが大まかに同じような動きをするものはなるべく固めているので、気になる動きがあればその前後もチェックしてみてください。
tyosuke2011 2016/10/13
CSS

jquery

canvas

CSS3

レスポンシブ
リンク
HTML5とスマートフォンサイト開発の現状／HTML5完全読本#5-1 | HTML5完全読本―実践テクニックとWebデザインの最新動向
スマートフォンを使うユーザー層が10代の若者から高齢者にまで広がってきている。そうした状況を踏まえて、昨今のスマートフォンサイトの対応や開発についての基礎的な部分を押さえていこう。制作・文‥上杉天馬︵株式会社トライフォート︶スマートフォンサイトとHTML5HTML5、CSS3が注目されて既に何年も経っているが、その2つが持つ機能を十分に発揮することができるのがスマートフォンサイトだ。iPhone、Androidのスマートフォンブラウザでは、それらの技術を実装したWebkitというHTMLレンダリングエンジンを採用しているため、HTML5やCSS3をためらわずに使うことができる。各ブラウザのHTML5、CSS3の対応状況は、Can I useで詳しく知ることができるので、確認してほしい。 PCサイトとの違いを把握していこう画面サイズの違いスマートフォンサイト制作にあたり、PCサイト制作と
tyosuke2011 2016/10/13
CSS3

CSS

html5

web制作

後で読む
リンク
1 2 3 次のページ