コーディング– tag –

無料コーディング課題です。下記のデザインカンプをコーディングし、PCサイトを完成させてください。Photoshopがなくてもコーディングができるように、記事の最後に必要な画像をまとめました。 【デザインカンプの詳細な指示】 通常コーディングの仕事を行...

こんにちは。デザイン部、新入部員のTです。みなさんはWebデザイナーなら絶対に知っておきたいツール、「検証ツール」をご存じですか？「検証ツールって聞いたことはあるけど、まだ使ったことない」「どうやって使うのかよくわからない」「そもそも検証ツ...

こんにちは！実習生のTです。Webデザインについて学び始めて半年ほどです。今回はWebフォントについての解説記事を書かせていただきました。少しでもみなさまのお役に立てれば幸いです。 【はじめに】 デザインにとって重要な要素の一つであるフォント。可...

みなさま初めまして！実習生のNです。職業訓練校に通い、Webデザインについて学び始めてもうすぐ４ヶ月。私と同じように、自分が思うようなデザインができず困った方がいるのでは…？と思い、初心者さん向けの解説記事を書かせていただきました。最後までお...

画面幅いっぱいの画像の中央にテキストを配置したメインビジュアルをデザインしました。でも、ヘッダーを固定させる記述をすると、中央からテキストがずれてしまいます。どうすればいいですか？ 今回のような、スクロール時にヘッダーを固定させるときの場...

みなさま初めまして、実習生のFです。以前から興味のあったWebデザイナーになりたいと思い職業訓練に通い勉強を始めました。実制作・企業実習を経験するうちに気になり始めたwidthとmax-widthの使い分けについて簡単に解説したいと思います。max-width・mi...

はじめまして、実習生の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とスマホでそれぞれ別々の画像に切り替えて表示したい！というケースに遭遇しましたか？方法はいくつかありますが、今回は初心者向けに2つの書き方をご紹介します。 【方法１：HTMLとCSSでレスポンシブ】 <img class="img-pc" src="im...

htmlでidをhrefに指定して、topに戻る、というボタンを作ったとき。するする〜っと上に動く「スムーススクロール」について解説します。今回はjQueryを使用したスムーススクロールを実装したいと思います。 書いたHTMLはこちら <!--トップへ戻る--> ...