コーディング– tag –
-
コーディング課題|コーポレートサイト
無料コーディング課題です。下記のデザインカンプをコーディングし、PCサイトを完成させてください。Photoshopがなくてもコーディングができるように、記事の最後に必要な画像をまとめました。 【デザインカンプの詳細な指示】 通常コーディングの仕事を行... -
Google Chrome検証ツール(デベロッパーツール)の使い方
こんにちは。デザイン部、新入部員のTです。みなさんはWebデザイナーなら絶対に知っておきたいツール、「検証ツール」をご存じですか?「検証ツールって聞いたことはあるけど、まだ使ったことない」「どうやって使うのかよくわからない」「そもそも検証ツ... -
【初心者向け】Webフォントの使い方を解説
こんにちは!実習生のTです。Webデザインについて学び始めて半年ほどです。今回はWebフォントについての解説記事を書かせていただきました。少しでもみなさまのお役に立てれば幸いです。 【はじめに】 デザインにとって重要な要素の一つであるフォント。可... -
どっちが正解?「margin: 0 auto;」 と「text-align: center;」 の違いを解説します
みなさま初めまして!実習生のNです。職業訓練校に通い、Webデザインについて学び始めてもうすぐ4ヶ月。私と同じように、自分が思うようなデザインができず困った方がいるのでは…?と思い、初心者さん向けの解説記事を書かせていただきました。最後までお... -
【CSS中級】ヘッダーを固定すると画面幅中央に配置したい要素がずれている件
画面幅いっぱいの画像の中央にテキストを配置したメインビジュアルをデザインしました。でも、ヘッダーを固定させる記述をすると、中央からテキストがずれてしまいます。どうすればいいですか? 今回のような、スクロール時にヘッダーを固定させるときの場... -
widthとmax-width、時々、min-width
みなさま初めまして、実習生のFです。以前から興味のあったWebデザイナーになりたいと思い職業訓練に通い勉強を始めました。実制作・企業実習を経験するうちに気になり始めたwidthとmax-widthの使い分けについて簡単に解説したいと思います。max-width・mi... -
HTMLの入れ子とは?ルールについて
はじめまして、実習生のKです。職業訓練校に通い、Webデザインを学び始めて3ヶ月経ちました。初心者からのスタートで、まだまだ勉強中に苦労することはありますが、今回は私の経験が誰かの助けになれたら嬉しいなと思い、こちらの記事を書かせていただきま... -
コーディング課題「デンタルクリニックのウェブサイト」
無料コーディング課題です。下記のデザインカンプをコーディングし、PCサイトを完成させてください。Photoshopがなくてもコーディングができるように、記事の最後に書き出した画像をフォルダと、詳細なコーディング指示の画像を入れています。 【デザイン... -
ヘッダー部分をアレンジしてみよう
もともとのコードはこうでした。 <header> <div class="header_inner"> <h1><a href="./index.html"><img src="./images/logo.png" alt="有機野菜ドットコム"></a></h1&g... -
コーディング課題|フィットネスジムのウェブサイト
無料コーディング課題です。下記のデザインカンプをコーディングし、完成させてください。 Photoshopがなくてもコーディングができるように、記事の最後に書き出した画像をフォルダと、詳細なコーディング指示の画像を入れています。 【デザインカンプの詳... -
PCとスマホで別画像に切り替えて表示したい(HTML/CSSコード例)
PCとスマホでそれぞれ別々の画像に切り替えて表示したい!というケースに遭遇しましたか?方法はいくつかありますが、今回は初心者向けに2つの書き方をご紹介します。 【方法1:HTMLとCSSでレスポンシブ】 <img class="img-pc" src="im... -
スムーススクロールを実装しよう
htmlでidをhrefに指定して、topに戻る、というボタンを作ったとき。するする〜っと上に動く「スムーススクロール」について解説します。今回はjQueryを使用したスムーススクロールを実装したいと思います。 書いたHTMLはこちら <!--トップへ戻る--> ...
1