CSS/Sass
-
2021.10.09公開 / 2022.02.21更新 【Sassの便利な使い方】フォントサイズをCSSのclamp()を使ってSassで便利に指定する!
CSSのclamp()の使い方と便利な利用方法をまとめました。Sassと組み合わせることでフォントサイズの指定など簡単にできるようになります!
-
2021.08.22公開 / 2021.10.19更新 【CSSテクニック】画面の幅が縮まった時の改行の位置をwbrで指定する方法
レスポンシブデザインをしているときに、スマフォサイズでは一行に収まらない文字を改行しないといけないけど、でもPCサイズの時は一行で表示したいからbr要素は使えない…といったときに使うテクニックです。
-
2021.08.19公開 / 2021.10.19更新 【CSSテクニック】height:100%を効かせる方法
height:100%はある条件下でないと適用できません。どういったときに効くのか?を整理してみました。
-
2021.08.18公開 / 2021.10.19更新 【CSSテクニック】positionを使って画像を領域を伸ばし、画像を覆ってみよう
画像の上に同じ大きさの要素を不透明にして重ねる、オーバーレイ表現をしたいときによく使うテクニックです。positionで領域を広げられることを知っていると、いろいろと応用できるので便利です!
-
2021.07.19公開 / 2021.10.19更新 【CSSテクニック】object-positionで表示位置を調整する
background-posiionみたいな使い方ができるobject-positionですが、あまり使ったことがない、という方も多いようです。基本的な使い方をマスターしてみましょう!
-
2021.07.07公開 / 2021.10.19更新 console.dirとconsole.logの違い
意外と知られていないconsole.dirについてまとめました。console.logと同様なことができますが、console.dirならではの便利な部分もあります。
-
2021.07.07公開 / 2022.02.21更新 【CSSテクニック】object-fit:coverとbackground-size:coverの違い
object-fit:coverとbackground-size:coverの違いや、使用する際の注意点をまとめました。
HTML
-
2022.02.27公開 【初心者の方向け】Bootstrap Iconsの使い方
アイコンフォントと言えば、Font Awesomeが有名だと思いますが、Bootstrap Iconsを今回使ってみて、とても便利!!!と感動しましたので、使い方をまとめました。 とても簡単な手順で設置することが可能です。今回はCDNを利用した方法を中心に解説しています。
-
2021.03.16公開 / 2021.10.19更新 間違えやすいHTML5の要素とコンテンツモデル、トランスペアレントについて
HTML5を学ぶ上で間違えやすい内容だったり、コンテンツモデルやトランスペアレントといった、少し難解なお話をご紹介しています。 最初はあまり意識しなくてもいいのですが、いずれ理解する必要が出てきます。 学習がある程度進んだ今、いったん内容を確認しておきましょう。
-
2021.02.28公開 / 2021.10.19更新 HTML5で作るアウトラインとセクショニング
HTMLのアウトラインとセクショニングは比較的難解なのですが、正しいアウトラインを出力するために理解しておきたい内容です。アウトライン、セクショニングコンテンツ、セクショニングルートについて確認しましょう。
-
2021.02.14公開 / 2021.10.23更新 SEOを意識したHTML5を書こう
HTMLはタグで囲めば済む、と考えていえる方は大間違いです。HTMLはとても奥が深くて、ルールも多いのです。なぜHTMLを正しく記述する必要があるのかを紹介しています。
-
2021.02.05公開 / 2021.10.19更新 Webコーディング初心者が学ぶべきHTML5の基本と覚えるべきタグ
HTML5で必ず必要な記述について、HTMLの学習を進めるうえで必ず必要な要素の紹介をしています。初めからすべてを学ぼうとするのではなく、まずは必須のタグを覚えて次のステップに進みましょう。
-
2021.02.03公開 / 2021.10.19更新 Web制作で失敗しないコーディングを学ぶコツ
Webコーディングを学ぶ上で知っておくべきことがあります。エディタの選び方、学習の進め方など、今後の学習で失敗しないためにも、きちんとポイントをおさえておきましょう。
Java/Kotlin
-
2021.02.19公開 / 2021.10.19更新 【JavaとKotlinの違うところ】null許容型をわかりやすく解説
Javaでプログラミングをしたことがある方は誰しも必ず遭遇したことがあるNullPointerException。Kotlinはこの「ぬるぽ」が発生しないように、ある程度文法が厳しい仕様になっています。Java経験者にとって難解なnull許容型についてまとめました。
-
2021.02.13公開 / 2021.10.19更新 【JavaとKotlinの違うところ】範囲を表すデータ型Rangeについて
Kotlinには範囲を表すデータ型が用意されています。0..2のように、ピリオドを2つ書いて表します。Javaには用意されていない便利なデータ型なので、この機会に使いこなしてみましょう!
-
2021.01.29公開 / 2021.10.19更新 JDKインストール、Javaプログラミングのコーディングから実行までの流れ
どうやってするのか?ではなく、どうして必要なのかをお話ししています。Javaプログラミングを実行するためにはJDKというツールが必要です。また、プログラムを書いただけでは実行することができません。コンパイルという作業が必要です。JDKインストールからコーディング、コンパイル、実行までの流れについてお話しています。
-
2021.01.29公開 / 2021.10.19更新 Javaプログラミンを学ぶ3ステップ
Javaプログラミングを学ぶ、と言っても大きく3ステップの段階があります。Javaの基本構文、オブジェクト指向プログラミング、WebやAndroidなど開発したいものにあわせたプログラミングです。ここで一度全体像を把握してみましょう。
-
2021.01.04公開 / 2021.10.19更新 プログラミングだけではだめ!アルゴリズムも学ぼう
プログラム学習者が挫折する理由はアルゴリズムを学んでいないからです。プログラムの記法を学ぶだけでは、プログラミングすることはできないのです。アルゴリズムについて簡単に解説しています。
JavaScript
-
2021.09.16公開 / 2021.10.19更新 JavaScriptのthisで気を付けること
JavaScriptでよくお世話になるthisですが、文脈によって参照先が変わります。特に、コンストラクターを関数として呼び出せるJavaScriptは、同じ「関数」だとしてもthisの参照先が変わるので要注意です。
-
2021.06.12公開 / 2022.02.21更新 【初心者向け】AOS.jsの使い方をわかりやすく解説!
スクロールするとほわんっと表示させるようなアニメーションをよく見かけませんか?AOS.jsを利用すれば、簡単な設定で実現することが可能です。このページではAOS.jsの使い方について、初心者の方にも理解できるように解説しています!
Web/プログラミング学習
-
2021.11.08公開 AdobeXDとは何か。マークアップエンジニアが最低限おさえておくべきXDの機能
AdobeXDとは何か、マークアップエンジニアがAdobeXDを利用できるメリットについてまとめました。コードを書く仕事だからデザインツールは使えなくていい、というわけではないので、学習コストが低いXDだけでも利用できると今後自分の活動に役に立つはずです。
-
2021.11.07公開 / 2021.11.08更新 プロ講師が伝える、プログラミングを本気で学ぶ3つの手段とメリットデメリットを解説!
プログラミングを学ぶ手段として「書籍を使う」「オンラインスクールを利用する」「Progateさんを利用する」の3つに焦点を当てて、メリット・デメリット・学習する際のコツをまとめています。
-
2021.11.07公開 / 2021.11.08更新 【超初心者向けに解説】HTMLとCSSとは何か どうやって学ぶべきか?
これからWebの学習を始めようという方向けの記事です。HTMLとCSSについて、専門用語は省いてわかりやすく伝えています。どう学べばいいのかまでカバーしていますので、学習を始める方はまずは読んでみてください。
-
2021.09.19公開 / 2021.11.08更新 30代、プログラミングを独学、就職は無理?どうすれば?を本気で考えた結果
30代からプログラミングを独学で学ぶ難しさや、どうすれば就職できる技術を身に付けることができるのか。11年IT系講師をしていた経験を振り返って、本気で考えてみました。
-
2021.01.29公開 / 2021.10.25更新 Web制作の大まかな流れをつかむ
Web制作について、デザインから運用までの大まかな流れを紹介しています。Web制作って何をするのだろう?どんな流れで作業をする?Web制作の学習者が何を学ぶべきなのかを、改めて考えてみましょう。
サーバー環境構築
-
2021.06.17公開 / 2021.10.19更新 画像を圧縮してくれるプラグインEWWW Image Optimizerの設定 サーバー構築
WordPressでEWWW Image Optimizerのプラグインを設定しておくと、画像をアップロードするだけで軽く処理してくれる、という便利なプラグインがあります。 画像が軽くなれば、表示されるまでの速度が速くな […]
-
2021.06.17公開 / 2021.10.21更新 【さくら新コントロールパネル対応】WordPressインストール方法 サーバー構築
さくらサーバーのフォルダにWordPressをインストールする方法をご紹介します。インストールは、サーバーとドメインの対応と、SSL対応まで済ませてから行ったほうが、余計な設定をする必要がなくスムーズです。インストールを […]
-
2021.06.17公開 / 2021.10.21更新 【さくらサーバー新コントロールパネル対応】ドメインをSSL対応する サーバー構築
SSLとは簡単にいうとセキュリティを高めたホームページを運営するための設定のことです。この設定を行うことで、URLがhttpからhttpsへと変わります。 SSL対応をしなければ、「セキュリティの保護がされていません」と […]
-
2021.06.17公開 / 2021.10.21更新 【新コントロールパネル対応】さくらサーバー契約、お名前.comでドメイン取得、さくらサーバーとドメインの紐づけをする サーバー構築
ホームページを公開するにあたって、最初にしなければならない初期設定で挫折してしまう方も多いようです。ここでは、 さくらサーバーを契約する お名前.comでドメインを取得する さくらサーバーでレンタルしたサーバーと、取得し […]
デザイン
-
2022.03.11公開 【初心者向け】わかりづらい画像解像度と再サンプルを解説!
画像解像度と再サンプルについて、初心者の方でもわかりやすいようにできるだけかみ砕いて説明しています。ピクセルという単位は具体的な大きさが決まっていません。解像度によって変わるのです。解像度を変更することによってファイルのサイズはどうなるのか?大きさは?など改めて考えてみましょう。
-
2021.05.01公開 / 2021.10.19更新 【実践編】Illustratorの基本操作を使ってショップカードを作成しよう!Part2
Illustratorの基本操作を使って、ショップカードを作成する第二弾です。簡単なロゴの作成と地図、図形の効果など、基本操作を確認しながら楽しく作成していきましょう。
-
2021.05.01公開 / 2021.10.19更新 【実践編】Illustratorの基本操作を使って資料を作成しよう!
Illustratorの基本操作を使って、資料の作成する事例を紹介しています。グラフの作成、写真の加工、クリッピングマスク、ペンツールなど、Illustratorの基本操作を網羅できるような内容になっています。
-
2021.04.11公開 / 2021.10.19更新 【実践編】Illustratorの基本操作を使ってバナーを作成しよう!
Illustratorの基本操作がある程度身についたところで、バナーを作成してみましょう。図形の扱い方などはもちろん、スウォッチの扱い、アピアランス、効果などを使って作成しています。
-
2021.04.07公開 / 2021.10.19更新 【実践編】Illustratorの基本操作を使ってショップカードを作成しよう!
Illustratorの基本操作を確認したところで、簡単なショップカードを作成してみましょう。使用する機能は限られていますが、操作の確認とデザインのポイントを押さえながら作成方法を解説しています。
-
2021.01.31公開 / 2021.10.23更新 Webデザインで役に立つフォントの話
魅力的なWebサイト、見やすいWebサイトにとって、文字の選択はとても大切です。タイポグラフィーとも呼ばれる文字について学び、適切なフォントの種類の指定ができるようになりましょう。
-
2021.01.06公開 / 2021.10.19更新 Web制作に必要なデザインの4原則を学ぶ
Webデザインに原則を取り入れることで、誰にとっても見やすく、魅力的なデザインを行えるようになります。まずは大切な4つの原則を学んでみましょう。
-
2021.01.04公開 / 2021.10.19更新 Webサイト制作者は知っておくべき配色のセオリー
Webデザインをするうえで知っておくべき配色のセオリーについて紹介しています。コツをつかめば難しくないセオリーを学んで、配色に失敗しないデザイナーになりましょう。