WEBデザイン

1/2ページ

プログラミングで高収入を目指す指南書【人生 悩み 転職 就職】

エンジニアが稼げる理由 そもそも、エンジニアの月単価って皆さんご存じでしょうか? 月単価とは一人ひとりにかかるコストの総評です。そのコストには給料はもちろん、教育費、各種保険料、その人に関わる人件費、その他色んな費用がかかっています。 エンジニア一人における月単価って実はめっちゃ高いんですよ。例えば大手派遣会社などは新卒でも派遣先に60~80万とか貰って、その内の給料として 「はい、君は今月20万 […]

【プログラミング基礎】分かりやすく。余白を作る時に便利なmarginとpaddingの違いを解説するよ【WEBデザイン】

margin(マージン)とpadding(パディング)とは? ボックスモデルとは? ・表示領域の部分は 黄色で囲まれた部分HELLOWORLDを表しています。・paddingは境界線と表示領域の間の余白部分になります。・marginは境界線の外の部分の余白を表しています。 プロパティの書き方 padding: 30px 40px 50px 60px; 上30px、右40px、下50px 左60px […]

【プログラミング 独学 転職】ギークジョブは転職できない?実際に通ってみた感想

プログラミングスクールのGEEKJOBの最大の特徴は? 完全無料で未経験文系の人でもプログラミングが学べて尚且つ就職率がほぼ100%のスクールです。 学べる言語はjavaかphpのふたつを選べます。※訂正 2020年6月時点では学べる言語にRubyが追加されました。Rubyも需要がかなり高い言語なので嬉しいポイントですね。 javaは大規模な開発に使われる事が多いですね。例えると、銀行の〇〇システ […]

【プログラミング基礎】 背景を自由自在にするbackgroundプロパティ一覧【WEBデザイン】

backgroundプロパティって? backgroundは結論から言うと、背景全般の設定をするプロパティです。例えば背景の色と設定したり、画像を挿入したり、背景の位置決めなどを行ったりします。その中でも覚えるべき重要なプロパティのみ集めました。 以下がプロパティ一覧になります。 プロパティ名              値 説明 background-image ☆重要 url 背景画像を決めます […]

【プログラミング基礎】要素の位置決めに便利なpositionプロパティ一覧【WEBデザイン】

位置を決める。positionプロパティとは? 先ほどざっくり紹介しましたが、結論からいうと、要素の位置を決めるプロパティです。上下左右自由自在に動かす事ができます。値はtop(上)、left(左)、right(右)、BOTTOM(下)の4つを使います。下図のイメージです。 positionプロパティの値一覧 static(初期値) 初期状態の値 relative 現在の位置を基準に相対的な位置決 […]

【プログラミング初心者】いよいよ終盤!WEBサイト制作。スマホ用にレスポンシブ対応をしよう。【WEBデザイン】

メディアクエリの準備をしよう。 ※メディアクエリやレスポンシブ対応が何かわからない方はこちらの記事を参考にしてください。 以下のコードをindex.html及びindex.scssに追加してください。 画像と文章の位置の調整 まずはPC表示から見ていきましょう。緑ブロックの位置関係に注目してください。 続いてスマートフォン表示(galaxy S5)の方も見てみましょう。 以下のCSSを追加してくだ […]

【プログラミング】フレックスボックスを使って自由自在なwebサイトを作ろう【WEBデザイン】

※コードペンの使い方 図が見辛い場合は以下で調整してください。 親要素に指定できるプロパティ一覧 基本のキ display:flex(display:inline-flex) ※display:flexを指定することで、親要素はフレックスコンテナ(箱)、子要素はフレックスアイテム(中身)に分類されます。 親要素に指定できるflexプロパティ一覧 flex-directionとは? flex-dir […]

【プログラミング初心者】かっこいいWEBサイト作成編 サイドメニューを表示させよう。【WEBデザイン】

サイドメニューを表示させよう。 以下のコードを.containerクラスの直下に追加してください。 display:noneを用いて表示を消そう! 以下のCSSを追加してください。 これで表示が消えましたね! JQueryではこの表示のon/offを用いて動きをつけていきたいと思います。 JQueryを実装しよう! 以下の流れになります。 ①アイコンをクリック ②サイドメニューが開く ➂時間差でメ […]

【プログラミング基礎】レスポンシブWEBデザインとは?【スマホ対応】

レスポンシブデザインとは? 一般的にPCやスマホなどそれぞれ対応した別のHTMLファイルで作成されていますが、レスポンシブWEBデザインを用いる事により、1つのHTML及びCSSで調整する事により大幅な作業時間の短縮などのメリットがあります。 ・メリット ・作業時間(工数)の短縮、メンテナンスの効率化 ・同じURLを使用できる ・デバイス毎にデザインを決めなくて済む ・検索サイトのエンジンに上位検 […]

【プログラミング言語】WEBデザインの基礎。無料でWEBサイトを作成してみよう メインコンテンツ編②

こちらが後半部分のソースコードとなります。ひとつずつ見ていきましょう。 BUSINESS部分をコーディングしよう! 以下がBUSINESS部分のコードです。 INFO部分をコーディングしよう! 以下のコードを追加して文字間の調整を行いましょう!。 まとめ いががでしたでしょうか。次はサイドメニューバーを作っていきます!