すべてのカテゴリ

メジャーなアイコンフォントであるFontAwesome（以降、FA）とCSSのみで、サッカー好きなら誰でも知ってるあの有名なチームのユニフォームを表現してみました。モチーフは2019/20シーズンのホームとアウェーのユニフォームです。クラブ史上初のチェック柄ということで話題となったものです。和風な表現ではあの特別な刀で鬼を退治する大ヒットアニメでもおなじみの市松模様というやつです。フォント扱いなので拡大縮小してもデザインは崩れませんし、シャギーが出ることもないです。技術的な話今回、ベースのユニフォームはFAのTshirtsアイコンを使用しています。単色の色変更なら、CSSのcolorで簡単に設定できます。では、ユニフォームの柄を描くにはどうするのか。端的に説明すれば、backgroundに複数の背景を描画しレイヤー状に重ね、ユニフォームの形でマスクするという具合です。・background-imageにて複数のグラデーションを指定しレイヤー状に重ねる・linear-gradientでチェック柄（市松模様）を描画・radial-gradientでボディと袖の切替部分を描画・background-clipで背景をマスク処理（ユニフォーム内のみ柄が表示される）・background-position、background-sizeで各々微調整・ドロップシャドウ用のユニフォームを別に用意し、重ねて表示させるちなみに使用色は日本語公式サイトを解析しました。気が向けば他にも作成してみようかと思います。なお、今回紹介した内容について、ソースコードを含めた詳細解説をQiitaにて公開しています

¡Hola! Mundial Keigoです！今回から新しい企画に入ろうと思います！タイトルは【2Dアニメ版スペインサッカー学】フォーメーション毎のポジション名を学ぶ #第1課今までの2Dアニメ版配信ではスペイン語学に特化した解説をしてきました。これから、少しずつ変化を加えていきたい希望もあってサッカー学問を取り入れていきます。スペインのサッカー学問とは言えど、とりあえず一般的な知識から紹介していこうと考えています。海外サッカーファン、リーガエスパニョーラファン、サッカー指導者、スペイン好きな方へ向けてこの企画を進行していきます。YouTubeでも配信したので、そちらの方もお楽しみになって下さい！！はじめに初めて観られる方もいると思うので、簡単に僕のサッカー経歴を紹介します。スペイン・マドリードで３シーズンアマチュアカテゴリーでプレーをした後、バルセロナへ移住してスペイン公式の指導者アマチュアライセンスを取得しました。現在は指導歴４シーズン目としてプロライセンスの取得を目指しながら、現地の育成年代チームで第一監督として指導しています。タイトルの通り、戦術システム、またはフォーメーション毎のポジション名をスペイン語でどう言うのかを紹介していきます。経験上、ポジション名に関しては指導者によってバラつきがあります。さらに僕が通っている指導者学校の先生でさえ、一人一人違った言い方をします。笑従って、「これがこのポジション！」と言う定義はありません。これらの前提を受け取った上で、この内容をご覧になって下さい！！4-4-2コーチ戦術的なボード-サッカーPorteroはスペイン語でキーパー以