技術系解説記事– category –
-
HTMLの入れ子とは?ルールについて
はじめまして、実習生のKです。職業訓練校に通い、Webデザインを学び始めて3ヶ月経ちました。初心者からのスタートで、まだまだ勉強中に苦労することはありますが、今回は私の経験が誰かの助けになれたら嬉しいなと思い、こちらの記事を書かせていただきま... -
イラストACなどの素材サイトから「セット」になった画像をダウンロードして「一部だけ」Photoshopで利用する方法
Photoshopのみをを利用している場合、まとまった素材のダウンロード後、どうやって使うんだろう?と迷われる方が多いので解説します。 イラストACというサイトがあります。いろんな画像素材を無料でもダウンロード可能な素材サイトです。 イラストAC:http... -
【職業訓練校やスクールに通った未経験者向け】Webデザイナーのポートフォリオサイトって、どうやって作ったらいいの?【HTMLCSSテンプレート付き】
職業訓練校やスクールを卒業した後、就職活動が待っていますね。 未経験からウェブ業界に足を踏み入れる場合、重要なのは「私はこれまでここまで学んできて、こんなスキルを持っています」という情報を視覚的に示すこと、つまりポートフォリオサイトが必要... -
記事を見ながら実際に作れる!Photoshopでのバナー作成のやり方(素材紹介・図解あり)
Photoshopでバナーを作りはじめた初心者の方へ、バナー制作の基礎操作を網羅できるチュートリアルをお届けします。各種素材へのリンクも用意しているので、記事を見ながら、ぜひ一緒にPhotoshopでバナーを作ってみてください。 \ 今回作成するバナーの完... -
justify-content: space-betweenの最後の行を左寄せにしたい時の対処方法
【最後の行のスペースを埋めたい!】 こんなときありませんか?display:flexをしたときに、justify-content: space-betweenをすると子要素の数によっては、4番と5番の間にスペースができてしまいます。下の図のような状態です。 Flexboxを使っているときに... -
CSSは「点数」を持っていて、「優先順位」が生まれる
通常CSSで書いた命令は、下に書いたものが優先されます。 例えば下記のようなHTMLファイルがあったとします。 <nav class="gnav"> <ul> <li><a href="index.html">ホーム</a></li> <li><... -
Visual Studio CodeをMacにインストールする手順を、初心者向けに詳細に解説します
Microsoftが提供するVisual Studio Code(通称 VS Code)というHTMLやCSSを書くためのアプリケーションをMacにインストールする手順をご紹介します。大まかな流れとしては「アプリをダウンロードする」→「Macにインストールする」→「いつでも使いやすいよ... -
ファビコンを設置するためのHTMLコード
head内に下記を記載します。下記の場合は画像の大きさは「64px」にしておきます。この場合画像の拡張子は.png <link rel="icon" type="image/png" href="パス/favicon.png" sizes="16x16 24x24 32x32 48x48 64x64&q... -
ドメインとサーバーを契約し、自分のパソコン内にあるHTMLやCSSをWeb上に公開する方法
自分のパソコン内でHTMLやCSSでファイルを作ってWeb上に公開したい場合、またWordPressでWebサイトを作りたいと思った場合には「ドメイン」と「サーバー」が必要です。 おおまかな例えですが、Web上の土地を「サーバー」と言い、そこに建てたWebサイトそれ... -
スマホのときだけ改行したい、PCのときは改行したくないときのCSS
スマートフォンではしたい部分があるがパソコンでは改行せずに表示させたい!そんな時に有効なCSSの書き方は? 意外とシンプルで基礎的なものを使います。display: none; と display: block; を使いわける! まず<br>に何かクラス名をつけてください... -
独自ドメインとサブドメインの違いって何?
【ドメインとは】 ◯◯◯.comのように、インターネット上における住所を表すものです。 元々インターネット上での住所とは、IPアドレスといって「012.34.567.89」のような数字の住所が振り当てられています。この数字の住所を人が見ても分かりやすくするため... -
PCとスマホで別画像に切り替えて表示したい(HTML/CSSコード例)
PCとスマホでそれぞれ別々の画像に切り替えて表示したい!というケースに遭遇しましたか?方法はいくつかありますが、今回は初心者向けに2つの書き方をご紹介します。 【方法1:HTMLとCSSでレスポンシブ】 <img class="img-pc" src="im...