記事一覧
#Webデザインお題 に挑戦しました！
こんにちは。
今年も早いものでもう半分が終わってしまいました。
段々と夏の季節が近づいてきてエアコンが必要になってきました。
個人的には夏が一番苦手なので早く涼しくなってほしいです。笑
最近もサイトのデザイン制作の練習ということで引き続きデザインの勉強をしているわけですが、今回はこばやすさんが作ったデザインお題に挑戦させていただきました！
こばやすさん（@kobayas_s on Twitt
Photoshop＆Illustratorの勉強
こんにちは。
今回は本を使ってPhotoshop＆Illustratorの勉強をしていきます。
今回使った本はこちらです。↓
この本は、Photoshop＆Illustratorの基本的な操作方法に重点を置いたものではなく具体的な手順やスクリーンショットを活用し、自分でソフトを使いながらさまざまなデザイン技法を学べる本となっています。
今回はこの本で学んだことを技法ごとにまとめていきます！
バナーデザインの練習②
こんにちは。
今回はバナーデザインの制作練習として、いくつかのお題の中から好きなものを3つ選んで制作していったのでそこで学んだことについてまとめていこうと思います。
お題はこちらのサイトから選定させていただきました。↓
１. 英会話塾：短期講習の告知１つ目は英会話塾の短期講習バナーのお題にしました。
バナーのイメージが楽しい感じということで、ポップな感じのデザインは自分の中では得意な方の意識
HTML&CSSの練習
こんにちは。
お久しぶりです。
以前の投稿から随分期間が空いてしまいました。
投稿が空いていた期間僕が何をしていたかというと、ひらすらコーディング練習をしておりました。
今回はそのコーディング練習で作ったサイトや学んだことについてまとめていこうと思います。
作成したサイト①まずは、とある旅行サイトを作成しました。
このサイトは似たような項目がいくつかあるので一つ基盤をしっかり作って使い回すこと
HTML&CSSの勉強②
こんにちは。
今回も本を使ってHTML&CSSの勉強をしていきます。
今回使った本はこちらです。↓
この本も一冊目同様、ステップごとに作業内容が載っていて、それにそってコードを書くことで一つのサイトが出来上がります。この本では一冊目より応用的なコードが使われているのでより実践に近いコードを組むことができます。
実際に最後に完成したものがこちらです。↓
今回もこの本の中で躓いたところや難しい
HTML5&CSS3の勉強①
今回から、本を使って実際にHTML＆CSSを勉強していきます。一冊目としてこちらの本を使用しました。↓
この本はステップごとに作業内容が載ってあるので、それにそって実際にコーディングしていくことで初心者でも勉強しながら1つのサイトを作ることができます。実際に最後に完成したものがこちらです↓
今回は、この本の中で躓いたところや難しいかった箇所を自分の振り返りとしてまとめていきます。
学んだこと
CSS【 Flexbox編 】
こんにちは。
今回も、CSSについて学んだことを共有していきます。
1.要素を横並びにしよう
display: flexは指定した要素の子要素を横並びにします。
横並びにしたい要素の親要素にdisplay: flexを指定します。
2.横並びにした要素を画面幅いっぱいに広げよう
flex: autoは指定した要素の幅を親要素に合わせて伸縮させることができます。
親要素の幅に合わせて伸ばし
CSS【 上級編 】
こんにちは。
今回も、CSSについて学んだことを共有していきます。
メディアクエリを設定するメディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法です。
メディアクエリは、@media (条件) { .... }という様に書きます。
指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。
メディアクエリの条件には、max-width(最大幅)、または
HTML【 上級編 】
こんにちは。
今回も、HTMLについて学んだことを共有していきます。
レスポンシブデザインの型を準備しよう1.viewportの設定
レスポンシブデザインを適用する準備として、<head>タグ内にviewportを設定しましょう。
viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しません。
2.width: 100%
画面幅によって全体のw
CSS【 中級編02 】
こんにちは。
今回も、CSSについて学んだことを共有していきます。
インラインブロックブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがあります。
インラインブロック要素はインライン要素と同様に横に並びますが、ブロック要素のように幅や高さをもちます。
<a>タグなどは初期状態でインライン要素になっていますが、displayプロパティを使うと、インラインブロック要素