脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
東京モーターショー2019 - イベント | ヤマハ発動機株式会社
Japanese | English The 46th Tokyo Motor Show 2019 YAMAHA 人に寄り添い、人の温もりと向き合ってきたこと。 人が主役で、人が自己実現できるモビリティを開発してきたこと。 たとえ「100年に一度のモビリティ革命」が起きようと、 ヤマハが歩んできた足跡をたどれば、 モビリティの正しい未来がしっかりと描けるはずだ。 だから、自信を持って言いたい、真のモビリティ革命とは、 交通システムとしての利便性や効率性とは次元を異にした、 「人が人らしさを取り戻す」ための革命であることを。 ART for Human Possibilities. 人の能力を拡大させるアーティスティックなテクノロジーで、 様々な社会課題が解決していけば。多種多様な自己実現が可能になれば。 人はもっと心が豊かになるはずだ。もっと幸せになれるはずだ。 ヤマハが描く、モビリティの
ゴーストボタンにマウスを乗せたときの動きいろいろ16個
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt
超最新のWebデザイントレンド！ゴーストボタンが使われたサイト21選 | coromos
今流行のフラットデザインと相性が良いゴーストボタンを使って雰囲気を高めているWebサイトの紹介です。ゴーストボタンは、ボタンを派手に目立たせたい時に使うよりも、サイトの雰囲気を壊すことなくボタンを置きたい時に使うのが効果的です。”ゴーストボタン（Ghost buttons）”とは、背景色を透過にし、囲み線だけで表現されるボタンです。 流行り始めてから日が浅いためにまだ正式名称は決まっていませんが、幽霊のようにサイトの中に溶け込むことから”ゴーストボタン”と言われることが多いです。 ”ゴーストボタン”を使っているサイトとして、最もメジャーなサイトはTwitter Bootstrapでしょうか。 2013年頃から流行しているフラットデザインとの相性が良いために、”ゴーストボタン”を使うサイトが最近増えてきています。 ”ゴーストボタン”は、ボタンを派手に目立たせたい時に使うよりも、サイトの雰囲気
pltts.me - pltts リソースおよび情報
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.
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
ソーシャル・ボタンの色
ウェブサイトにソーシャル・ボタンを設置する際にその色はどうすると良いのかは悩みどころだ。効果的であることとビジュアル・デザインとの兼ね合いという二つの点から考えないとならないからだ。 対応するソーシャル・ネットワークのテーマカラー もっとも認識されやすいのは対応するソーシャル・ネットワークを象徴する色でボタンを作成することだ。認識されやすさはその利用につながるので、マーケティングの面から重視するのならばこうすべきだろう。もちろん元々その色で作成されているであろう公式のウィジェットを使うのが望ましい。 ウェブサイトのテーマカラー ソーシャル・ネットワークを象徴する色で作成する場合と比べて認識度では劣るが、コンテンツとの差異を確保した上で、何らかのアクションを起こすことのできるものだとは理解されやすい。リンクやナビゲーションとは差異をつけづらいので、それらとは大きさや形(他では使っていないシェ
CSSで月の満ち欠け
月の満ち欠けは球体に光を当てた結果のもので、円を円でカットするようなものではない。CSSでは立体を立体としては扱うのは難しいので、それを平面として捉え、半円を円で膨らませたり押し出したりすることで近いものにすることが可能になりそうだ。 Demo: Lunar Phase CSSグラデーションで作った半円に、border-radiusで作った半楕円を組み合わせることで実現している。月齢15以上の場合は半円を逆転させる。地球と太陽と月の位置関係から平面で捉えると、半円を基本にするということであっている(と思う)。 例えば月齢5の場合は以下の様なCSSで構成されている。 .moon { border-radius: 51%; height: 3rem; overflow: hidden; position: relative; width: 3rem; } .phase5 { backgroun
404 ノット・ファウンド - あるいは、ページが存在しないことについて
404 ノット・ファウンド あるいは、ページが存在しないことについて そのページはかつてここに存在していたか、あるいは元から存在していなかった。ただひとつ言えることがあるとすれば、君の探していたページは今、ここには存在していないということだ。 考えられる可能性はざっと2つある。ひとつはブラウザのアドレス・バーに打ち込んだURLが間違っていたことだ。たしかにURLは取るに足らないアルファベットの文字列に過ぎないし、打ち込んだ後はそのことをきれいさっぱり忘れてしまっても構わない。実際、君はそれを数秒後か数十秒後には忘れてしまうだろう。それでもURLを入力するときには、土曜日の朝にドリップコーヒーを淹れるときみたいに、間違えないよう丁寧に扱ってやる必要がある。ただの1文字でも間違ってしまったURLは、君をどこへも連れて行ってはくれないのだから。 もうひとつの可能性は、君の探していたページが、ここ
左寄せvs.中央寄せ
一時期は全てのウェブサイトが中央寄せになるのではないかというくらいの勢いだったような気がするが、最近は左寄せが盛り返しているようだ。AwwwardsやHTTPSTERなどのジャンルレスのウェブデザイン・ギャラリーを見るとなんとなくそう思う。正確に言うとレイアウトは中央寄せしつつ、テキストは左寄せしているウェブサイトが増えている。 レイアウトの中央寄せは、最適な一行の文字数に限界があることを考えると採用せざるをえない。CSSでマルチカラム・レイアウトが簡単に提供できる様になれば少し変わる可能性はあるが、縦スクロールとマルチカラム・レイアウトの相性は良くない。実装方法は色々変化していくことだろうが、レイアウトの中央寄せ自体はこのまま継続して行われていきそうだ。 テキストの左寄せが盛り返しつつあるのは、ウェブ・フォントの流行と共にタイポグラフィーへの傾倒が進んだことによる結果だろうか。CSSの実
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/PentaPROgram/status/1735822560162611444
【ナイトウ薬品/豊田市/旧:ナイトウ薬局/豊田市/喜多町】Welcome to naitonet Web Site/精力剤/生活習慣病/痔/うつ病相談/鬱病相談/脳梗塞/お問合せ:0565(33)8037/豊田市/ひまわり通り商店街
國富一弥⌘さんはTwitterを使っています: 「怖いことが起こってます。 知らない制作会社の実績に私の実績が掲載されています。。。 どうすればよいのかわからないけど、とりあえず知らない制作会社に連絡してすぐ削除するように言ってみます。」 / Twitter
よんてんごP on Twitter: "エロサイトでは全く無いのに 明らかにエロサイトとしか思えないデザインでwebサイト作りたいという狂った相談を受けたのですが あなたの思う 「この要素があったらエロサイト」 と思うwebサイトの要素って何かあります？ #募集"
CalorieMate to Programmer CUIモード | 大塚製薬
みんながアクセスすると劣化する記事｜変なWEBメディア
お探しのページは見つかりませんでした。 | ヤマト運輸
Panasonic エチケットカッター開発秘話 | homunculus Inc. | 株式会社ホムンクルス
大塚屋｜生地・布地と手芸用品：日本最大級のファブリック専門店
