What's New Qiita

20191125のCSSに関する記事は8件です。

  • 投稿日：2019-11-25T23:59:25+09:00

年末まで毎日webサイトを作り続ける大学生 〜38日目 cssで吹き出しを作る〜

はじめに

こんにちは！@70days_jsです。

cssで吹き出しを作ってみました。

今日は38日目。(2019/11/25)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day38.html

やったこと

こんな感じの吹き出しを作りました。↓

スクリーンショット 2019-11-25 23.50.45.png

コピペで繰り返し使えるように作りました。↓

<body>
    <div class="wrapper">
        <img class="image" src="pic.png" alt="画像">
        <div class="fukidashi">吹き出しがあると、ポップに見えるよね</div>
    </div>

    <div class="wrapper2">
        <div class="fukidashi2">そうだね</div>
        <img class="image2" src="pic.png" alt="画像">
    </div>

    <div class="wrapper">
        <img class="image" src="pic.png" alt="画像">
        <div class="fukidashi">うん。</div>
    </div>
</body>

.wrapperクラスが左側に配置される方です。
.wrapper2クラスは右側に配置されます。

違いは、つけているクラスと、divとimgの順番だけです。

吹き出しの作り方。↓

.fukidashi {
    width: 200px;
    margin-left: 10px;
    position: relative;
    display: inline-block;
    text-align: center;
    color:#FFF;
    padding: 30px;
    background-color:black;
    border-radius: 50%;
    z-index: 0;
}
.fukidashi::before {
    top: 50%;
    left: -5px;
    margin-top: -10px;
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: transparent black;
    border-width: 10px 10px 10px 0px;
}

absoluteとrelativeを使って実現します。
吹き出しの三角形部分はborrderのプロパティを変えることで実現しています。

吹き出しの本体はradiusでちょっと丸めるだけです。
あとは位置関係を相対的にずらして、三角形を見える部分に持ってくるだけです。

感想

サイトを作る際に、吹き出しがあるとポップな感じになるので前々からやりたいと思っていました。できてよかったです。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

  1. 実際に書いてみる！CSSで吹き出しを作る方法【初心者向け】 | TechAcademyマガジン (https://techacademy.jp/magazine/12936)

とても分かりやすかったです。ありがとうございます！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T20:43:00+09:00

初心者によるプログラミング学習ログ 168日目

100日チャレンジの168日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

168日目は

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T19:49:02+09:00

うちの猫のサイト作ってみました。

暇つぶしに、うちの猫のサイトをgithubに挙げてみました。
サイトのURIはこちらです。
背景のアニメーションはVegas.jsを使っています。
qiita_投稿用_2-compressor.gif
サイトのリポジトリはこちらです。混じり物はありません。(∩´∀｀)∩
うちの猫、ヒマワリです（あぁ、きゃわたん
この記事を観て頂いた方、腕に自信がある方、「お前よりいいぺっとサイト作ってやんよ( ﾟДﾟ)」とノッて頂けると凄く嬉しいです。
※どんな子を出汁ｹﾞﾌﾝｹﾞﾌﾝ、題材にしても構いません

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T18:09:45+09:00

CSSで文字列を...で省略する

文章が超絶に長い時、
どうしても省略したい時。

設定するCSSは以下。

style.css
.short_object {
    width: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis; /* Opera9,10対応 */
  }

上記のshort_objectを省略したいタグに設定するだけ。

index.html
<h4 class="short_object">オラオラオラオラオラオラ！!!!!!!!</h4>

出力結果

オラオラオ...

以上。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T13:49:34+09:00

 ←これって何の呪文ですか？

&と;で挟まれている文字は文字実体参照と言う。
でも呪文っぽくて面白いな:star:
参考サイト→http://rinrin.saiin.net/~aor/hms/cer

文字の間隔を調整

jittai_sansho.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>文字実体参照</title>
    <link rel="stylesheet" href="css/jittai_sansho.css">
  </head>
<body>
  <div class="container01">
    <p class="sansho01">
      間が&nbsp;空くよ
    </p>
    <p class="sansho02">
      間が&ensp;空くよ
    </p>
    <p class="sansho03">
      間が&emsp;空くよ
    </p>
    <p class="sansho04">
      間が　空くよ
    </p>
    <p class="sansho05">
      間が&thinsp;空くよ
    </p>
  </div>
</body>
</html>
jittai_sansho.css
.sansho01 {
    background: #fdc1c1;
}
.sansho02 {
    background: #fdf4c1;
}
.sansho03 {
    background: #c3fdc1;
}
.sansho04 {
    background: #c1fde9;
}
.sansho05 {
    background: #c1ccfd;
}

20191125_Qiita01.png
4つ目は全角スペースで空けているけど、細かい文字間は文字実体参照を使った方が良い。

文字実体参照 説明 備考
&nbsp; 無視・改行されない空白 no-break spaceの略
&ensp; nの字の幅の空白(半角スペース) en spaceの略
&emsp; mの字の幅の空白(全角スペース) em spaceの略
&thinsp; &nbsp;より狭い空白 thin spaceの略

「&nbspは半角スペース」と説明しているサイトがあったが、Photoshopで図ってみたら半角スペースより狭かった。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T13:28:27+09:00

Vueで背景をページ毎に動的に変えたい

やる事

「画像を投稿して、投稿した画像にコメントを付けたい」
「コメントページは別ページ」
「別ページの背景を投稿画像にしたい。」
できるだけ頭を使わずにVue.js/Nuxt.jsでやっていきましょう。

方法

ページ内の要素をdivで包む

<template>
  <div>
    <!-- ここに中身。カニ味噌とか -->
  </div>
</template>

div要素のスタイルをバインド

バインド自体はsrcなどの属性に対して行うのとまったく同じ。

<template>
  <div v-bind:style="pageStyle">
    <!-- ここに中身。ウニとか -->
  </div>
</template>

スクリプトで背景要素を設定する。

連想配列にスタイルを書いていく。CSSのプロパティは通常ケバブケースだが、ここではキャメルケースで書くこと。
あと"url('ebikaniuni')"の中にURLを入れる部分に注意。落ち着いて書きましょう。
ちなみにTemplate部に直で書いてもOKだったりする。とても読みにくくなるけど...。

<script>
export default {
  data() {
    return {
      pageStyle: {
        // 背景変更用スタイル
        backgroundImage: "", // 背景読み込み前なので空白
        backgroundRepeat: "no-repeat",
        backgroundAttachment: "fixed",
        backgroundPosition: "center center",
      }
    };
　},
  created() {
    this.pageStyle.backgroundImage = "url('" + gazouNoUrl + "')"; 
    // クォートをいい感じにエスケープする必要がある点に注意。
  },
}

</script>

もっといい方法があったら教えてクレメンス

参考資料

思考の葉:v-bindでstyle、classの属性値を変える[Vue.js]

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T08:24:43+09:00

【初心者向け】　プログラミング「独学1ヶ月」と「スクール入学3日」との比較

初投稿なので不備あれば気軽にご連絡いただければ幸いです。
この記事はプログラミング初心者で、独学中の人、プログラミングスクールに通うか迷っている人の参考になるかと思って書いてみました

自己紹介

プロフにもありますが、今まで保険代理店で成果報酬型の営業職をしておりました。
手取も多く、残業も月5時間程度で人間関係も良好な職場だったのですが、

「興味のある分野で、プロダクトを売り込むんじゃなくて創ってみたい！」

という気持ちの変化で現在はとあるプログラミングスクールで勉強しています。
（宣伝目的ではないので名前は出していません）

独学1ヶ月での成果

(独学は個人差が大きいので1つのサンプルとしてご覧ください)
8月に独学を開始して1週間かけて作ったものが　↓　になります

やったことは初心者御用達のProgateのHTML.CSSだけです。

このLTページ作成後、JavaScriptとjQueryを一通りやって理解力が追いつかず、学習進度も低下

残り3週間については、
レスポンシブ、簡単なアニメーション動作、口コミ機能を追加させただけで1ヶ月が終了です。
（9月は書籍購入や現実逃避して進捗はありません）

スクール入学

作ったものは　↓　です　（※提出日に投稿したので5日目のツイートになっています）

　
　
で、提出日の夜にバグを取り払ってJavaScriptで作ったゲームが　↓　です
先ほどの投稿の最後でエラーだったページの内容です

テトリミノごとに違う画像を使用して、揃ったときにチーズの焼ける音を挿入しています。

テトリス部分は3日目時点では完成せず、6日目で完成しました。
（4日目に参考書を1冊読み切ってから制作に取り掛かったため）
　
　

独学していた頃との比較

全くの初心者とのころとは完全な比較と言うのは難しいかもしれませんが、

  1. 3日目の時点で1ヶ月の成果物同等程度、
  2. 6日目で苦手分野へ挑戦して制作できた

これには独学当時と大きなの差があるように実感しました！

「スクールで学んでできた！」というモノではなく
お題に沿った　面白そうなモノをとりあえず作ってみよう　という
好奇心から意外と学習が捗った…　というのが学習進捗の差かと思います。
（Progate等も面白いのですが、コレが作りたい！とはちょっと違うので）
　
講義というよりは　「学習環境」　が自分を後押ししてくれたと思っています（後術します。）
　
　

スクールで3日間学んでいたこと

入学して3日間の内容は
1日目：HTMLの基本（h1とかpとか初歩的なこと）
2日目：CSSのレイアウトについて（flexboxの扱いとか）、レンタルサーバーの説明とか
3日目：UI/UXの講義
　

…内容としては深いことは何もしていません。
Progateでもやっていそうな内容ですし

授業で勉強したのも　↓　みたいな感じです。(一部ですが)
スクリーンショット 2019-11-24 19.48.31.png

　
で、週末の課題として配布されたPDF通りのLPを作ってサーバーにアップすること(猶予3日間)
必須事項はこれだけです。

　
※ただ、これだけで終わるような課題ではありません

[プラスで余裕があれば機能を追加してきていいですよ?]

必須課題だけで終わらないのが今回入学したスクールの特徴でして
　
私もテトリスの実装(1日間に合わずですが)したのですが、
同期の中には以下のような機能を実装していました
　
　
・音楽に合わせてひょっこりはんが出てくる仕様
・ある場所をクリックするとページ全体でモグラ叩きゲームが始まる
・課題PDFを全て自分好みなデザインに変更する
　etc...
　
　
このスクールの特徴なのですが、
「課題終わったからここまででいいや」　がなくて
「ここまでできたから次はこれを付けてみよう」　といろんな技術を各々で見つけて実装してきます

この投稿書いているのが通学して1ヶ月半経った今なのですが、この風習は変わらずです?
　
授業で教わるというよりは「この機能つけるには何を勉強するべきか」がこの場では一般化していて
勝手に自走力が身についている　といった環境なので、毎週の課題発表が楽しみです！?
自分が作りたいものを毎回作っているので夜までコードを書くのがそこまで苦ではない…と思う(笑
（本音は結構キツイので好きなモノの制作でないと続いてないと思う）

なぜ今この記事を書いたのか

2点あって
①フォロー中の人が2ヶ月経過してもHTML.CSS道場ばかりやっている人が意外といて、
　簡単なLP作成の記事を有料で購入していたり、次に進んでない人が意外と多かった

②先日Twitterのタイムラインに
　「独学とスクールどっちがいいの？」　議論みたいなのがあったので

「確かにスクールいくか悩んでるときに参考になるものってなかったよなあ」（アフィカスばかりで…）

と思って案外需要あるかもと思い、振り返りの意味も込めて書いてみました！笑


　
　
私の意見としては 「結局はプログラミングは独学です」 ってのが1つ
色々意見はありますが、

　
未経験の繋がりが欲しい
　→目的意識違う人たちだったらその繋がり1年も持たないよ（キツイとか、ノマド飽きたとか）
　　↑なら経験者の繋がり求めに行ったり、勉強会の方が70万よりコスパはいいよ

　
一人じゃ続かない
　→メンターでは多分続かないので通学型のスクールか家庭教師つけるとかした方がいいかと

　
同時期に始めた人たちの進捗が気になる
　→Twitterと勉強会、サロンを駆使してください

　
行きたいけどお金がない…
　→（お金自体はあるけど、70万も払う価値あるの？っていうのがここに当てはまるのかと）
　　社会人は最近「第4次産業スキル習得講座」っていうものがありますので、検索してください。
　　条件が揃えば入学費＋日々の生活費の手当が発生するし、国民年金も免除できる可能性があります。
　　https://career-theory.net/resign-pension-3477
　　学生は親にお願いしましょう。
　

1000万稼ぐフリーランスに…
　→営業と副業やった方が早いし、お金だけ目標にしたところでマジで続かんよ(経験より)
　
　
　
　
　
　
そう思っているのになんで今も通ってるの？？　という疑問を持たれるかと思いますが、

学習期間と入学金を投資するだけの価値があると感じたので今も通っています。
一応、動画教材に不備があったり不満はありますが学習環境が気に入っているのが大きいです。

話が長くなりすぎるのでその詳細は後日noteかQiitaに投稿します

最後に

独学か悩んでいる方は
　まずは1ヶ月くらい独学で周りを見ないで突き進んでみてはいかがでしょうか？
　やってみて周囲と遅れていたり挫折したら何かのサービスを使ってみると良いかと思います

スクールにこれから行く方は
　入学前に「ここに自分が投資して納得できるのか」しっかり考えましょう
　くれぐれも考えすぎはダメ（私はここに時間かけ過ぎて後悔してます…）
　
　
　
　
偉そうなこと書いてますが、まだ勉強初めて1ヶ月半のペーペーです←
phpやJS触ってますが、今でもtableタグとか理解してなくてぶつかることもあります笑

ただ、全部理解して進むのではなく、ある程度型が作れるようになったら
興味の向くままに勉強する方が進捗ありますし、何より楽しいです！！


　
　
今は苦手のJS克服しつつphpに取り組んでいますので、よかったらTwitterフォローなりメッセ下さい。
（とても喜びます←）
　
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T02:22:36+09:00

28歳から高卒未経験がWeb系エンジニアを目指す学習＆就活の日記

どもども。初めまして、これが現在のおいらのスペックです。
・年齢：28歳
・仕事：離職中
・性格：自称コミュ障
・職歴：ほぼ工場。そしてほんの少しだけ音楽教室の運営を経験。
・学歴：高卒（工業系だんしーこう）
・英語力：グーグル翻訳最高！現在ちょびちょび勉強中。
・好物：天丼、とろサーモン（寿司）、家系ラーメン、徳用チョコ、うすしおポテチ、ダブルチーズバーガー、（見たらわかる全部太る奴やん）
・趣味：プログラミング（3日前から）、映画鑑賞（ほぼ洋画）、音楽鑑賞（オールジャンル）、昔はギターとかDTMとか。
・座右の銘：完璧より前進
・あこがれる人：レオナルド・ディカプリオ、
・最近気になる人：エドワード・スノーデン、
・悩み：プログラミングも覚えたい、英語も覚えたい、映画も見たい、ゲームもやりたい、仕事も探さなくちゃ、家事もしなくちゃ、などやる事が多すぎるので分身の術を使いたい昨今。
・現在のタスク：プログラミング学習、ポートフォリオ作成
・目の前の目標：Webエンジニアになる。
・ちょっと先の目標：リモートワークする。
・その先の目標：面白いWebサービスを作る。とにかく面白いものを作りたい。
・感化された本：サピエンス全史（ざっとしか読んでない（笑）でもオススメ！）
・プログラミング教材：Progate、ググりまくる、後日、参考書等も購入予定。

・プログラミングを始めようと思ったきっかけ：
中学生の時にガラケーで、無料ホームページを利用して掲示板を作ったことがあり（i-mode時代）、学校の友達や他の学校の人達が利用してワイワイとコメントしてくれた。そして今頃になってその記憶を思い出し、またそんな風に色んな人達が楽しめるサービスを作りたい思った。（あの頃、ケータイ代が跳ね上がって親にガチで叱られたのは言うまでもない。。。）あとは、純粋にネットとかPCをいじっている時が一番楽しいため。

ということで、以上がおいらの簡単なスペックでした。

なぜ投稿したのかって？

これからQiitaを、日々の学習内容の備忘録として活用しようと思ったから。

とりあえず今日で勉強をし始めて3日目です。
なので今日まで3日分の勉強内容をここに記そうと思います。

この記事だけなんか長く書いてるのですが、この記事以降の日記は一言日記にしようと思ってます。

19/11/23
・ハローワークに行った。Web系エンジニアの未経験okの正社員求人を相談。結果→収穫無し（その他エンジニア求人情報はゲット）
・ためしにProgateに登録してみる。
・プログラミングおもしろいやんけ＼(^o^)／
・HTML&CSSの基礎を学ぶ。

11/24
・git hubに登録
・環境構築
・gitとgit hubについてググりまくってほぼ1日を使う(泣)
・progateのhtml&css中級編を半分まで修了。

11/25
・html&css中級編を全部修了。
・Rubyの学習を始める。　
・備忘録のために日記を書き始める。

ということで引き続きプログラミング学習したいと思います。
ではでは。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧