マガジンのカバー画像

知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

14
HTMLの知識ゼロ、大学生AriとSivがいつか公開したいウェブサイトを作っていくシリーズ。
運営しているクリエイター

記事一覧

【第13.5回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第13.5回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

Ariです。クリスマスって朝電車が空いてて快適ですねえ^ ^

ホームページ回の更新が途絶えて随分と時間が経ちます。最初こそ
溢れんばかりのネタがあったのに。でもさ、昨日遊びに行っちゃったから今日はM-1見なきゃじゃないですか。

とはいえここまで更新しないのはまずいだろうということで、構想を練るという意味で.5をつけました。

前々からスライドショーを作りたいと言っているんですが、どんな雰囲気に

もっとみる
【第13回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第13回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

Ariです。着る服を間違えました暑い。

お久しぶりにホームページをいじろうと思います。最近は専らSivと一緒にGarageBandで遊んでるけどラップパートに入ったので休憩中。

今回は文字に影をつける方法を紹介しようと思う。
今回もCSSで指定していくのだが、最近VSCode触ってなさすぎてもはや書き方忘れてきた気がしてならぬ。

この前Canvaで作った画像に合わせて左上に水色、右下にピンク

もっとみる
【第12回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第12回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

前回の記事はこちら↓

どうもAriです。三角コーンに乗ったオロナミンCの空き瓶を見ました。逆に難しくないか。

さて本題。
我々のアカウント名の由来となったMAKE MOREのお揃いパーカー、実は色違いである。ということでヘッダーを二色のグラデーションにしたいなあと考えついた。
今回はこのグラデーションのやり方を紹介しようと思う。ブラウザによっては対応していないみたいだが、9割方見られるみたいの

もっとみる
【第11回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第11回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

Ariです。きのこ派です。

前回からリアルホームページ作成をしているので、「なんかええ感じ」を目指して使えそうなCSSを勉強していこうと思う。

今回は、カーソルを合わせた時に変化する仕組みを作る。
画像が透けたり、背景の色が変わったりするアレ。

とはいえ、セレクタにちょっと書き足せば簡単にできるので、まずはそもそも画像を透けさせたり背景色を変えたりするプロパティから紹介する。

透過透過させ

もっとみる
【第10回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第10回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

前回、基本的なCSSの書き方を紹介した。ホームページはHTMLとCSSでとりあえず作れる。つまりネタが尽きた。
というのも、作りたいデザインなんて十人十色なわけで、自分が作りたいデザインがないと話にならない。

てことで作ってみたよん。
おしゃれなの作りたかったけど、なんせ全世界に公開できるような画像とかの素材が何にもない。今度撮りに行きたいな。
これは説明用(仮)ということでHTMLとCSSだけ

もっとみる
【第9回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第9回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

どうもAriです。柿ピーのピーだけ全部残すタイプです。

前回までで一旦HTML編は終わりにしていよいよCSS編。
「CSS」とは「Cascading Style Sheets」のことで、サイトの見た目を左右する。色をつけたり、余白を入れたり、見やすいホームページには欠かせない。

ということで今回はCSSの基本的な書き方を紹介し、実際に文字や背景の「色」を変えてみようと思う。

書き方CSSの書

もっとみる
【第8回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第8回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

どうもAriです。せっかくSivがC言語について書いているので私もやろうかなと思いましたが”Hello World !”以降「関数」とやらが全くわからないので一旦休憩中です。
今回から最初に何か一言書いてみようかなと突然思い立ちました。

↑前回の記事

前回箇条書きについて書いたが、そろそろHTML縛りでは何も思いつかなくなってきた。ということで次回からCSS編に入るための準備として「id」「c

もっとみる
【第7回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第7回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

前回までに、ホームページに文字・画像・リンクを表示させた。

今回は箇条書きでリストを作っていこうと思う。

箇条書き箇条書きの基本形式は、ulタグまたはolタグと、liタグを組み合わせて作る。
ul or olタグの中にいくつかの項目をひとつずつliタグで書いていく。

うーーん言葉での説明が難しいので実際にコードを書くことにする。

ulタグ

ulは「unordered list」の略である

もっとみる
【第6回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第6回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

前回は緑のカバちゃんを貼り付けてかわいいホームページを作った。

今回はリンクを貼っていろんなページに飛べる「それらしい」ホームページに近づけていこうと思う。

aタグリンクを貼る時にはaタグを使う。aは「anchor」の略らしいがアンカーってなんだ?”いかり”とリレーの最後の人しか知らないけどいいのかな。

aタグは開始タグの中に貼りたいURLを書く。順番としては、開始タグ→リンクを貼りたいテキ

もっとみる
【第5回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第5回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

前回は見出しや本文を作った。

今回は画像を貼り付けてさらにホームページを充実させていこうと思う。

imgタグ画像を貼り付けるにはimgタグを使用する。パソコンに保存してある画像を使用する場合が多いと思うが、ウェブ上の画像だとURL丸ごと指定しないといけないので注意。

今回は下の画像を使っていく。キモいとか言わないで。

画像を指定するには「src属性」を使う。属性ってなんだとか気になる方はま

もっとみる
【第4回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第4回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

前回ホームページのタイトルをつける所まで進んだ。

今回はいよいよその中身作りに手を付ける。前回のコードに付け足す形で進めていこうと思う。今日の目標は、ホームページに何かしらの文字を表示させることにしておく。

bodyタグホームページの中身はbodyタグで挟む。
文字のサイズ・フォント・色などのことはひとまず置いといて(いずれ別でCSSを書いて指定する)、なんの文字を表示させるかだけ考えることに

もっとみる
【第3回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第3回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

前回はテキストエディタをインストールして、HTMLを扱うための環境構築まで進んだ。

ということで、今回からやっとプログラミングらしい内容に入っていく。

今日はコードを書いてホームページの枠組みを作ることを目標にする。
ホームページにタイトルをつけるだけなので、この記事で紹介するコードを表示させてもホームページ自体は白紙になってしまうが…

HTMLまずは「今からHTMLのコードを書きます!」と

もっとみる
【第2回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第2回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。


はじめに
今日から早速ウェブサイト作りを始める。サーバーを借りていないので自分のパソコン上でしか動かないが、いずれ完成形を公開するつもりで頑張ってみる。

さあ始めるか!
と思ったが「テキストエディタ」なるものがあると便利らしい。

「テキストエディタ」とは、文字を入力したり、編集したり、保存しておいたりするソフトである。
メモ帳でもできないことはないが、専用ソフトを使えばコードを色分けしてくれ

もっとみる
【第1回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

【第1回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

今回はウェブサイト編です!その他c言語編、日常編などを予定しているのでお楽しみに!

さて本題。

大学生活ってのはどうも暇だ。期待していたほど交友関係が広がるわけでもないし。人生の夏休みとはよく言ったもんだなあと思いながら今日も今日とて高校の同級生と遊んでいる。
いつもと同じカラオケでいつもと同じ曲を歌って、いつもと同じファミレスでいつもと同じドリアを食べて、いつもと同じ…

「なんかやってみよ

もっとみる