「AWS無料相談会」をオンラインで開催中

CSS

CSSで図形を描く

小学生の長女が夏休みに入り、今年もまたお弁当作りに悩まされている池島です。 先週、秋田の実家に帰省しましたが、毎回、人の少なさに「県消滅」の危機を実感します。 さて以前、CSSで矢印やフキダシを表示させる方法をご紹介しましたが、これらの元となる図形をCSSで表示させる方法をご紹介したいと思います。 二等辺三角形 底辺からの高さを底辺のボーダーサイズで設定し、左右の欠ける部分をtransparent […]

ブロック要素のリストの配置について

弊社コーポレートサイトのデザイン・コーディング担当の池島です。 この職種はかれこれ十数年になりますが、絶えず続く技術の進歩に、必死について行こうと頑張っております。 さて、今回は、ブロック要素が集まったリストの配置の仕方を、いまさら感はありますが、メモ代わりに書いておこうかと思います。 float を使う 昔からあるやり方です。左寄せ、右寄せのみで、中央寄せはできません。 HTML <ul […]

HTML5の日付入力フォームのスタイルを変えてみる

エンジニアばかりのMMMでデザイナーをやっている池島です。デザインにコーディング、さらにSEO対策なども行っています。 ところで、先日担当したプロジェクトの中で、HTML5を使ってカレンダー機能を実装しました。 IEやFirefoxなど、HTML5に非対応のブラウザもあるものの、ユーザー視点に立つとカレンダーUIから日付を選択することができるのは非常に分かりやすいですよね。 日付選択フォームのスタ […]

CSSで作るフキダシいろいろ

長女の卒園式後に流すスライドショーを制作することになり、iMovieが楽しくなってハマっていた池島です。 機能の制限が多いですが、テンプレートもたくさん用意されていて、直感的に操作できるので、動画編集の初心者にはいいと思いました。 いつか、Premiere や After Effects もゴリゴリ使いこなせるようになってみたいなーと・・・ さて、前回に続き、今回は、CSSだけで作るフキダシをご紹 […]

CSSだけで矢印を作ってみた

ワーキングマザーの池島です。 年度末に差し掛かり、保護者会や学校説明会、卒園対策委員などで忙しくしております。 現在、自社のコーポレートサイトの制作をしており、初めてやってみることがあったり、試してみたかったことをやってみたりと、スキルアップにも良い機会となっています。 そんな中、画像を使わずにCSSを使って矢印を作る機会がありましたので、備忘録も兼ねて、いくつかご紹介したいと思います。 サポート […]