クリエイター・プログラマーを目指している人のためのメディア

フレックスボックスの利用について生徒さんから「わかるようで、わからないようで」とよく相談されます。 そこで、絶対理解しておきたい使い方をまとめました。 最低限、これをおさえておけばOK！です。

CSSのclamp()の使い方と便利な利用方法をまとめました。Sassと組み合わせることでフォントサイズの指定など簡単にできるようになります！

レスポンシブデザインをしているときに、スマフォサイズでは一行に収まらない文字を改行しないといけないけど、でもPCサイズの時は一行で表示したいからbr要素は使えない…といったときに使うテクニックです。

height:100%はある条件下でないと適用できません。どういったときに効くのか？を整理してみました。

画像の上に同じ大きさの要素を不透明にして重ねる、オーバーレイ表現をしたいときによく使うテクニックです。positionで領域を広げられることを知っていると、いろいろと応用できるので便利です！

background-posiionみたいな使い方ができるobject-positionですが、あまり使ったことがない、という方も多いようです。基本的な使い方をマスターしてみましょう！

object-fit:coverとbackground-size:coverの違いや、使用する際の注意点をまとめました。

アイコンフォントと言えば、Font Awesomeが有名だと思いますが、Bootstrap Iconsを今回使ってみて、とても便利！！！と感動しましたので、使い方をまとめました。 とても簡単な手順で設置することが可能です。今回はCDNを利用した方法を中心に解説しています。

HTML５を学ぶ上で間違えやすい内容だったり、コンテンツモデルやトランスペアレントといった、少し難解なお話をご紹介しています。 最初はあまり意識しなくてもいいのですが、いずれ理解する必要が出てきます。 学習がある程度進んだ今、いったん内容を確認しておきましょう。

HTMLのアウトラインとセクショニングは比較的難解なのですが、正しいアウトラインを出力するために理解しておきたい内容です。アウトライン、セクショニングコンテンツ、セクショニングルートについて確認しましょう。

HTMLはタグで囲めば済む、と考えていえる方は大間違いです。HTMLはとても奥が深くて、ルールも多いのです。なぜHTMLを正しく記述する必要があるのかを紹介しています。

オブジェクト指向の勉強を進めていくうえで、結局最初につまづくところはこの「抽象クラス」「インターフェイス」「ポリモフィズム」の部分ではないかなぁ、と思うのです。クラスの定義、インスタンス、クラスの継承、あたりまでは「簡単 […]

Javaでプログラミングをしたことがある方は誰しも必ず遭遇したことがあるNullPointerException。Kotlinはこの「ぬるぽ」が発生しないように、ある程度文法が厳しい仕様になっています。Java経験者にとって難解なnull許容型についてまとめました。

Kotlinには範囲を表すデータ型が用意されています。0..2のように、ピリオドを２つ書いて表します。Javaには用意されていない便利なデータ型なので、この機会に使いこなしてみましょう！

意外と知られていないconsole.dirについてまとめました。console.logと同様なことができますが、console.dirならではの便利な部分もあります。

スクロールするとほわんっと表示させるようなアニメーションをよく見かけませんか？AOS.jsを利用すれば、簡単な設定で実現することが可能です。このページではAOS.jsの使い方について、初心者の方にも理解できるように解説しています！

PHPからブラウザのコンソールにデバック用のテキストなどを出力したいなぁと思うことが多々あり、Chromeのエクステンションの導入方法をまとめました。

30代からプログラミングを独学で学ぶ難しさや、どうすれば就職できる技術を身に付けることができるのか。11年IT系講師をしていた経験を振り返って、本気で考えてみました。

WordPressでEWWW Image Optimizerのプラグインを設定しておくと、画像をアップロードするだけで軽く処理してくれる、という便利なプラグインがあります。 画像が軽くなれば、表示されるまでの速度が速くな […]

さくらサーバーのフォルダにWordPressをインストールする方法をご紹介します。インストールは、サーバーとドメインの対応と、SSL対応まで済ませてから行ったほうが、余計な設定をする必要がなくスムーズです。インストールを […]

SSLとは簡単にいうとセキュリティを高めたホームページを運営するための設定のことです。この設定を行うことで、URLがhttpからhttpsへと変わります。 SSL対応をしなければ、「セキュリティの保護がされていません」と […]

ホームページを公開するにあたって、最初にしなければならない初期設定で挫折してしまう方も多いようです。ここでは、 さくらサーバーを契約する お名前.comでドメインを取得する さくらサーバーでレンタルしたサーバーと、取得し […]

Illustratorを使ったトーンを合わせた配色を行う方法を、ご紹介しています。

XDを使うと、オブジェクト間の距離が簡単に計測できます！ 地味だけど便利だなぁと思いながら、いつも使っている機能です。

XDを使ってリンクを設定する方法を紹介しています。プロトタイプを作成する際にとっても便利な機能です。

AdobeXDを使ってWebデザインをする際に、グリッドを利用する方法を紹介しています。

XDを使うと、作ったプロトタイプを上司やお客様、チームのメンバーと共有することができます。 IllustratorやPhotoshopでも、ファイルを共有することはできるじゃないか！！と思った方。確かにそうです！！ です […]

リピートグリッドを使ってみよう 　XDを使う最大のメリットではないか？と思えるほど、とても便利な機能です。 　例えば、次のようなデザインを描きたいとします。 このデザインは、丸い写真とタイトル、抜粋が１つのセットで、３つ […]

画像解像度と再サンプルについて、初心者の方でもわかりやすいようにできるだけかみ砕いて説明しています。ピクセルという単位は具体的な大きさが決まっていません。解像度によって変わるのです。解像度を変更することによってファイルのサイズはどうなるのか？大きさは？など改めて考えてみましょう。

Illustratorの基本操作を使って、ショップカードを作成する第二弾です。簡単なロゴの作成と地図、図形の効果など、基本操作を確認しながら楽しく作成していきましょう。

Illustratorの基本操作を使って、資料の作成する事例を紹介しています。グラフの作成、写真の加工、クリッピングマスク、ペンツールなど、Illustratorの基本操作を網羅できるような内容になっています。

Illustratorの基本操作がある程度身についたところで、バナーを作成してみましょう。図形の扱い方などはもちろん、スウォッチの扱い、アピアランス、効果などを使って作成しています。

魅力的なWebサイト、見やすいWebサイトにとって、文字の選択はとても大切です。タイポグラフィーとも呼ばれる文字について学び、適切なフォントの種類の指定ができるようになりましょう。

Webデザインに原則を取り入れることで、誰にとっても見やすく、魅力的なデザインを行えるようになります。まずは大切な４つの原則を学んでみましょう。

Webデザインをするうえで知っておくべき配色のセオリーについて紹介しています。コツをつかめば難しくないセオリーを学んで、配色に失敗しないデザイナーになりましょう。