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

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

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

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

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

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

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

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

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

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

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

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

HTML５で必ず必要な記述について、HTMLの学習を進めるうえで必ず必要な要素の紹介をしています。初めからすべてを学ぼうとするのではなく、まずは必須のタグを覚えて次のステップに進みましょう。

Webコーディングを学ぶ上で知っておくべきことがあります。エディタの選び方、学習の進め方など、今後の学習で失敗しないためにも、きちんとポイントをおさえておきましょう。

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

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

どうやってするのか？ではなく、どうして必要なのかをお話ししています。Javaプログラミングを実行するためにはJDKというツールが必要です。また、プログラムを書いただけでは実行することができません。コンパイルという作業が必要です。JDKインストールからコーディング、コンパイル、実行までの流れについてお話しています。

Javaプログラミングを学ぶ、と言っても大きく３ステップの段階があります。Javaの基本構文、オブジェクト指向プログラミング、WebやAndroidなど開発したいものにあわせたプログラミングです。ここで一度全体像を把握してみましょう。

プログラム学習者が挫折する理由はアルゴリズムを学んでいないからです。プログラムの記法を学ぶだけでは、プログラミングすることはできないのです。アルゴリズムについて簡単に解説しています。

JavaScriptでよくお世話になるthisですが、文脈によって参照先が変わります。特に、コンストラクターを関数として呼び出せるJavaScriptは、同じ「関数」だとしてもthisの参照先が変わるので要注意です。

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

AdobeXDとは何か、マークアップエンジニアがAdobeXDを利用できるメリットについてまとめました。コードを書く仕事だからデザインツールは使えなくていい、というわけではないので、学習コストが低いXDだけでも利用できると今後自分の活動に役に立つはずです。

プログラミングを学ぶ手段として「書籍を使う」「オンラインスクールを利用する」「Progateさんを利用する」の３つに焦点を当てて、メリット・デメリット・学習する際のコツをまとめています。

これからWebの学習を始めようという方向けの記事です。HTMLとCSSについて、専門用語は省いてわかりやすく伝えています。どう学べばいいのかまでカバーしていますので、学習を始める方はまずは読んでみてください。

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

Web制作について、デザインから運用までの大まかな流れを紹介しています。Web制作って何をするのだろう？どんな流れで作業をする？Web制作の学習者が何を学ぶべきなのかを、改めて考えてみましょう。

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

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

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

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

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

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

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

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

Illustratorの基本操作を確認したところで、簡単なショップカードを作成してみましょう。使用する機能は限られていますが、操作の確認とデザインのポイントを押さえながら作成方法を解説しています。

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

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

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