CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター
こんにちは。めぐたんです。 今回からCSSのborderプロパティだけで作る三角形について、全2回に渡ってお届けします。 「borderプロパティだけ」、つまりブラウザの種類やバージョンに依存しないのでもしかすると前々から使われていた手法なのかもしれませんが、CSS3の登場以降CSSだけで色々な表現に挑戦する方も増えたのではないでしょうか？私も最近使う機会がよくあると感じるのでまとめてみました。 .triangle{ border-right: 50px solid transparent; border-bottom: 86.6025px solid #b2ce54; border-left: 50px solid transparent; } なぜこのように「borderだけで三角形ができるのか」を理解するには、borderのある特性を知っておくことがポイントとなります。 border
Webアクセシビリティっていったいなんだろう？
こんにちは、チカッパであります(◉∀◉ )ゞ 先日Webサイトのアクセシビリティについて考える機会があったのですが、「情報を人に届けるとは何か」というWebサイトのあり方について改めて見直すきっかけとなりました。 その時のことを思い返しつつまとめましたが、予想よりも長くなりましたので、 「前半：アクセシビリティとは何か（今回の記事）」と「後半：具体的な対策として何を行えばいいのか」の2回に渡ってお届けしていきます。 今回は「アクセシビリティ」の概要についてお伝えしていきます。 興味を持っていただくきっかけになれば嬉しいです。 アクセシビリティとは？ アクセシビリティとは、「Access+bility」を合わせた言葉です。 言葉の通り「Webサイトにアクセスできる状態」であることです。 それは、誰でもどんな環境でもアクセスできる状態を整えることを指します。 まず知っていただきたいのはPete
CSSで要素を上下や左右から中央寄せする7つの方法
こんにちは。めぐたんです。 みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか？ 馴染みがあるのは、横方向に対して中央寄せを行うtext-align: center;やmargin: 0 auto;。では縦方向のときは？となると…途端に「なんだっけ」と止まってしまう方もいるかと思います（私です）。 そこでCSSの「中央寄せ」について、レスポンシブWebデザインにも対応しやすい7つの方法をまとめてみました！ 当記事で紹介していく方法はすべて、下記のHTMLを共通して使用していきます。 <div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolo
FutureShop2（フューチャーショップ2）を使用する際の開発環境の設計 | 株式会社グランフェアズ
Posted by 867 on Jul 2nd, 2014 FutureShop2（フューチャーショップ2）をはじめとするASPサービスを利用したサイトを構築する場合、最終の本番環境に合わせて構築方法を考えないと、いざ本アップという時に大量の修正（変更）を加えないといけなくなったり、運用時更新するたびトラブルに見舞われたりと大変なことになってしまいます。どういうこと？という方。例えばつい最近他社から運用を引き継いだECサイトでは、次のようになっていました。 ・html内の画像パスが、全て本番URL（https://～ ）で指定されている。 ・リンクパスが、一部URL、一部絶対パス（「/」始まり）、一部相対パスで指定されている。 これどうやって運用していたのでしょう？おそらくテストアップ時はパスをテスト用に書き換えたりして確認していたものと思われますが、本アップ時に記述を変更しなくてはいけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
